用Hexo、Github Pages和Appveyor搭建你的私人博客

发表于   |   更新于 | 分类于 |

0. 写在前面

查编程、算法相关资料时，经常看到很多挂载在精美的私人博客上的文章。博主过去的文章都是挂在简书上，虽然满足了撰文的基本需求，但订制属性不佳——作为一名不会按时吃药的coder，这当然是不能容忍的啦^-^
​
闲话少叙，本博客的第一篇文章会详细介绍搭建私人博客的三个组件和基本步骤：

Hexo: 博客框架，用于快速高效生成博客所需的前台代码

Github Pages: 免费的博客托管处（有访问量、总大小限制）

Appveyor:（可选） 在线持续集成工具，从此你只需做写文、git上传两件事

1. Hexo

1.1 Hexo是什么

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章，在几秒内，即可利用靓丽的主题生成静态网页。——Hexo官方文档

简单来说，Hexo就是帮助我们完成前台HTML生成的工具，让我们只需要专注于Markdown文档的编写。

1.2 安装Hexo

安装前需要保证系统预装Nodejs和Git，之后可进行Hexo安装，以linux下的安装为例：

1
npm install -g hexo-cli

这里有两点需要留意：

  1. npm的默认repo有可能不好用，如果下载过程缓慢或无法启动下载，请更换为taobao的repo：
1
npm config set registry https://registry.npm.taobao.org
  1. 如果你处于公司等需要代理连接的内部网络，记得给npm配置proxy：
1
npm config set proxy http://your.proxy.server:port

1.3 Hexo的Hello World

让我们以一个Hello World工程作为Hexo之旅的第一站，在本地环境使用Hexo生成博客内容并查看总共分三步：初始化Hexo工作目录，写文章/生成内容，启动博客后台：

1.3.1 初始化

1
2
mkdir hexo_blog
hexo init hexo_blog

这一步会在指定的文件夹hexo_blog下下载建站所需的文件，下载过程需要花费一段时间，要耐心等待。

1.3.2 写文章/生成内容

1
2
cd hexo_blog
hexo new post hello-world

这一步会在source/_posts/下生成一个名为hello-world.md的文件，你可以在里面编辑任意内容，完成后生成前台所有代码：

1
hexo generate # 或 hexo g

generate命令会生成博客前台所需的一切（HTML, CSS, JS等等）

1.3.3 启动本地server

1
hexo server # 或 hexo s

此步骤默认会完成建站并在本地4000端口启动server，打开浏览器输入localhost:4000，你就能看到自己的博客啦

2. Github Pages

简单说，Github Pages是Github为用户提供的用于托管个人静态网站的服务，免去了我们自己买VPS搭环境的麻烦，只需要免费注册的github账号并新建一个特定名称的项目，我们就可以获得这样一个服务了：

登陆你的github首页，选择New Repositories，项目名”username.github.io”，用你的github用户名替换username

工程创建成功，你的Github Pages服务也就有了，下一步就是在你的hexo工作路径与Github Pages之间建立关联，回到小节1的hexo_blog目录下，编辑全局配置文件_config.yml，将deploy相关内容修改成如下模样：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

仍要记得以你的用户名替换username，接下来就是deploy过程了，这一步会将你的博客内容上传到Github Pages服务上，不过在此之前，你需要装一个hexo部署到github上的插件：

1
npm install hexo-deployer-git --save

准备好，博客要起飞啦

1
hexo deploy

如无意外，现在输入username.github.io，你的个人博客和你首次见面了！

这以后，你的工作流就是：

1
2
3
4
# edit your markdown file(s)...
hexo clean
hexo generate
hexo deploy

3. Appveyor

折腾几轮，新增了几篇博客，是不是新鲜感满满？相信我，这和开手动挡汽车一样，对于重复工作的厌烦总有一天会来到。另外，这种本地生成、上传内容的工作方式还有个问题，当你更换工作环境时，需要提前拷贝hexo目录——Github工程的master分支，和你的工作环境并不一样哦。

为解决上述两个问题，我们引入Appveyor（Travis也一样）作为持续集成工具。持续集成，简单说就是个web服务，它会一直监听某种触发信号，当监听到信号时，服务会按照提前设定好的逻辑执行一系列动作。在当前场景中，持续集成用于监听hexo源码的修改（可以把hexo工作路径作为新的github工程，以该工程的更新作为信号），并执行生成、部署活动。

首先，你需要把小节1的工作路径，即hexo_blog上传到新的git repo上，为了便于管理，我没有新建git工程，而是在username.github.io工程上新建了分支：

1
2
3
4
5
6
7
8
9
cd hexo_blog
git init
git remote add origin git@github.com:user/user.github.io.git
# 替换user为你的用户名
git branch hexo # 新增分支
git checkout hexo
git add ... # 不必要的目录可以不加，例如node_modules可以在CI环境中生成，建议写个.gitignore
git commit -m 'xxx'
git push origin hexo

git repo的根目录下要添加appveyor的hook文件appveyor.yml，为的是在appveyor和此目录建立关联：

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
27
28
29
30
31
32
33
34
35
36
37
38
clone_depth: 5

branches:
  only:
  - hexo

environment:
  access_token:
    secure: [your token here]

install:
  - ps: Install-Product node 6.0
  - node --version
  - npm --version
  - npm config set registry https://registry.npm.taobao.org
  - npm install
  - npm install hexo-cli -g

build_script:
  - hexo generate

artifacts:
  - path: public

on_success:
  - git config --global credential.helper store
  - ps: Add-Content "$env:USERPROFILE\.git-credentials" "https://$($env:access_token):x-oauth-basic@github.com`n"
  - git config --global user.email "%GIT_USER_EMAIL%"
  - git config --global user.name "%GIT_USER_NAME%"
  - git clone --depth 5 -q --branch=%TARGET_BRANCH% %STATIC_SITE_REPO% %TEMP%\static-site
  - cd %TEMP%\static-site
  - del * /f /q
  - for /d %%p IN (*) do rmdir "%%p" /s /q
  - SETLOCAL EnableDelayedExpansion & robocopy "%APPVEYOR_BUILD_FOLDER%\public" "%TEMP%\static-site" /e & IF !ERRORLEVEL! EQU 1 (exit 0) ELSE (IF !ERRORLEVEL! EQU 3 (exit 0) ELSE (exit 1))
  - git add -A
  - git commit -m "Update Static Site"
  - git push origin %TARGET_BRANCH%
  - appveyor AddMessage "Static Site Updated"

配置文件中唯一需要修改的就是[your token here]，这个加密token的作用就是让appveyor作为被信任用户向你的博客master分支提交内容。为了获取此token，你需要在github上生成一个token，但这个token会暴露在你的hexo分支上，你肯定不愿意谁都能用这个token往你的博客提交内容——登陆Appveyor官网，注册账号，用账号内的工具加密此token得到加密token填入appveyor.yml即可。

之后你还需要新建CI工程，定义监听哪里、执行什么操作blablabla……内容太多了，去看这里吧。

大功告成！改改博客的配置或是增删改你的博客，push到source repo上，等上几分钟就ok了～

土豪通道