VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 —— 防止踩坑篇

vuePress官网地址  👉 首页 | VuePress

手动安装

这一章节会帮助你从头搭建一个简单的 VuePress 文档网站。如果你想在一个现有项目中使用 VuePress 管理文档,从步骤 3 开始。

  • 步骤 1: 创建并进入一个新目录

mkdir vuepress-starter
cd vuepress-starter

  • 步骤 2: 初始化项目

git init

npm init

  •  步骤 3: 将 VuePress 安装为本地依赖

npm install -D vuepress@next

  •  步骤 4: 在 package.json 中添加一些 scripts
{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}
  • 步骤 5: 将默认的临时目录和缓存目录添加到 .gitignore 文件中 

Tips:若本地没有.gitignore 文件,手动添加一个.gitignore即可。

echo 'node_modules' >> .gitignore

echo '.temp' >> .gitignore

echo '.cache' >> .gitignore

  • 步骤 6: 创建你的第一篇文档

mkdir docs

echo '# Hello VuePress' > docs/README.md

  • 步骤 7: 在本地启动服务器来开发你的文档网站
npm run docs:dev

VuePress 会在 http://localhost:8080在新窗口打开 启动一个热重载的开发服务器。当你修改你的 Markdown 文件时,浏览器中的内容也会自动更新。

现在,你应该已经有了一个简单可用的 VuePress 文档网站。

VuePress 有一个开箱即用的默认主题,如果你不指定要使用的主题,那么会自动使用默认主题。

Vuepress-Theme-Hope搭建个人博客示例👇

安装

在 [dir] 文件夹内新建 vuepress-theme-hope 项目:

npm init vuepress-theme-hope [dir]

要将 vuepress-theme-hope 作为文档构建器添加到现有项目中,请在项目根目录中运行以下命令:

npm init vuepress-theme-hope add [dir]

TIps:这里的 [dir] 是一个参数,你需要使用真实的文件夹名称替换它,例如 docsblog 或其他你喜欢的名称。

创建项目

在创建项目的过程中,会有一些选项让你选择:

创建项目的类型:文档docs类型

如果你在模板初始化成功后选择立即启动开发服务器,稍等片刻,你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

将会看到👇界面:

创建项目的类型:博客blog类型

如果你在模板初始化成功后选择立即启动开发服务器,稍等片刻,你就可以在浏览器地址栏输入 localhost:8080/ 访问开发服务器了。

将会看到👇界面:

 可参考自定义主题👇

主页 | VuePress-theme-hope  

主页 | vuepress-theme-rceo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/591224.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

创建x11vnc系统进程

为方便使用vnc,所以寻找到一个比较好用的vnc服务端那就是x11vnc,索性就创建了一个系统进程 一、环境 系统:银河麒麟v4-sp2-server 软件:x11vnc【linux下】、VNCviewer【win下】 二、安装x11vnc 1、挂载光盘源并修改apt源 mou…

用可视化案例讲Rust编程1. 怎么能学会Rust

用可视化案例讲Rust编程 1. 怎么能学会Rust 如果要列举Rust的优势,恐怕写个十条八条是写不完的,而且不管写哪条优势,都有很多同学跳起来反驳,比如我们说Rust比C/C内存安全,肯定有同学说C 20也支持内存安全&#xff0…

message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra

第一步:修改 project.config.json 文件 "packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}], "packNpmManually": true 第二步:…

机器人活动区域 - 华为OD统一考试

OD统一考试 题解: Java / Python / C++ 题目描述 现有一个机器人,可放置于 M x N 的网格中任意位置,每个网格包含一个非负整数编号,当相邻网格的数字编号差值的绝对值小于等于 1 时机器人可以在网格间移动。 问题: 求机器人可活动的最大范围对应的网格点数目。 说明: 网格…

Android Studio xml布局代码补全功能失效问题

这里写目录标题 前言:问题描述原因分析:解决方案:1.更新 Android Studio 版本2.原版本解决XML补全失效 小结 前言: 在开发过程中,你可能遇到很多奇奇怪怪的问题。Android Studio 编译器出现问题也是常有的事情&#x…

单片机开发--keil5

一.keil5 Keil uVision5是一个集成开发环境(IDE),用于对嵌入式系统中的微控制器进行编程。它是一个软件套件,包括源代码编辑器、项目经理、调试器以及微控制器开发、调试和编程所需的其他工具。Keil uVision5 IDE主要用于对基于A…

线性代数基础知识

计算机视觉一些算法中常会用到线性代数的一些知识,为了便于理解和快速回忆,博主这边对常用的一些知识点做下整理,主要来源于如下这本书籍。 1. 矩阵不仅仅是数字排列而已,不然也不会有那么大精力研究它。其可以表示一种映射 关于…

