vuepress 搭建博客

1、环境准备

node 环境

下载安装 node，必须 Node.js 版本 >= 8 nodejs.org/zh-cn/downl…

vuePress

# 安装
yarn global add vuepress # 或者：npm install -g vuepress

2、初始化项目

项目基本配置

初始化文件夹

npm init -y 或 yarn init -y

新建一个文章目录，存放文章等静态资源，并且我们需要针对每篇文章，每个模块进行配置，使用户能够方便导航，查看文章

在文档目录下面创建一个 docs, 然后在 docs 中创建一个 .vuepress 文件夹，里面再创建一个 config.js 配置文件

项目结构如下

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
└─ package.json

在 VuePress 网站中，必须的配置文件是 .vuepress/config.js，它需要导出一个 JavaScript 对象：

module.exports = {
  title: 'Z 空间',
  description: '原始社会的一个码农，自我复盘的老巢'
}

此时项目可以在本地运行了，vuepress 有两条命令

vuepress dev docs // 运行在本地
vuepress build docs // 打包

我们修改命令，在 page.json中新增脚本

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }

此时我们运行

npm run dev

项目即可运行在本地 http://localhost:8080/

我的是这样

导航配置

博客一定会有导航，不然我们只有一个页面，一篇文章给用户看，不符合我们爱写文章装 x 的属性，所以弄点导航出来在 .vuepress/config.js中，新增以下内容

themeConfig: {
  nav: [{ text: '前端', link: '/fore-end/' }, { text: '其它', link: '/other/' }]
}

这样就添加了两个导航，前端和其它

此时也要为这两个导航新建两个文件夹，并且分别创建 README.md 文件

此时文件结构如下

.
├─ docs
│  ├─ README.md
│  └─ .vuepress
│     └─ config.js
│  ├─ images
│  ├─ fore-end
│     └─ README.md
│  ├─ other
│     └─ README.md
└─ package.json

这样点击导航可以直接读取两个 README.md 中的内容，不至于出现 404 的情况

侧边栏配置

与导航栏配置类似，如下

themeConfig: {
  sidebar: {
    '/other/': ['vuepress搭建博客']
  },
  sidebarDepth: 2, // 读取两级标题显示
}

2、静态博客部署

我将博客放在了码云上，所以以下是在码云上部署博客步骤，GitHub 上雷同

创建一个仓库，名为 `xxx`

仓库开启 `gitee pages`

此时我们得到了一个访问地址

我们来到 .vuepress/config.js 将 base 访问路径设置一下

module.exports = {
  title: 'Z 空间',
  description: '原始社会的一个码农，自我复盘的老巢',
  base: '/blog-preview/'
}

不然有可能出现 404 的情况

自动打包上传

在根目录下面新建一个文件，deploy.sh 将仓库地址复制到下面文字处，这个脚本可以自动打包，并将打包完成的页面传到仓库中

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
git push -f 项目提交地址 master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

在 package.json 中加入脚本运行指令

"scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs",
    "deploy": "bash deploy.sh"
  }

so，运行一下指令

npm run deploy

这时我们去仓库可以看到

然后在 gitee pages 中更新一下

更新完成之后去我们的网站看看

第一期就到这里了，好玩的东西大家可以自己摸索下，下一期集成评论

vuepress 搭建博客 (一)