个人博客与简书同步：zhuzhaohua.com
简介
很久之前就想自己做一个博客，把自己的工作、生活记录下来，但做IT的，大家懂的，个人时间实在宝贵。开始时的想法是做一个前后端分离，基于vue和springboot的javaEE项目，也着手实施了，但囿于业余时间有限，进度比较缓慢（后续完工后可能会开源出来，敬请期待），而另外一个阻碍，就是服务部署公网需要考虑服务器的成本，毕竟家里没有矿。。。
本博客所采用的是一种既节省成本，又简单便捷的个人博客方式：
- GitHub Pages提供的静态页面托管服务（国内也可以考虑码云提供的Gitee Pages）
- VuePress静态网站生成器
VuePress是Vue作者尤大的一个作品，其实是用来写文档的，但有vue生态的加持，扩展能力非常强，也很适合搭建博客。VuePress有很多优秀的特性，其可以在md文件中引用vue组件的能力尤其让我痴迷。vuepress其原理与现代前端项目是一致的，基于node平台、webpack驱动的开发方式，打包后为静态页面，可以发布到任意静态服务器上。以下是官方的描述：
事实上，一个 VuePress 网站是一个由 Vue、Vue Router 和 webpack 驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt 的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby。
GitHub Pages 就不赘述了，行业内比较普及，网上资料也比较多。
下面开始搭建我们的博客吧!
VuePress安装
安装工具，给大家推荐下tyarn，是国内某宝的镜像源，如果yarn或者npm网速捉急，建议使用tyarn，强烈建议不要使用cnpm，问题太多。
VuePress官方文档有很详尽的安装教程，这里就大概搬运一下：
# node 要求 8以上
# 或者：npm install -g vuepress
yarn global add vuepress
# 创建vuepress的工程路径
mkdir myblog
cd myblog
# 工程初始化
yarn init -y # 或者 npm init -y
# 文档路径
mkdir docs
# .vuepress目录
cd docs
mkdir .vuepress
# config.js
cd .vuepress
touch config.js
# public目录
mkdir public
# 设置package.json的脚本配置
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
完成后的工作目录如下：
myblog
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ └── config.js
└── package.json
这是vuepress最基本目录结构，其中config.js是网站的基本配置信息，详细配置内容请见官方文档:配置
当然，我的博客已经开源myBlog，可以Fork或者克隆下来直接修改并使用。
默认主题修改
环境搭建好以后，无需过多的配置，运行npm run dev 就可以访问自己的博客了，做java后台出身的我，深感“约定大于配置”的魅力，如果我们单单是记录文档，默认的主题完全符合要求，简洁大方，但如果是做个人博客，一定是需要个性化的东西的，默认的主题无法满足我们个性化的需要。官方文档中，提供了修改默认主题的方式：
你可以使用 vuepress eject [targetDir] 这个命令来将默认主题的源码复制到 .vuepress/theme 文件夹下，从而可以对默认主题进行任意的修改。需要注意的是一旦 eject，即使升级 VuePress 你也无法再获得 VuePress 对默认主题的更新。
下载下来的theme文件夹要放在.vuepress/路径下,做过vue的人，或者有一些前端基础的人，打开这个文件夹，你就会看到vuepress的所有细节，你会看到Home、Layout、Navbar、Sidebar这样如此熟悉的字眼，你可以对样式做任意的修改。
我是做后台的 :joy:，说来惭愧，前端基本是自学了一年，技术薄弱，而且时间有限，所以没有对自己的博客样式做过多的改造。读者在开启theme后，可以尽情发挥。
集成UI组件
vuepress支持扩展，支持引入第三方组件，在.vuepress/下创建enhanceApp.js文件，这里展示的是引入vue生态圈比较知名的ui库Element,来自于饿了么。
/**
* 扩展 VuePress 应用
*/
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
export default ({
Vue,
}) => {
// ...做一些其他的应用级别的优化
Vue.use(Element)
}
当然，在这之前，需要先安装element。
yarn add element-ui
在扩展之后，就可以在自定义的组件或者md文件中，使用element的组件了。
个性化组件开发
前文提到，vuepress最吸引我的，就是在md中可以使用vue组件及语法，其实这背后的技术实现也不难理解。但仔细品味，为什么在看到它之前，我没有想过这个问题？为什么看似简单的东西，却给我一种耳目一新的感觉，这不禁又让我想起曾经与一位智者的对话，大概意思就是：
改变这个世界的是技术，但改变技术的，是思考问题的方式。
扯远了 :joy: 。如果我们需要开发自己的组件，那么在.vuepress下新建components文件夹，可以在里面编写.vue，与vue-cli开发无异，而且，组件是全局注册的，组件之间互相调用，不用手动引入，在md文件中，在theme中都可以使用。
博客的自动路由
官方给出的方案是一个文档管理的方案，比如我们做一套api文档，修改与添加文档不是会很频繁，所以，采用在config.js中配置路由的形式是很可取，很简单的。比如像这样：
// .vuepress/config.js
module.exports = {
themeConfig: {
sidebar: {
'/foo/': [
'', /* /foo/ */
'one', /* /foo/one.html */
'two' /* /foo/two.html */
],
'/bar/': [
'', /* /bar/ */
'three', /* /bar/three.html */
'four' /* /bar/four.html */
],
// fallback
'/': [
'', /* / */
'contact', /* /contact.html */
'about' /* /about.html */
]
}
}
}
但如果我们是用来写博客，一天写两三篇，每一篇对应一个md文件，都要在路由中添加一下，这实在会逼死强迫症，这也是我在选择vuepress时，遇到的最大的障碍。静态网站，可能真的没有更好的办法，动态路由这种事情，应该是后台实现的，然而我们是没有服务端的。大脑好像短路了，就在我决定放弃，准备老老实实手写路由的时候，突然想到，官方文档中提到了VueRouter，对啊，这是一个单页面应用，所谓路由，是vuerouter模拟出来的假象，$router 是否可以使用，是否能成为切入点呢？于是我又翻了一遍官方文档，找到了这个元数据：
如果用户在 .vuepress/config.js 配置了 themeConfig，你将可以通过 $site.themeConfig 访问到它。如此一来，你可以通过它来对用户开放一些自定义主题的配置 —— 比如指定目录或者页面的顺序，你也可以结合 $site.pages 来动态地构建导航链接。最后，别忘了，作为 Vue Router API 的一部分，this.$route 和 this.$router 同样可以使用。
没错,$pages就是我想要的东西,它记录了所有md文件的元数据，我可以通过在元数据中添加分类、标签，以及时间来实现路由。
每一次新写的文章，无需在config.js中设置路由，只需要在md中按照元数据的格式，设置好type(分类),tags(标签)。编译，push到github，就可以在相应的菜单中看到它。
但这会产生一个难以忽视的问题，需要大量的循环遍历pages以实现分类以及标签（可以参考我的组件：BlogList），甚至，我们需要对时间进行升序、降序的排列，这些原本应该是服务端在数据库里完成的事情，现在都需要浏览器去完成，着实会让人有一些担忧。我大概计算了一下，如果习惯非常好，时间充足，一天写一篇博客的话，一年360篇，30年是1万篇，当然，这过于理想化了，但如果这个项目有性能测试的话，那么这个值可以作为测试的上限，以现代的网络条件以及计算机能力来说，应该是可以应对的。显然，我是多虑了，但这里有明显的的“坏味道”，作者本人暂时还没有想到更好的解决办法，大神们有什么想法，可以与我联系。
md文件中的元数据可以参照以下，
---
title: 本博客搭建教程
date: '2019-06-01'
type: 技术
tags: js|vue
sidebarDepth: 3
sidebar: auto
note: 基于vuepress的个人博客，实现了博客自动路由、默认主题修改、elementUI库集成、mp3背景播放、标签墙、评论功能
---
对于元数据的使用，参见组件BlogList
标签墙的实现
标签墙的实现在上文中已经提到了，通过元数据的tags设置标签，在BlogList中，遍历$pages，匹配其中的tag。
页面可以参照组件Tags
评论功能集成
评论功能的集成，这里使用的是网上比较流行的valine组件：
yarn add leancloud-storage
yarn add valine
对于组件的封装可以参见Valine.vue,
new Valine({
el: '#vcomments' ,
appId: '',// your appId
appKey: '', // your appKey
notify:true,
verify:false,
avatar:'mm',
placeholder: 'just go go'
});
其中 appid 与appkey 需要在leancloud中注册获得。
详细的内容，原作者有详尽的说明：云淡风轻
GitHub Pages
在你的个人博客已经创建就绪之后，我们需要做的就是发布它，这需要以下几步：
- 本机安装git，有github账号，这一点不赘述。
- 创建一个 “用户名.github.io” 这样的仓库，
- 进入仓库 ，在settings中，找到 github pages的设置。
- github官方是给提供模板的，可以先选一个，在替换成我们的个人博客的时候，要把分支先pull下来，清除原有文件。
- 也可以直接在仓库根路径下方一个index.html,随便写点内容，以验证我们的页面是否可以访问
以上步骤网上资料非常多，不清楚可以百度。在一切准备就绪之后，可以试试浏览器直接访问自己的主页：用户名.github.io。
之后的事情，我们可以写一个自动发布的脚本：
# 构建
npm run build
# 导航到构建输出目录
cd docs/.vuepress/dist
git init
git add -A
git commit -m 'deploy'
# 推到你仓库的 master 分支
git push -f git@github.com:zhuzhaohua/zhuzhaohua.github.io.git master
build之后，默认会将静态打包文件放在.vuepress/dist下，我们只需把这个文件夹里的内容提交到仓库里即可。
每次写了新博客，都可以通过这个脚本发布。
绑定域名
现在，博客已经可以通过url： ***.github.io 访问了。
但是传说当中，高大上的码农都要有一个自己的域名，那么，就去买一个吧。我是在腾讯云买的.com顶级域名，第一年才20多块钱，是的，你没有看错，我们到现在为止，个人博客的搭建，只需要投入这20几块钱，如果你买cn域名，或者另类一些的，可能只需要几块钱。。。。。。
在购买域名的时候，需要上传个人信息的，住址、身份证信息等，相关部门以及机构需要登记审核。但审核期间完全可以正常使用，如果审核未通过，则会被停用。
在购买域名后，需要配置域名解析，这也就是花钱买域名的意义，通过dns,将买来的域名解析到github pages上。如何设置，网上资源很多，这里推荐一下：链接
结语
从开始研究到发布，用时两天，没有太多时间雕琢，比较简陋，仅当演示，希望大家见谅。
如此折腾，做了一个属于自己的博客，要说它有意义，其实也不会有几个人能看到，毕竟沧海一粟，如此平凡。
今天是2019年的6月1日，这个博客，就当是送给自己的礼物吧，儿童节快乐。
