全新出发,正式启用Hexo!

郑重声明:原网站http://www.chinatesters.com已正式停止更新,内容已全部转移至这里,未来所有的更新也都在这里。新的站点,新的开始,新的旅程!~


缘起

最早看到有人推荐Hexo已经是很久以前甚至不太记得是什么时候的事了,印象中那会儿才弄懂什么静态网站、动态网站之类的词语,只听说Hexo是个基于node.js开发的静态博客框架。当时有点感兴趣,但因为没有时间又担心技术不足就没有再去做过多了解。

今年5月,公司内部测试尝试量子加速的加速效果时,其产品经理告诉我量子加速对静态资源的加速效果是尤其明显的,可以搭建个静态博客比如Hexo什么的和Wordpress对比试试看。至此,我开启了Hexo折腾模式,但因为没接触过git又不了解node.js,等我搭建好时已经浪费了很多时间。而我依然很忙,加之又想换域名又想导入原博客的内容还想找个看得顺眼的主题,觉得折腾起来实在有些麻烦就先搁着,等什么时候有空了在做。

直到有一天……

卧槽!CloudXNS监控提醒我网站宕掉了……
-“运维兄弟,我的虚拟机咋了?ip是xxx.xxx.xxx.xxx”
-“我问了没人回应我就下架了呢,这个是你的啊?”
-“对呀对呀,我不在你们群里,可以恢复么?我都没备份……”
-“……”

最后,公司运维小哥费了很大劲周末加班给我恢复了数据。为了避免未来数据备份的麻烦,我决定开始正式整理好Hexo并启用Github page服务了。

环境准备(折腾前必须掌握的)

有一些知识和条件是需要准备的,我这里简单说下,具体可依赖搜索引擎在不会的时候轻松完成。其实我能说是快忘掉了好吗?

开通Github Page服务

在自己的github主页中创建一个名为用户名.github.io的 Repository 即可。

本地安装Git并了解一些常用git命令

Git官网下载Git并安装,windows安装过程中记得勾选 git bash,这个是执行git命令的入口。

安装好后,启动 git bash 通过执行命令ssh-keygen -t rsa -C "github账号邮箱"生成ssh密钥用来关联github账号。

到系统用户文档页(Linux系统请去~/.ssh目录找)找到id_rsa文件,打开将内容复制,登陆github账号设置中添加SSH Key并复制进去。

安装node.js

Hexo就是基于node.js的,所以这个必须得安装了,安装了它才能执行后面的npm命令。
可以自行到Node.js官网下载自己需要的版本,Windows建议下载最多用户使用的稳定版,我试过最新版好像有点问题。

安装Hexo

Git和node.js安装好后,在本地创建一个文件夹例如E:\Hexo
进入该文件夹,打开git bash,执行命令npm install -g hexo-cli 即可将Hexo安装到该目录。

Linux安装过程请直接参考Hexo官方操作文档,照给出的命令执行就好了。当然,如果要放到 github page 上同样需要生成 ssh key 与github账号关联并创建一个github主页。

然后用如下命令启动博客:

1
2
3
$ hexo init
$ npm install
$ hexo server

启动后就可以在本机通过http://loaclhost:4000查看效果了。

折腾模式开启

本次折腾,主要做了以下事情:

  1. 主题安装,选用了yilia主题,但又根据yelee主题代码做了微量调整;
  2. 导入原来Wordpress博客中的文章、页面和评论;
  3. github、coding、云主机多点部署并对新购买的域名做分区解析;
  4. 生成RSS订阅、站点地图并将链接主动提交到百度站长平台等利于搜索引擎的优化工作。

主题安装

执行命令git clone https://github.com/litten/hexo-theme-yilia.git themes/yiliagit clone https://github.com/MOxFIVE/hexo-theme-yelee.git下载上述两个主题,然后复制yilia创建名为ephen的主题副本,修改Hexo博客根目录(我的是E:\Hexo)的_config.xml文件将theme修改为ephen。

修改完工后删掉下载的两个主题目录。诶诶,怎么有种卸磨杀驴的感觉?

本主题的主要修改点:

  1. 增加Telegram图标,和Telegram配置;
  2. 增加显示和隐藏文章目录的支持;
  3. 原来的评论框代码不够整齐好看,把yelee的评论框移植了过来;
  4. 增加文章搜索的支持(需要安装插件:npm install hexo-generator-search --save,并添加插件设置);
  5. 增加文章左右边栏按钮;
  6. 其他看起来不太整齐的小部分代码;

另外,我还想收藏下这个:http://www.tuicool.com/articles/fYZ7Zrj 什么时候有空了再改。

如果有人喜欢我改后的主题,可以在下面留言

导入WordPress的页面/文章和评论

导入文章和页面需要安装这个插件:npm install hexo-migrator-wordpress --save

登陆Wordpress管理控制台,导出WXR文件,如下图所示:

导出wp文件

将导出的文件保存为wordpress.xml,执行命令hexo migrate wordpress wordpress.xml即可完成文章导入。

