github上hexo静态博客自动部署配置笔记

前言

越来越觉得时间不够用,千头万绪,容我喝口水。。

写blog的频率还赶不上wordpress的安全更新的推送频率,思考了一下还是决定把博客迁移到github上来,动机:

  1. wordpress的强大对于我等懒人实在是太折腾了。
  2. https+全静态,后续维护不想再折腾太多。
  3. 不怕忘了续费,哪怕百年之后也算留点痕迹。(但愿github在10年之内能继续服务下去,至少感觉比国内的服务靠谱一点,关站的几率较小)

方案

目前来说看了一眼 https://www.staticgen.com/

jekyll最火,ruby的,环境配置方面感觉有点担心 hugo其次, golang的,虽然最快,最强大,但从写博客的角度出发而言,用静态建站工具来搞,略有点繁杂,而且貌似教程不多。 hexo再次,node的,教程挺多,还有比较成熟的主题,就他了。

  • 建站工具: hexo + NexT 主题模板
  • github公共主页静态页面网站
  • bitbucket后端项目源码
  • codeship持续集成自动发布

预备

  1. git本地配置+ssh公钥配置
  2. github账号
  3. bitbucket账号
  4. codeship账号

安装

  • 安装hexo

1
npm install -g hexo-cli

  • 生成并初始化博客

1
hexo init myblog

  • 安装NexT主题 (下载最新版本的主题并mv到myblog/themes/next路径)

1
2
3
4
5
cd myblog
wget https://github.com/iissnan/hexo-theme-next/archive/v5.1.1.tar.gz
tar zxf v5.1.1.tar.gz
mv hexo-theme-next-5.1.1 themes/next
rm -rf v5.1.1.tar.gz

参考链接:

使用

基本页面

  • 关于 页面

1
hexo new page about

内容自己填写

  • tags 页面

1
hexo new page tags

内容:

1
2
3
4
5
6
---
title: tags
date: 2017-07-25 15:06:12
type: "tags"
comments: false
---

  • categories 页面

1
hexo new page categories

内容:

1
2
3
4
5
6
---
title: categories
date: 2017-07-25 16:21:02
type: "categories"
comments: false
---

新建文章

1
hexo new "hello world"

文章源文件存储在source/_posts/

不用的文章删掉文件重新发布即可。

本地测试

1
hexo s -g

访问 http://localhost:4000 预览效果。

清理

1
hexo clean

手工发布

1
hexo d -g

自动发布配置

  • 在bitbucket上新建私有项目(部分配置key需要保密)
  • 在codeship中导入此私有项目
  • 在codeship中查看deploy-keys发布公钥,并在github的对应静态站点中配置此发布公钥并允许write写入权限
  • 配置codeship基础setup初始化指令:

1
2
3
4
5
6
7
8
9
nvm install 6.11.1
npm install hexo-cli -g
npm install
# or, if you prefer to use yarn
#yarn install
git config --global user.email "yourname@example.com"
git config --global user.name "yourname"

注意记得指令中配置git的全局配置,不然部署流程可能失败

  • 删掉test的commands的pipeline 指令,不需要
  • 配置deploy部署指令的分支为master
  • 配置部署指令的脚本为custom scripts:

1
2
hexo clean
hexo d -g

注意:如果你使用了algolia的三方服务组件的情况下: 你的codeship配置中环境变量要加上HEXO_ALGOLIA_INDEXING_KEY的变量 并且在algolia 新建对应的索引用的apikey,设置流程参考:hexo-algolia

部署脚本的指令也要改为:

1
2
3
4
hexo clean
hexo g
hexo algolia
hexo d

  • 写点内容到你的博客中,并提交push到bitbucket的项目中去(source/_posts/中新建xxx.md的日志文件)

等着发布完成的通知

查看你的静态博客站点看效果吧。

当前这篇文章就是在bitbucket的在线创建文件编辑器(支持markdown)中编写的。

TODO

在线图床可以用imgur或者七牛的服务,如果写文字为主也可以本地存图,

完整的想好好的像medium、简书之类的服务在线码字贴图的话,

一种方案就是写个前后端编辑器处理上传文件服务和提交/获取bitbucket项目文件。 再牛一点就是纯h5方案前端集成图床的api接口+bitbucket的服务接口。

坚持原创技术分享,您的支持将鼓励我继续创作!