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 -