大 纲

Vuepress 是一款 Vue 驱动的静态网站生成器,具有简洁至上、高性能、一键部署等特点,可方便快捷的建立自己的网站。

相关站点 Vuepress 官网 Vuepress 仓库 Vuepress 模板

第1步 安装 Vuepress 框架

首先新建并进入博客文件夹test在终端中输入如下代码,命令中test是所创建的网站文件夹名称,由用户自定义,以下网站名均由test代指。

mkdir test
cd test

yarn 安装

可使用 yarn 或者 npm 进行安装,但推荐使用 yarn 安装 ,因为 yarn 更稳定,出错几率更少,在终端内输入如下命令全局安装 Vuepress。

yarn global add vuepress

npm 安装

在终端内输入如下命令全局安装 Vuepress。

npm install -g vuepress

由于国内可能会有网络受限的问题,使用npm会出现安装极慢或者安装失败,可以用cnpm替代。使用如下命令安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后使用cnpm替换命令中的npm,例如使用下列代码全局安装 vuepress。

cnpm install -g hexo-cli

执行安装操作前 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 文件,其内容如下,高亮区域只保留一条。成功后可浏览器输入 http://XXX.github.io 实现远程访问。

除本文使用的 Github Pages 外,你还可以使用 Coding 和 Gitee 等。

#!/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 git@github.com:XXX/XXX.github.io.git master

# 如果发布到 https://XXX.github.io/XXXX
git push -f git@github.com:XXX/XXXX.git master:gh-pages

cd -