这个五一假期,似乎什么都没干。翻开个人的博客网站(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 install 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 天的时间。后面还是要抽时间去写点东西,有输入,也要有输出,才能进步和成长。