使用Hexo重新构建个人博客站点

其实在Github Page上面也是混迹许久啦,虽然现在各种Blog网站层出不穷,但是作为IT界的程序猿还是喜欢自己动手捣鼓捣鼓,成功固然是欣喜失败也会不气妥。 Github Page刚出道时使用的是Jekyll,简单的解释其实就是一个静态化网站的工具,这不现在又兴起一个名为Hexo(**Nodejs**实现)的工具。两者的目标皆是一致的,只不过对比下来发现Hexo上手确实要容易些,加者它能轻松的在本地实现调试,故有想法想再次折腾一翻,构建个Hexo版本的个人博客。

介绍另一款静态网站工具 Gor ,它是鄙人一直崇拜的大拿 Wendal 的杰作,熟悉GO语言的朋友有可以关注下。

动手前先对Pages服务做了个简单的调查,别无它意,就是现在Github用户越来越多且服务器又在国外的,生活在天朝的我们你懂的啦。惊喜的发现目前国内的Git服务商都提供了Pages实现,最后选择了 Gitee Coding 作为新博客落脚点,其中Coding作为首先/默认服务,Gitee为备选的服务,作此选择的原因很简单:Coding不但提供了自定义域名,而且还附带了https免费证书,真是漂亮。

对于Hexo环境的搭建在此就不在累述啦,官方文档给出了详细的说明(操作也是相当的简单)请移步: https://hexo.io/zh-cn/docs/index.html 。搭建好后可以在官方网站提供的 主题 页面中选择自己所喜爱的风格,个人选择的是较热门的 NexT ,喜欢它的简单,轻爽。

NexT配置使用也是很简易的,下面就个人在搭建过程中遇到的问题做个简单的归纳:

  • 1.插件的的安装

Hexo相当的灵活提供丰富的插件支持,根据个人的需要可自行安装,个人的安装记录如下:

1
2
3
4
5
6
7
8
9
# 生成RSS
npm install hexo-generator-feed --save
# 生成Site map为爬虫服务准备
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
# 压缩站点文件
npm install hexo-all-minifier --save
# 发布至Git服务器
npm install hexo-deployer-git --save
  • 2.第三方服务集成

作为博客网站肯定是少不了互动的环节,现在的互联网世界早就已提供了此功能,在此主要用到的功能有:文章阅读,文章数字统计,站点PV/UV,评论回复。其它的功能集成应该都没难度,只要在对应的服务商站点注册好,填写对应的ID,KEY即可。主要提及下文章数字统计的功能:

登录 LeanCloud 找到你的应用,点击其右上角的设置按钮,如下图所示: learnclound-1.png

接着点击左侧菜单中的存储,然后在中间的列表中点击创建Class,输入名称点击创建即可,如下图所示: learnclound-2.png

此时先别设置安全域名,直接在本地启动Hexo服务,不停的刷新页面,便可以看到你想结果啦,就是这么的简单。

搭建过程中发现NexTjiathis代码模板已过且没有uid的概念,另外统计代码的存放位置也是有问题的,fork后提交的pull请求,如有兴趣可以关注下: pull-1796

  • 3.同时发布到多个Git服务器

因为选择了GiteeCoding为博客的运行服务器,所以在发布时需要同时推送,参考如下:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository:
    coding: git@git.coding.net:lisenhui/lisenhui.git,master
    oschina: git@git.oschina.net:lisenhui/lisenhui.git,master
  • 4.自定义域名绑定

除了在Git Pages服务商那里绑定自定义的域名外,我们还需要在站点中添加个名为CNAME的文件,内容为你想指向的域名。在此建议使用 DNSPod 做域名的解析,可精细指定不来源访问不同的服务(是不是有点分发的味道),具体的操作可以参考官方/网上教程。

到此个人的博客站点便是搭建完成,效果演示如本站, 若是懒的配置,直接clone鄙人的博客项目即可(记得要把名字改掉呀,哈), 如下:

1
git clone https://git.oschina.net/lisenhui/my-hexo-blog.git

欢迎各位拍砖和鲜花

实际上Hexo博客的搭建只需要如下几步:

  1. npm install -g hexo-cli
  2. mkdir hexo-blog
  3. hexo init hexo-blog
  4. cd hexo-blog
  5. git clone https://github.com/iissnan/hexo-theme-next themes/next
  6. vi _config.yml (change theme: next)
  7. hexo g && hexo s (打开浏览器输入: http://127.0.0.1:4000)

参考文章:

  1. Hexo常用命令
  2. leanCloud,实现文章阅读量统计
  3. Hexo+Next主题博客提交百度谷歌收录
  4. 使用Hexo + Next搭建静态博客