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 -
