blog从wordpress迁移至hexo+next,并通过travis自动部署到ftp及github

因 wordpress 后台臃肿反应慢,外加上本人作为前端代码狗,基于 nodejs 的 hexo 对我非常友好。所以花了 2 天时间终于把 blog 从 wordpress 迁移至 hexo, 通过直接在 md 里面来写博客,简直爽到飞起。特此记录一下我在迁移搭建中做了哪些操作,以便后面遗忘。


博客效果:


准备工作

  1. 安装 node.js
  2. 安装 git
  3. 全局安装 Hexo-cli(生成 hexo 项目用)
1
npm install -g hexo-cli

生成静态网站

打开目标文件夹,执行命令:

1
2
3
hexo init hexo-demo
cd hexo-demo
yarn //也可以用npm i,个人喜好

通过命令 hexo s可本地预览

通过命令 hexo g可本地生成建站资源 public 包,用来部署

相关文件夹的作用及配置点此查阅, 命令点此查阅

从 wordpress 迁移

hexo-demo 里安装:

1
yarn add hexo-migrator-wordpress -D

同时在WordPress仪表盘中导出数据(“Tools” → “Export” → “WordPress”)

安装好后执行:

1
hexo migrate wordpress <source> #source为 WordPress 导出的文件路径或网址

转换后再自己检查修改下就可以了,因为这个转换插件我只需要用一次,然后我就把hexo-migrator-wordpress删掉了。

hexo 优化

项目有两个_config.yml 文件,分别是项目_config.yml主题_config.yml

项目增强

1
2
yarn add hexo-helper-live2d -D
yarn add live2d-widget-model-koharu -D

项目config添加配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
live2d:
enable: true
scriptFrom: jsdelivr # 默认
pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径)
pluginJsPath: lib/ # 脚本文件相对与插件根目录路径
pluginModelPath: assets/ # 模型文件相对与插件根目录路径
tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
debug: false # 调试, 是否在控制台输出日志
model:
use: live2d-widget-model-koharu # npm-module package name
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
width: 125
height: 150
position: left
hOffset: 30
vOffset: -5
mobile:
show: false
scale: 0.05
react:
opacityDefault: 1
opacityOnHover: 0.2
1
yarn add hexo-generator-search -D

项目config 设置:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

主题config 设置:

1
2
local_search:
enable: true
1
yarn add hexo-filter-optimize -D

配置见作者说明。

  • 注意插件与 next font-awesome 本地库有冲突,需要把主题config里的fontawesome替换为线上 CDN。详见
  • 在本地 sever 的时候很慢,建议只在发布部署的时候使用。(用sed -i在 travis 构建里开启)

主题相关

采用了 star 最多的 hexo,官方文档查阅。设置方式:修改项目config里的 themenext即可。

主题优化(以下配置均在主题config
  • 生成缓存: cache.enable:true
  • 修改网站 favicon: favicon
  • 页脚修改: footer
  • 右上角 github banner 生成: github_banner
  • 设置导航: menu
  • 选择主题 Pisces:scheme: Pisces
  • 设置概览信息:social social_icons
  • 设置头像相关:avatar
  • 代码风格:highlight_theme
  • 设置百度统计:baidu_analytics
  • 设置显示加载更多:scroll_to_more
  • 保存滚动位置:save_scroll
  • 添加打赏:reward_settings reward
  • 拷贝滑动进度条并设置:reading_progress
  • 拷贝加载进度条并设置:pace pace_theme
  • 拷贝页面 3D 背景并设置canvas_nest
  • 拷贝fancyBox并设置fancybox
  • 拷贝字数统计插件并设置(需同时设置两个_onfig,并在项目 yarn add 该插件):symbols_count_time

SEO 优化

  • 百度站长平台:https://ziyuan.baidu.com/

  • 谷歌站长平台:https://search.google.com/search-console/

  • 通过在搜索引擎输入:site: blog.flqin.com测试是否被收录

  • 未被收录的话,在站长平台添加。

  • 提交链接:包括主动推送自动推送sitemap,效率:主动推送>自动推送>sitemap,可同时配合使用:

    1
    yarn add hexo-generator-sitemap hexo-generator-baidu-sitemap hexo-baidu-url-submit -D

    并设置项目config:url,permalink,sitemap,baidusitemap,baidu_url_submit,deploy

travis-ci 持续部署到 ftp 和 gitlab.io

添加部署相关插件:

1
2
yarn add hexo-deployer-git -D
yarn add hexo-deployer-ftpsync -D

部署之前,先生成要部署的静态文件

1
2
hexo clean
hexo g

部署的项目config配置(详细配置查阅)

1
2
3
4
5
6
7
8
- type: git
repo: git@github.com:zhaoky/zhaoky.github.io.git
branch: master
- type: ftpsync
host: ftpHost
user: ftpUser
pass: ftpPass
remote: ftpRemote

部署命令

1
hexo d

ftp 部署相关设置

为了 ftp 的账号密码的安全性,所以在 config 中的配置用 travis 加密变量表示(如ftpsync,ftpHost,ftpPass,ftpRemote),然后在 travis 里的该项目配置该加密变量。这样在 travis 运行构建的时候就可以应用替换回真实的账号密码。

但我实际操作的时候一直报Error: read ETIMEDOUT at TCP.onStreamRead (internal/stream_base_commons.js:111:27)的错误,查了下源码可能是jsftp包报的错,已经向hexohexo-deployer-ftpsync提 issue,如果有解决方案请告知我,多谢指教!

git 部署相关设置

github 部署采用 ssh 的通讯加密方式,首先在 github 上建一个命名为 zhaoky.github.io(zhaoky 替换成 github 名)的仓库,然后本地本地生成一对公私钥(运行ssh-keygen -t rsa -C youremail@example.com生成),将.pub 公钥配置在 zhaoky.github.io 仓库的 deploy key,把私钥和 ssh-config 发到 travis 的构建服务器里。私钥为了保证安全性,本地通过 travis 命令加密,然后在 travis 构建时再解密,这样就能自动发布了。

本地 travis 命令如何加密

1
2
3
gem install travis
travis login --com #如果仍在使用travis-ci.org,则需要使用--org
travis encrypt-file id_rsa --add --pro #使用--add自动添加到travis.yml,--pro将生成的加密环境变量添加到travis项目后台管理中

这样就生成了一个加密后的.enc 的文件了

ssh/config 怎么配置

1
2
3
4
5
Host github.com
User git
StrictHostKeyChecking no
IdentityFile ~/.ssh/id_rsa
IdentitiesOnly yes

我的做法是在项目里建了一个.travis 的文件夹,将加密后的.enc 文件和 ssh-config 放进去,在 travis 构建的时候发到构建的机器上。

我的.travis.yml 的配置

直接看配置就明白了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
language: node_js
node_js:
- '10'
cache:
directories:
- node_modules
branches:
only:
- master
before_install:
- openssl aes-256-cbc -K $encrypted_43f9974e8d06_key -iv $encrypted_43f9974e8d06_iv
-in .travis/id_rsa.enc -out ~/.ssh/id_rsa -d
- chmod 600 ~/.ssh/id_rsa
- cp .travis/ssh_config ~/.ssh/config
- git config --global user.name 'korey'
- git config --global user.email 'keyu.zhao@foxmail.com'
- yarn add hexo-cli -g
install:
- yarn
script:
- bash sed.sh
- yarn run deploy #hexo clean && hexo g -d
---- 本文结束,感谢您的阅读 ----