写在前面

静态博客最近越来越流行，但是写作、部署一直是个大问题。本文主要讲解如何使用语雀进行文章写作，使用 Coding CI 进行自动化部署的过程。支持多种部署方式（COS/OSS、自有服务器、Coding Pages 等）。

2019.01.08 更新：语雀开放了 WebHook，我这里提供两种方法让语雀这边改完可以马上自动同步到博客服务器。跳转到新内容

2020.06.21 更新：优化文章结构，附全套 CI 流程

静态博客空间选择

  1. Github Pages： 方便，不太稳定，Git 部署

  2. Coding.net Pages： 速度尚可，Git 部署，稳定性也不太好

  3. 腾讯云 COS + 腾讯云 CDN：需要备案，速度极快，稳定性好，COS 插件部署

  4. 自有服务器，可选择自建 Nginx 或者使用虚拟主机，可以复用旧的环境。本站现在使用该方法。

创建 Hexo 博客

已经有 Hexo 博客的可以跳过。

  • 安装 Node.js
  • 安装 Hexo 脚手架
1
npm install -g hexo-cli
  • 初始化一个博客
1
2
3
hexo init <folder>
cd <folder>
npm install

安装语雀文章下载插件

yuque-hexo 是一个 Node.js 环境下的语雀下载器，使用 npm 安装

  • 安装 yuque-hexo
1
$ npm i -g yuque-hexo
  • 在 Hexo 博客的目录下面的 package.json 中，根据下面的配置进行填充，主要是 yuqueConfig 的配置
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
39
40
41
{
  "name": "hexo-blog",
  "version": "1.0.0",
  "private": true,
  "hexo": {
    "version": "3.9.0"
  },
  "scripts": {
    "clean": "hexo clean",
    "clean:yuque": "yuque-hexo clean",
    "deploy": "yuque-hexo sync && hexo deploy",
    "publish": "npm run clean && npm run deploy",
    "dev": "hexo s",
    "sync": "yuque-hexo sync",
    "reset": "npm run clean:yuque && npm run sync"
  },
  "dependencies": {
    "hexo": "^3.7.1",
    "hexo-deployer-git": "0.0.4",
    "hexo-generator-archive": "^0.1.0",
    "hexo-generator-category": "^0.1.0",
    "hexo-generator-index": "^0.1.0",
    "hexo-generator-json-content": "^3.0.1",
    "hexo-generator-tag": "^0.1.0",
    "hexo-renderer-ejs": "^0.1.0",
    "hexo-renderer-marked": "^0.2.4",
    "hexo-renderer-stylus": "^0.2.0",
    "hexo-server": "^0.1.2"
  },
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "page",
    "repo": "luan.ma",
    "mdNameFormat": "slug",
    "postPath": "source/_posts",
    "onlyPublished": true
  },
  "devDependencies": {
    "yuque-hexo": "^1.6.0"
  }
}
  • 安装好的 npm 依赖
1
$ npm install
  • 配置环境变量 YUQUE_TOKEN 为语雀仓库申请的 TOKEN

**

  • 手动同步文章
1
$ yuque-hexo sync

PS: 插件支持 Front-matter ，可以帮你把这些信息提供给 Hexo 做索引，在语雀写文章的时候直接写在前面，然后插入一条分割线即可，不写也没问题：

1
2
3
4
tags: [Hexo]
categories: [教程]
date: 2018-10-05 10:43:50
-----

部署配置

HEXO 支持本地生成 HTML 代码之后，自动发送代码到网上。

在 _config.yml 文件里面可以选择部署的配置，下面介绍三种部署方式，SFTP 部署，COS/OSS 部署，Git 部署

SFTP

安装 SFTP 部署插件：

1
$ npm install hexo-deployer-sftp --save-dev

_config.yml 找到 deploy 项目，写入配置：

1
2
3
4
5
6
7
deploy:
  type: sftp
  host: 129.1.1.1
  user: root
  pass: 1123456
  remotePath: /usr/www/luan.ma
  port: 22

Coding Pages

安装 Git 部署插件：

1
$ npm install hexo-deployer-git --save-dev

_config.yml 找到 deploy 项目，写入配置：

1
2
3
4
5
deploy:
  type: git
  repo: https://user:pass@test.coding.net/test/testRepo.git
  branch: master
  token: b1b322a7ba57812a3b72ecfb663c7d05e6d027fe

仓库需要自己建一个，现在 Coding 要先建一个项目，再建仓库，然后把仓库地址按上面的格式替换一下即可

user pass 是在 coding 的个人设置中，使用访问令牌功能来生成，需要选择仓库管理权限，账号密码都是生成的

部署好后，点击 Coding 的持续部署，静态网站，点击部署静态网站后，设置域名信息即可

COS/OSS

使用腾讯云、阿里云的对象储存：

安装插件：

1
$ npm install hexo-deployer-cos-cdn --save-dev

配置：详见 https://github.com/lxl80/hexo-deployer-cos-cdn

1
2
3
4
5
6
7
deploy:
  type: cos-cdn
  cloud: tencent
  bucket: luanma-1253534690
  region: ap-hongkong
  secretId: AKIXnqgJjzPtX0
  secretKey: 73nKjkZBbqt8IH

手动启动/部署 Hexo 博客

  • 本地启动（调试用）
1
$ hexo s
  • 生成 html 不部署
1
$ hexo g
  • 上传到服务器/静态空间/git （部署）
1
$ hexo g -d

自动化部署

本文使用 Coding 自动化部署流程，我直接把代码贴出来，你可以粘贴代码到 coding 的自动化流程即可：

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
pipeline {
  agent any
  stages {
    stage('检出') {
      steps {
        checkout([
          $class: 'GitSCM',
          branches: [[name: env.GIT_BUILD_REF]],
          userRemoteConfigs: [[
            url: env.GIT_REPO_URL,
            credentialsId: env.CREDENTIALS_ID
          ]]])
        }
      }
      stage('构建') {
        steps {
          echo '构建中...'
          sh 'npm install && npm run deploy'
          echo '构建完成.'
        }
      }
      stage('部署') {
        steps {
          echo '部署中...'
          echo '部署完成'
        }
      }
    }
    environment {
      YUQUE_TOKEN = '+zIGeTrj7Pw='
    }
  }

接下来，我们点击 Coding CI 的触发器，复制 API 触发的地址，然后我们到 腾讯云 SCF 创建一个云函数，选择 Python 3：

1
2
3
4
5
6
7
8
9
10
11
12
13
# -*- coding: utf8 -*-

def main_handler(event, context):
    import requests

    headers = {
        'Content-Type': 'application/json',
    }

    data = '\n    {\n    "ref": "master",\n    "envs": []\n}'

    response = requests.post('https://123.coding.net/api/cci/job/2/trigger', headers=headers, data=data, auth=('ptcr0mox', '56cc1c432e7e'))
    print(data)

然后把这个云函数的 POST 触发地址填到语雀的 WEBHOOK 地址即可。

写在后面

其实这篇文章干货不多，主要是应某网友的要求，顺便把我的 TenneyBlog 做个了结。核心是把 yuque-hexo 这个东西介绍给大家。这个插件由阿里巴巴的同学开发，我也做了一些微小的贡献。本博客目前也是使用这个方案同步语雀的文章。

当然，关于 Hexo 皮肤、评论插件等等玩法也要折腾很久，我就不在这篇文章里面说了。