注意:

  1. 如果新站和老站的域名和链接不同,导入之前需要先修改xml文件中类似<link><...url>之类的Label内容,以保持和预期站点一致
  2. 导入文件如果是中文标题,可能会出现文件乱码,只能手工去修改了。完成导入后插件的光荣任务结束,处女座星人可以选择卸载它了:npm remove hexo-migrator-wordpress
  3. 这个操作并不会导入评论,导入评论请继续往下看

由于Hexo的评论都是使用的社会化评论框,所以评论需要往社会化评论框(我用的是Disqus)中导入才能显示。这类工具一般都是支持转移的,向Disqus导入评论的操作如下:

  1. 登陆WP控制台,导出时选择“文章”,导出文件命名为comments.xml,注意检查下文件中每篇文章的URL是不是和预期的URL一致(不一致会导致评论无法显示!)
  2. 登陆Disqus后台,进入这个页面:https://用户名.disqus.com/admin/discussions/import/platform/wordpress/
  3. 选择刚才编辑好的文件导入

这样,就完成了文章和评论的迁移了。

不过有点小遗憾,评论者头像都丢失,变更为默认头像了。

多点部署和分区解析

博客发布到github page和coding page需要安装这个插件:npm install hexo-deployer-git --save

然后到博客根目录找到_config.yml文件打开,将以下代码添加到最后:

1
2
3
4
5
6
7
8
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: https://github.com/用户名/用户名.github.io.git
coding: https://git.coding.net/用户名/用户名.git
branch: master

设置好后,只需要在Hexo根目录执行hexo g后再执行hexo d便可完成页面的部署。

和Github上一样,Coding上也要预先安装 SSH Key 并开通 Page 服务。SSH Key 不需要重新生成,将之前在github上用的内容复制过去即可;开通Page服务时注意将部署分支修改成master(默认分支是Coding-page)。

然后去Github和Coding相应Page项目设置中绑定自己的域名,如图所示:

Github绑定域名

Coding绑定域名

如果希望在自己的云主机中也部署一份,那么可登陆主机生成 SSH Key,将Key添加到Github或者Coding中(我添加到了Github),到网站文件根目录关联项目链接后执行git pull origin master即可完成站点部署。

最后,登陆CloudXNS域名解析,我的解析设置如下图:

CloudXNS域名解析

RSS、站点地图及搜索引擎优化

这里不用多说,就是几个插件的安装和设置了。它们分别是:hexo-generator-feedhexo-generator-sitemaphexo-generator-baidu-sitemap。(两个sitemap一个是谷歌格式,一个是百度格式)

RSS不需要做其他的操作,插件安装好后每次hexo g就会生成对应的RSS文件,需要时引用这个文件路径即可(比如主题设置中)。

针对Sitemap,需要到博客根目录去修改_config.yml文件,在plugins:下添加以下内容:

1
2
3
4
5
#sitemap
sitemap:
path: sitemap.xml
baidusitemap:
path: baidusitemap.xml

分别登陆谷歌站长平台和百度站长平台添加自己的新域名和站点地图。

按照百度站长平台的指引添加站点地图的位置:

百度站点地图

也可以到自己的云主机平台上执行命令手动提交,这种提交方式百度响应是最快的了。

因此我在我的云主机上写了个脚本,用于每次同步网站内容后将新链接提交到百度:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#!/bin/sh

DIR='/var/www/html'
SITE='http://ephen.me/'

cd ${DIR}/
git pull origin master > ${DIR}/.gitpull.log
cd ..
cat /dev/null > ${DIR}/freshurls.txt
grep '/index.html' .gitpull.log | grep -v '\"' | awk '{print $1}' |while read line
do
echo "${SITE}${line}" >> ${DIR}/freshurls.txt
done

curl -H 'Content-Type:text/plain' --data-binary @freshurls.txt "http://data.zz.baidu.com/urls?site=ephen.me&token=xxxxxxxxxx"

exit

如果有人也想使用此脚本,替换自己的目录、站点链接以及百度站长TokenID即可。

注意:该脚本不支持URL链接为中文的情况!!

结束语

这次折腾花了不小的精力,毕竟是自己的事情,所以为不占用工作时间多次加班到很晚才走。

本来不想记录的,担心下次出什么状况又要花大力气折腾,所以趁热记录下,同时也希望我的折腾过程能帮助到其他的新手。

文章目录
  1. 1. 缘起
  2. 2. 环境准备(折腾前必须掌握的)
    1. 2.1. 开通Github Page服务
    2. 2.2. 本地安装Git并了解一些常用git命令
    3. 2.3. 安装node.js
    4. 2.4. 安装Hexo
  3. 3. 折腾模式开启
    1. 3.1. 主题安装
    2. 3.2. 导入WordPress的页面/文章和评论
    3. 3.3. 多点部署和分区解析
    4. 3.4. RSS、站点地图及搜索引擎优化
  4. 4. 结束语