相关站点
第1步 安装 Vuepress 框架
首先新建并进入博客文件夹test在终端中输入如下代码：
mkdir test
cd test
提示
命令中
test是所创建的网站文件夹名称，由用户自定义，以下网站名均由test代指。
yarn 安装
可使用 yarn 或者 npm 进行安装，但推荐使用 yarn 安装 ，因为 yarn 更稳定，出错几率更少，在终端内输入如下命令全局安装 Vuepress。
yarn global add vuepress
npm 安装
在终端内输入如下命令全局安装 Vuepress。
npm install -g vuepress
由于国内可能会有网络受限的问题，使用npm会出现安装极慢或者安装失败，可以用cnpm替代。使用如下命令安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm install -g vuepress
然后使用cnpm替换命令中的npm，例如使用cnpm install -g hexo-cli全局安装 vuepress。
注意
执行安装操作前 macOS 用户终端输入
sudo su命令并密码获取系统权限，Windows 用户以管理员身份运行CMD获取系统权限。
第2步 建立基本目录结构
克隆仓库
新手可以通过克隆框架仓库来快速建立目录结构，这样不容易出问题，下面是一个仅包含 Vuepress 基本结构的 GitHub 仓库。
https://github.com/leejiawang/vuepress-template.git
全新自建
你也可以自己创建全新的站点，参考官方给的目录结构创建相关文件夹和文件，下面是 Vuepress 文档 推荐的目录结构。
test
├── docs
│ ├── .vuepress (可选的)
│ │ ├── components (可选的)
│ │ ├── theme (可选的)
│ │ │ └── Layout.vue
│ │ ├── public (可选的)
│ │ ├── styles (可选的)
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates (可选的, 谨慎配置)
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js (可选的)
│ │ └── enhanceApp.js (可选的)
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
第3步 网站配置
网站配置文件 .vuepress/config.js，配置最基本的标题与页面描述。
module.exports = {
title: 'XXX',
description: 'XXXX'
}
第4步 添加页面
在 docs 文件夹内添加新页面，页面内容采用 Markdown 格式。
第5步 运行网站
在终端中输入如下命令生成网页。浏览器访问 localhost:3000 预览效果，关闭预览使用组合键 Ctrl+C 退出当前命令。
yarn run docs:dev
第6步 生成静态网页
在终端中输入如下命令生成静态网页。
yarn run docs:build
第7步 部署 Github Pages
执行此操作前请确保拥有Github账号，并创建一个以 XXX.github.io命名的空仓库，其中 XXX 为你的 Github 用户名，修改 docs/.vuepress/config.js 文件中 base配置信息。
base: '/',
如果你创建了其他名字的仓库，则 base 按如下格式填写，代码中XXX 为你的 Github 用户名，XXXX为仓库名。
base: https://XXX.github.io/XXXX/,
在 Vuepress 根目录创建 deploy.sh 文件，其内容如下，高亮区域只保留一条。
#!/usr/bin/env sh
# 确保脚本抛出遇到的错误
set -e
# 生成静态文件
npm run docs:build
# 进入生成的文件夹
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 如果发布到 https://XXX.github.io
git push -f [email protected]:XXX/XXX.github.io.git master
# 如果发布到 https://XXX.github.io/XXXX
git push -f [email protected]:XXX/XXXX.git master:gh-pages
cd -浏览器输入 http://XXX.github.io 实现远程访问。
提示
本文所使用的 Github Pages 并非部署网页的唯一途径，你也可以使用 Coding 和 Gitee 等。