vuepress使用简介及个人博客搭建

一、安装 VuePress

首先，在命令行中执行以下命令，全局安装 VuePress：

npm install -g vuepress

二、初始化 VuePress

执行以下命令，在本地新建一个 VuePress 项目：

mkdir my-blog && cd my-blog npm init -y npm install -D vuepress

然后，在 my-blog 目录下创建一个 docs 目录，并在其中新建 README.md 文件作为首页内容。

三、编写博客内容

在 docs 目录下，可以新建多个 Markdown 文件，用于编写博客或其他文档内容。VuePress 使用 Markdown 编写文档，可以参考 Markdown 语法进行编写。

四、配置 VuePress

在项目根目录下新建一个 .vuepress 目录，并创建一个 config.js 文件，用于配置 VuePress。

module.exports = { title: 'My Blog', // 博客标题 description: 'This is my blog', // 博客描述 themeConfig: { nav: [ { text: '首页', link: '/' }, { text: '博客', link: '/blog/' }, { text: '关于我', link: '/about/' }, ] } }

在上面的代码中，我们定义了博客的标题和描述，并配置了导航栏。然后，在 docs 目录下新建 blog 和 about 两个目录，并在其中分别创建 index.md 文件用于展示博客列表和个人简介。

五、启动 VuePress

在命令行中执行以下命令，启动 VuePress：

vuepress dev docs

然后在浏览器中访问 http://localhost:8080/，可以看到本地搭建的博客网站。

六、部署博客网站

使用 VuePress 构建博客网站时，需要将 VuePress 编译生成的静态文件部署到服务器上。推荐使用 GitHub Pages 进行部署。

首先，在 GitHub 上创建一个与博客网站同名的仓库，并将代码提交到该仓库的 master 分支。

然后，在项目根目录下执行以下命令，将博客网站编译生成的静态文件发布到 GitHub Pages 上：

npm run deploy

注意，执行该命令之前，需要在 package.json 中添加 deploy 脚本如下：

{ "scripts": { "deploy": "vuepress build docs && gh-pages -d docs/.vuepress/dist" } }

执行完成后，在 GitHub 仓库的 settings 页面中，可以看到部署成功的博客网站