title: GitHub Action自动部署HEXO
date: 2020-04-05
categories: Web
tags:

- Git
- Web
- Page
- HEXO
- 随笔

GitHub Action自动部署HEXO的各种配置文件以及注意事项

  • 博客自动部署有两个部分，分为博客代码和静态文件，两个部分分别在不同仓库，博客代码监测到push后自动执行生成静态文件并推送文件到静态文件仓库
  • 点开博客代码仓库上方的 Settings，点到左侧的 Secrets 项，添加两个环境变量 GH_REF 、GH_TOKEN
  • GH_REF值填写自己的 GitHub Pages 仓库地址（不包含 https:// ）
  • GH_TOKEN填写刚刚申请到的 GitHub Personal Access Token

GitHub Action配置文件各部分注释

name: Blog CI/CD

on:
  push:
    branches: 
      - master #在 master 分支上发生 push 操作时触发构建

env:
  TZ: Asia/Shanghai #设置时区为UTC+8

jobs:
  blog-cicd:
    name: Hexo blog build & deploy
    runs-on: ubuntu-latest # 使用最新的 Ubuntu 系统作为编译部署的环境

    steps:
    - name: Checkout codes #首先检出代码，
      uses: actions/checkout@v2

    - name: Checkout theme repo #添加github仓库名为“theme-next/hexo-theme-next”的主题到themes/next路径
      uses: actions/checkout@v2
      with:
          repository: theme-next/hexo-theme-next
          ref: master
          path: themes/next

    - name: Setup node # 设置 node 环境，这里使用 12.x 版本的 node.js 
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'

    - name: Cache node modules # 设置缓存以加快构建速度
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

    - name: Install dependencies # 安装依赖、hexo插件和复制主题配置文件
      run: |
        npm install hexo-cli gulp -g #安装hexo
        npm install hexo-generator-searchdb --save #安装站内搜索插件
        npm install hexo-generator-feed --save #安装RSS插件
        npm install #安装依赖
        cp _config.theme.yml themes/next/_config.yml #复制主题配置文件到它应该在的地方
    
    - name: Generate files
      run: hexo generate

    - name: Deploy blog # 推送静态文件到GitPage的库，其中用户名和邮箱部分需要修改为自己的
      run: |
        git clone "https://${{ secrets.GH_REF }}" deploy_git
        mv ./deploy_git/.git ./public/
        cd ./public
        git config user.name "yourusername"
        git config user.email "youremail"
        git add .
        git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
        git push --force --quiet "https://${{ secrets.GH_TOKEN }}@${{ secrets.GH_REF }}" master:master

Hexo配置文件

  • Hexo配置文件指_config.yml文件
  • url字段需要修改为真实url，否则会导致网站只显示文字不显示样式和主题
  • 如果启用主题请记得在_config.yml文件中修改theme字段
  • 主题配置文件要看主题文档，如果使用本文的GitHub Action配置文件要把主题配置文件写在_config.theme.yml
#启用RSS和站内搜索
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

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

其他

  • source文件夹中添加CNAME文件里面写入自定义域名可以防止每次部署后自定义域名被删
  • 如果不自定义域名那么GitPage地址应该为<username>.github.io/<reponame>,如不希望地址带有<reponame>那么repo的名字应该为<username>.github.io
  • source文件夹中添加categories文件夹，在此文件夹下添加index.md文件，文件内容在下面
  • source文件夹中添加tags文件夹，在此文件夹下添加index.md文件，文件内容在下面

categories/index.md

---
title: categories
date: 2017-10-10 12:22:12
type: "categories"
---

tags/index.md

---
title: tags
date: 2017-10-10 12:21:48
type: "tags"
---

Hexo配置文件记录

此文件位置位于 /_config.yml，用简体中文标出的部分要改

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 网站标题
subtitle: ''
description: ''
keywords:
author: 作者
language: 默认语言
timezone: ''

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://这里要改.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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:

# 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: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

# 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: 10
  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: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
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

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 
  repo: 
  branch: 

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true
  template:

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

完整的GitHub Action配置文件记录

此文件位置位于 /.github/workflows/**.yml，部署部分的用户名和邮箱要改

name: Blog CI/CD

on:
  push:
    branches: 
      - master

env:
  TZ: Asia/Shanghai

jobs:
  blog-cicd:
    name: Hexo blog build & deploy
    runs-on: ubuntu-latest

    steps:
    - name: Checkout codes
      uses: actions/checkout@v2

    - name: Checkout theme repo
      uses: actions/checkout@v2
      with:
          repository: theme-next/hexo-theme-next
          ref: master
          path: themes/next

    - name: Setup node
      uses: actions/setup-node@v1
      with:
        node-version: '12.x'

    - name: Cache node modules
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

    - name: Install dependencies
      run: |
        npm install hexo-cli gulp -g
        npm install hexo-generator-searchdb --save
        npm install hexo-generator-feed --save
        npm install
        cp _config.theme.yml themes/next/_config.yml
    
    - name: Generate files
      run: hexo generate

    - name: Deploy blog
      run: |
        git clone "https://${{ secrets.GH_REF }}" deploy_git
        mv ./deploy_git/.git ./public/
        cd ./public
        git config user.name "yourusername"
        git config user.email "youremail"
        git add .
        git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
        git push --force --quiet "https://${{ secrets.GH_TOKEN }}@${{ secrets.GH_REF }}" master:master

参考

https://xirikm.net/2020/313-1 http://archive.vn/lVoRO
https://sanonz.github.io/2020/deploy-a-hexo-blog-from-github-actions https://web.archive.org/web/20200817202250/https://sanonz.github.io/2020/deploy-a-hexo-blog-from-github-actions/
https://linlif.github.io/2017/05/27/Hexo使用攻略-添加分类及标签/ https://web.archive.org/web/20200817205332/https://linlif.github.io/2017/05/27/Hexo%E4%BD%BF%E7%94%A8%E6%94%BB%E7%95%A5-%E6%B7%BB%E5%8A%A0%E5%88%86%E7%B1%BB%E5%8F%8A%E6%A0%87%E7%AD%BE/

Last modification：September 21st, 2020 at 04:29 pm
© 允许规范转载
If you think my article is useful to you, please feel free to appreciate