blog从wordpress迁移至hexo+next,并通过travis自动部署到ftp及github
因 wordpress 后台臃肿反应慢,外加上本人作为前端代码狗,基于 nodejs 的 hexo 对我非常友好。所以花了 2 天时间终于把 blog 从 wordpress 迁移至 hexo, 通过直接在 md 里面来写博客,简直爽到飞起。特此记录一下我在迁移搭建中做了哪些操作,以便后面遗忘。
博客效果:
- blog
- github.io
准备工作
- 安装 node.js
- 安装 git
- 全局安装 Hexo-cli(生成 hexo 项目用)
1 | npm install -g hexo-cli |
生成静态网站
打开目标文件夹,执行命令:
1 | hexo init hexo-demo |
通过命令 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
。
项目增强
- 添加页面 2d 萌宠插件
1 | yarn add hexo-helper-live2d -D |
项目config
添加配置:
1 | live2d: |
- 添加搜索功能
1 | yarn add hexo-generator-search -D |
项目config
设置:
1 | search: |
主题config
设置:
1 | local_search: |
- 页面加载优化
1 | yarn add hexo-filter-optimize -D |
配置见作者说明。
- 注意插件与 next font-awesome 本地库有冲突,需要把
主题config
里的fontawesome
替换为线上 CDN。详见 - 在本地 sever 的时候很慢,建议只在发布部署的时候使用。(用
sed -i
在 travis 构建里开启)
主题相关
采用了 star 最多的 hexo,官方文档查阅。设置方式:修改项目config
里的 theme
为 next
即可。
主题优化(以下配置均在主题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 | yarn add hexo-deployer-git -D |
部署之前,先生成要部署的静态文件
1 | hexo clean |
部署的项目config
配置(详细配置查阅)
1 | - type: git |
部署命令
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
包报的错,已经向hexo和hexo-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 | gem install travis |
这样就生成了一个加密后的.enc 的文件了
ssh/config 怎么配置
1 | Host github.com |
我的做法是在项目里建了一个.travis 的文件夹,将加密后的.enc 文件和 ssh-config 放进去,在 travis 构建的时候发到构建的机器上。
我的.travis.yml 的配置
直接看配置就明白了。
1 | language: node_js |