05-06-01.jpg
这个五一假期，似乎什么都没干。翻开个人的博客网站(www.jerrychane.com)和微信公众号 (叫我晋哥:hijinge)，最新的内容停止在了 3 月以前，而且从今年开始每月最多更新过 2 次内容。跟去年的日更 100 篇内容相比，这个缩减幅度和懒惰程度，觉得如此下去可不是办法，还是要大量的阅读，大量的写作，大量的练习，一定要做出属于个人的优秀项目。于是痛定思痛，亲自操刀对个人博客进行了 5 年来的第三次改版（早在 1 年前就有这个想法，迟迟未付诸实践）。接下来先从这次博客改变说起，主要分为以下四个方面：
一、Wordpress 迁移内容
由于从 2016 年开始改用 Wordpress(之前使用的帝国 CMS)，当时大量使用 PHP 进行开发。搭建 Wordpress 博客是非常顺手，几乎不需要懂编程就可以搭建。按照官方安装文档，一步接一步操作，就能完成前台页面到数据库、后台 CMS 系统的搭建，十分方便。
使用 Wordpress 不方便的地方是需要定期的更新 Wordpress 的版本以及后台使用的插件版本，因为需要访问外网，很多时候这些更新十分的繁琐；此外，由于涉及到数据库的增删改查，间断性会出现数据库错误或挂了的情况，此时需要去服务器端排查错误原因或者重启服务器，把许多时间花费在了非写作上。
这次博客改变面临的第一个问题就是之前写的 200 多篇文章，如何完整无缺的转移到新的博客中，毕竟涉及到不同的语言和技术栈。好在这次使用的 Hexo，使用了 ejs 模板语言，类似于 javascript 语言的语法，同时也提供了迁移 Wordpress 的插件 hexo-migrator-wordpress。
如果需要将 Wordpress 的文章迁移到 Hexo，首先安装该插件：
npm intall hexo-migrator-wordpress --save
在 Wordpress 仪表盘中导出所有的文章数据（“工具” -> “导出” -> “Wordpress”），可以导出所有的文章、评论、归档到一个 xxx.xml 的文件中。然后，执行下面的命令，即可将 xxx.xml 中的文章生成 source 目录下的 .md 格式的文件。
# hexo migrate wordpress ./wordpress.xml
hexo migrate wordpress <source>
这样就将 Wordpress 中原有的文章数据迁移到了 Hexo 的目录中。
二、选择自己喜欢的主题
接下来就是选择博客的主题，这和 Wordpress 几乎是一样的，将喜欢的主题放在 theme 目录下。同时在主配置文件 _config.yml 中修改 theme 字段的值为主题名称，我使用的主题是 ocean。这里要说明的是，Hexo 中涉及到两个配置文件，一个是最外层的主配置文件，一个是 theme 主题中的配置文件 _config.yml。涉及到站点文件的配置，配置主配置文件即可，主题配置文件主要用来配置主题相关的菜单、图标等内容。
Hexo 也提供了 300 多个官方的主题文件，可以选择自己喜欢的。下面是我当时筛选的一些主题，仅供参考。
Nexmoe : https://nexmoe.com
A-Chief-Lx: https://lx.js.org
Icarus : https://blog.zhangruipeng.me/hexo-theme-icarus
Geek : https://geek.lc/index.html
Type : https://itypen.app
A-Ayer : https://shen-yu.gitee.io
Random : http://hexo-theme-random.herokuapp.com
pure : https://blog.cofess.com
Chic : https://siricee.github.io/hexo-theme-Chic
zhaoo : https://www.izhaoo.com
Ocean : https://zhwangart.github.io
三、创建和发布博客文章
1.创建文章
在下载、安装完 Hexo 的脚手架工程后，在 source/_posts 目录下就是我们迁移过来的和将要创建书写的 markdown 源文件。同时，Hexo 也提供了官方的命令，用来创建文章。
hexo new [layout] <title>
# 我使用的命令
hexo new 我的第一篇文章
你可以在命令中指定文章的（layout），默认为 post，可以通过修改 _config.yml 中的 default_layout 参数来指定默认布局。对了，初始模板可以在 scaffolds/post.md 设置。
2.生成文章
创建完文件后，会在 source/_posts 目录下生成刚刚创建的文章，此时就可以进行文章的书写。书写完，执行 hexo genarator (可简写为 hexo g) ,将 .md 文件转换为 .html 格式的文件，文件所在目录为 public。也可以使用 package.json 中的 npm run build,不过我更推荐官方提供的缩减版命令，毕竟少敲不少字母呢。
hexo genarator || hexo g
3.压缩优化
此外涉及到代码压缩可以参考官方提供的插架，配置和使用方法类似 Wepack 中的插件，我使用的是 hexo-all-minifier，能够对 HTML、CSS、JS、图片(暂不支持.png,.svg,.gif 格式)进行压缩，。下面是 _config.yml 中具体的配置项：
all_minifier: true
html_minifier:
enable: true
ignore_error: false
silent: false
exclude:
css_minifier:
enable: true
silent: false
exclude:
- '*.min.css'
js_minifier:
enable: true
mangle: true
silent: false
output:
compress:
exclude:
- '*.min.js'
- '*.js'
- '*.ejs'
image_minifier:
enable: true
interlaced: false
multipass: false
optimizationLevel: 5
pngquant: false
progressive: false
silent: false
exclude:
- '*.png'
- '*.svg'
- '*.gif'
4.本地调试
hexo server || hexo s
四、阿里云虚拟主机部署
之前一直使用的阿里云的虚拟主机，域名也经过备案，使用的操作系统是 Centos 系统。
官方推荐的部署方式是使用 hexo deploy，需要安装 hexo-deployer-ftpsync，并在 _config.yml 中配置主机名、用户名、密码等等，结果配置完了，deploy 的时候发现，好像这个插件并不管用，找半天也没找到解决方法，所以还是建议手动部署，更快速更靠谱些。
不能自动部署，那么久手动部署，刚开始以为会特别麻烦，查了很多资料，大多数的思路是在服务器中安装 Hexo 所需要的所有环境即 Nodejs,Hexo-cli 以及 Nginx 服务器，十分的繁琐。
细想一下，如果是手动安装，public 目录下生成的都是静态的 html 文件，直接将生成的文件通过 FTP 传到服务器的根目录(/htdocs)下，不就完成手动部署了吗？在阿里云虚拟主机上部署 Hexo，就是这么简单，不需要任何其他环境，直接将静态文件传到服务器的根目录下即可。
总结:第一次尝试使用 Nodejs 搭建自己的个人博客，使用服务端渲染技术，使得整个网站的平均加载时间从之前的 10s，降低到现在的不到 5s。同时，也有机会体验代码压缩、Nodejs 服务端渲染、CDN、图片压缩、产出构建、调用第三方留言板等新技术的运用。很多事，还是要逼着自己去做的，就像这次博客改变，一直畏惧技术太难，以为要花很多时间才能完成，从去年十一拖延到现在。实际上从博客搭建、部署、上线到部分性能优化，也就是 2 天的时间。后面还是要抽时间去写点东西，有输入，也要有输出，才能进步和成长。
网友评论