使用VuePress部署你的个人博客
# 介绍
VuePress是一个由Vue 驱动的静态网站生成器。
特点：
- 简洁：以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- Vue驱动：享受 Vue + webpack 的开发体验，可以在 Markdown 中使用 Vue 组件，又可以使用 Vue 来开发自定义主题。
- 高性能：VuePress 会为每个页面预渲染生成静态的 HTML，同时，每个页面被加载的时候，将作为 SPA 运行。
它的初衷是为了更优雅的编写技术文档，而不是博客。但在VuePress 1.x版本之后，你可以轻松使用三方主题完成个人博客的搭建，这也将是该文章接下来主要阐述的内容。
# 为什么是VuePress
在使用VuePress之前，我的博客一直是使用Hexo进行管理的。如果你现在正在使用Hexo进行博客创作，那么你完全不需要迁移到VuePress，因为Hexo已经足够简单、易用，并且拥有数量庞大的优秀主题。
那么我为什么还是花这么长时间进行博客的迁移呢？
始于颜值。从第一眼看到Vue的文档的时候，我便感受到了一丝惊艳。
再一个方面就是VuePress可以使用Vue编写组件进行高度的自定义，相信对于大部分熟悉Vue的开发者来说，都有着莫大的吸引力。事实上，VuePress 就是一个由 Vue 、Vue Router和 webpack驱动的单页应用。
# 快速入门
接下来将通过一个案例让你快速搭建一个博客环境。主题采用的是vuepress-theme-reco，主题简洁美观，同时兼容默认主题。
- 创建并进入一个新目录
mkdir reco && cd reco
- 使用你喜欢的包管理器进行初始化
yarn init # npm init
- 将 VuePress 安装为本地依赖（不推荐全局安装）
yarn add -D vuepress # npm install -D vuepress
- 创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/readme.md
- 在
package.json中添加一些 scripts
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
2
3
4
5
6
- 安装主题
vuepress-theme-reco
yarn add vuepress-theme-reco # npm install vuepress-theme-reco --save-dev
- 创建
.vuepress文件夹并创建config.js配置文件
mkdir docs/.vuepress && touch docs/.vuepress/config.js
- 编辑
config.js文件
module.exports = {
title: 'Title', //首页左上角title
theme: 'reco', // 应用博客主题
themeConfig: {
type: 'blog',
nav: [ // 首页导航栏
{ text: 'Home', link: '/', icon: 'reco-home' },
{ text: 'TimeLine', link: '/timeline/', icon: 'reco-date' }
],
author: 'xxx', // 首页作者
authorAvatar: 'https://vuepress.vuejs.org/hero.png', // 首页头像
subSidebar: 'auto', // 博客页面的目录
// 博客配置
blogConfig: {
category: {
location: 2, // 在导航栏菜单中所占的位置，默认2
text: 'Category' // 默认文案 “分类”
},
tag: {
location: 3, // 在导航栏菜单中所占的位置，默认3
text: 'Tag' // 默认文案 “标签”
},
socialLinks: [ // 信息栏展示社交信息
{ icon: 'reco-github', link: 'https://github.com/recoluan' },
{ icon: 'reco-npm', link: 'https://www.npmjs.com/~reco_luan' }
]
}
}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
- 编辑
docs/readme.md
---
home: true
heroText: VuePress
tagline: Vue 驱动的静态网站生成器
---
2
3
4
5
- 在
docs下创建posts目录用于存放博客源文件
mkdir docs/posts;
- 在
post目录下新建三个.md文件
---
title: post1
date: '2020-04-20 00:00:00'
categories:
- frontEnd
tags:
- vuepress
keys: # 加密
- 'e10adc3949ba59abbe56e057f20f883e' # 123456
sticky: 1 # 文章置顶
publish: true # 是否发布
---
# post1
2
3
4
5
6
7
8
9
10
11
12
13
14
以此类推新建出post2和post3。
- 检查目录结构
vuepress/
├── docs
│ ├── .vuepress
│ │ └── config.js
│ ├── readme.md
│ └── posts
│ ├── post1.md
│ ├── post2.md
│ └── post3.md
├── package.json
└── yarn.lock
2
3
4
5
6
7
8
9
10
11
- 在
reco目录下执行yarn docs:dev，打开localhost:8080 (opens new window)
如果出现乱码请检查编码是否为UTF-8
至此，博客的基础搭建便结束了。
至于其他的实现细节，限于篇幅这里就不一一赘述。有需要的可以直接参考VuePress官方文档 (opens new window)以及vuepress-theme-reco官方文档 (opens new window)
# 部署
部署的方式很多，而且还分为云服务器和静态网站托管。所以接下来将通过三个方案进行分析。
# 源码部署
最原始，最粗暴的方式就是通过yarn docs:build编译出静态资源文件，文件默认保存在docs/.vuepress/dist下，你可以通过git或者ftp等其他方式将其部署到Github Pages、Serverless或是静态资源服务器。
# get the dist folder
yarn docs:build
# sftp to tencent cloud & lcd the path of dist
put -r dist/ /var/www/html/
systemctl restart nginx
systemctl status nginx
2
3
4
5
6
# Github Action
Tips
需要简单了解Git、Github Action
如果你准备部署Github Pages，那么Github Action可能是较好的选择。
使用Github Action你可以
- 同时发布到Github Pages和Gitee Pages
- 备份你的博客源文件
主要采用了两个Action来实现以上功能
这里就不赘述Github Action的用法了。
# 一些建议
类似Github Pages的服务有很多，像Github Pages (opens new window)、Gitlab Pages (opens new window)、Gitee Pages (opens new window)、Cloudflare Pages (opens new window)，除此之外可供选择的还有Netlify (opens new window)，Vercel (opens new window)，或者选择国内一些Serverless服务来保证一个良好的响应速度。
简单分析
如果是国内不使用代理的情况下，选择Gitee Pages可以获得一个良好的体验，缺点是是Gitee Pages非Pro用户不支持自定义域名，每次提交得手动更新。
选择国内Serverless服务一是需要付费，再一个国内服务器自定义域名是需要备案的。
除了以上方案的话，其他方案基本都是国外服务器，在没有代理的情况下访问必然是十分慢的。
推荐Github Pages + Gitee Pages。
首先，部署源代码到Git仓库，通过Github Action自动备份源程序到Gitee同时发布静态资源到Github Pages和Gitee Pages。
将域名解析到Github Pages同时在navbar提供镜像选择。前提是你Github Pages能访问。意义不大。
或者直接检测浏览器语言或者基于ip选择是否跳转Gitee Pages
具体方案请自行参考。
# 最后
还是那句话，VuePress目前用作博客需要折腾，如果你已经在使用Hexo部署，那么完全没有必要切换，尤其是在你并不熟悉Vue的情况下。
写博客不是为了换UI，写博客只是为了写博客。