使用Github_action实现本地无需安装hexo

发表于 分类于 Disqus：
本文字数： 5.2k 阅读时长 ≈ 9 分钟

这里使用 Github Action实现的目的，就是本地无需安装Hexo

前景

目录说明

因为我们需要使用hexo去进行render博客网站，因此肯定需要source与themes。

前者用来存储md静态文章，后者用来存储主题文件.整个项目文件，如下所示。

1
2
3
4
5
.
|-- source
|   |-- _posts
`-- themes
    `-- next

但是，单单如果只有两个文件夹，是很难进行hexo渲染的，因此，这里还需要额外的一些文件来帮助渲染

1
2
3
4
5
6
7
8
9
10
11
.
|-- _config.yml # hexo的一些配置信息，例如更换主题
|-- package.json # npm的一些软件包
|-- source
|   |-- _posts
|   |-- about.md # 插件页
|   |-- avatar.png # 插件页
|   |-- favicon.ico # 插件页
|   `-- robots.txt
`-- themes
    `-- next

后面的这三个插件页都是因为我选择的这个next主题所需要的。这里可以查看_config.yml内容，这里是我的配置信息，可以按照自己的需求进行更改。

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Qier's blog
subtitle:
description:
author: qier
language: zh-CN
timezone: Asia/Shanghai
keywords:
  - Docker
  - Linux

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: source/draft



# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 128
  order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format:
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 128
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

feed:
  type: atom
  path: atom.xml
  limit: 10
  hub:
  content: true
  content_limit: 32
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png

search:
    path: search.xml
    field: post
    format: html
    limit: 10000

sitemap:
  path: sitemap.xml
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: ''

github action需要的配置文件.因为这里使用了github action进行自动devops，因此需要进行workflows的设置

这里选择了文件

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: Build hexo website
on: push
jobs:
  hexo-build:
    runs-on: ubuntu-20.04
    steps:
      - name: Clone blog source repository
        uses: actions/checkout@v2
        with:
          path: hexo

      - name: Checkout blog web site repo
        uses: actions/checkout@v2
        with:
          token: ${{ secrets.TOKEN_GITHUB }}
          fetch-depth: 0
          repository: ${{ github.repository_owner }}/jsabook.github.io # 需要更改成自己的hexo静态网站项目地址
          path: site

      - name: Config git user and user.email
        run: |
          cd ${GITHUB_WORKSPACE}/site && git config user.name github-actions
          cd ${GITHUB_WORKSPACE}/site && git config user.email wjshuaizfq@163.com # 自己的邮箱地址

      - name: Init hexo env
        run: |
          sudo apt install rename -y -qq
          sudo yarn global add hexo-cli
          cd ${GITHUB_WORKSPACE}/hexo && yarn install

      - name: Hexo build
        run: |
          cd ${GITHUB_WORKSPACE}/hexo/source/_posts && rename 's/([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])-)//' *.md
          cd ${GITHUB_WORKSPACE}/hexo && hexo clean && hexo g
          cd ${GITHUB_WORKSPACE}/hexo && git checkout .

      - name: Update repo
        run: |
          cp -rf ${GITHUB_WORKSPACE}/hexo/public/* ${GITHUB_WORKSPACE}/site
          cd ${GITHUB_WORKSPACE}/site && git add . && git commit -am "Auto build by GitHub Actions $(date)"
          cd ${GITHUB_WORKSPACE}/site && git push origin -f

经过上面的说明，这里就有了一个完善的项目目录

操作指南

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
|-- .github
|   `-- workflows
|-- .gitignore
|-- _config.yml
|-- package.json
|-- source
|   |-- _data
|   |-- _posts
|   |-- about.md
|   |-- avatar.png
|   |-- favicon.ico
|   `-- robots.txt
`-- themes
    `-- next

创建token

选择setting

image-20210913145330385

选择Developer settings

image-20210913145501698

选择Personal access tokens

image-20210913145613742

创建一个token，设置有效期

image-20210913145720269

复制token，这里复制的token在后面的项目中可以用到。

image-20210913145819402

创建项目

需要创建两个项目地址，一个项目地址用来存储markdown静态文件。另外一个用来存储渲染之后的文章

1
2
存储静态文件：https://github.com/jsabook/blog
存储渲染文章：https://github.com/jsabook/wjshuai.github.io

PS：存储渲染文章项目需要提前创建好main分支。

使用token

创建完毕之后需要将token加入到存储静态文件项目中。这里的Name需要写TOKEN_GITHUB,与workflow中的值token: $是一一对应的。

image-20210913150247198

运行

初始化github项目

1
2
3
4
5
6
7
8
mkdir blog && cd blog
echo "# blog" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/jsabook/blog.git
git push -u origin main

将下面的目录结构复制到本地初始化好的blog目录下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
|-- .github
|   `-- workflows
|-- .gitignore
|-- _config.yml
|-- package.json
|-- source
|   |-- _data
|   |-- _posts
|   |-- about.md
|   |-- avatar.png
|   |-- favicon.ico
|   `-- robots.txt
`-- themes
    `-- next

运行

1
2
3
git add README.md
git commit -m "first article"
git push

运行完毕之后，查看actionS

image-20210913144736905

我们可以看到first article这个job运行完毕

image-20210913144807797

运行结果

image-20210913150612256