Linux Debian12安装和使用ImageMagick图像处理工具 常见图片png、jpg格式转webp格式

一、ImageMagick简介 ImageMagick是一套功能强大、稳定而且免费的工具集和开发包。可以用来读、写和图像格式转换,可以处理超过100种图像格式,包括流行的TIFF, JPEG, GIF, PNG, PDF以及PhotoCD等格式。对图片的操作,即可以通过命令行进行&am…

Bert模型from_pretrained报网络错误解决办法

问题描述: 服务器或者本地运行以下代码时报网络连接错误: from transformers import AutoTokenizermodel_checkpoint "distilbert-base-uncased" tokenizer AutoTokenizer.from_pretrained(model_checkpoint, use_fastTrue, cache_dir./cac…

python解决一维动态规划问题,寻找丑数

对于一维动态规划问题中,还有一个可能会经常遇到的问题,就是寻找丑数。 对于丑数的概念是,把只包含质因子2、3和5的数称作丑数(Ugly Number)。 添加图片注释,不超过 140 字(可选) 添…

Vue-响应式数据

一、ref创建基本类型的响应式数据 vue3可以使用ref、reactive去定义响应式数数据。 知识点汇总 使用ref需要先引入ref,import {ref} from vue在模板 template 中使用了添加ref 的响应式数据,变量的后面不用添加.value所有js代码里面,去操作r…

【web】vue 播放后端(flask)发送的 mp3 文件

文章目录 演示后端(flask)前端(vue3)重要说明 演示 后端(flask) 后端返回的是 mp3 文件的 url,是可以直接在浏览器上打开后播放的处理跨域请求pip install flask-cors后端代码from flask impor…

Python - 数据结构与算法之 排列与组合

目录 一.引言 二.排列 A-Permute ◆ 定义 ◆ 计算 ◆ 性质 ◆ 实现 三.组合 C-Combine ◆ 定义 ◆ 计算 ◆ 性质 ◆ 实现 四.经典算法题目 1.全排列 [无重复] 2.全排列 [有重复] 3.组合 [可重复] 4.子集 [无重复] 5.子集 [有重复] 五.总结 一.引言 关于排列…

云原生十二问

一、什么是云原生? 云原生是在云计算环境中构建、部署和管理现代应用程序的软件方法。现代企业希望构建高度可扩展、灵活且具有弹性的应用程序,可以快速更新以满足客户需求。为此,他们使用现代工具和技术,这些工具和技术本质上支…

科普帖:什么是XaaS-一切皆服务模型(包含10个示例类别)

有时似乎有太多的商业首字母缩写词要记住。随着快速变化的技术进步和云计算的出现,新的类别将不断涌现。XaaS 就是这样一个最新的补充。 该领域的大多数读者都知道SaaS(软件即服务)、IaaS(基础设施即服务)和PaaS&…

【CISSP学习笔记】5. 安全架构和工程

该知识领域涉及如下考点,具体内容分布于如下各个子章节: 使用安全设计原理来研究、实施与管理工程过程理解安全模型的基本概念(例如 Biba、Star Model、Bell-LaPadula 等模型)基于系统安全要求选择控制措施理解信息系统 (IS) 的安…

强大的隐藏应用 Hides 5中文 for mac

Hides 5是一款Mac上的应用程序,旨在帮助用户隐藏其他应用程序并专注于当前任务,从而提高工作效率。其主要功能包括对焦模式、隐藏所有打开的应用程序、隐藏除当前活动应用之外的所有打开的应用程序、支持全局热键、可定制性、支持多种显示方式等。 Hide…

【map】【滑动窗口】【优先队列】LeetCode480滑动窗口中位数

作者推荐 动态规划 多源路径 字典树 LeetCode2977:转换字符串的最小成本 本文涉及的基础知识点 C算法:滑动窗口总结 map 优先队列 题目 中位数是有序序列最中间的那个数。如果序列的长度是偶数,则没有最中间的数;此时中位数是最中间的两…

注意力机制(attention mechanism)

1、注意力 灵长类动物的视觉系统接收了大量的感官输入,这些感官输入远远超出了大脑能够完全处理的能力。然而,并非所有刺激的影响都是同等的。意识的汇聚和专注使灵长类动物能够在复杂的视觉环境中将注意力引向感兴趣的物体,例如猎物和天敌。…

【XR806开发板试用】FreeRTOS创建任务测试

这篇来学习下,XR806开发板在FreeRTOS系统下创建两个任务测试,由于没有找到学习的文档,试着参考例程来测试。 一、复制工程 上篇测试了hello_demo的测试例程,直接复制这个工程文件,在此基础上修改 rootubuntu:/home/…