Hexo+GitHub Actions搭建博客,实现云端写作、一键发布

简介: Hexo+GitHub Actions搭建博客,实现云端写作、一键发布

1、Hexo发布博客流程概览


  1. 搭建hexo环境
  2. hexo new "title" (创建新文章)
  3. 编写md文档
  4. hexo clean
  • 清除缓存文件 (db.json) 和已生成的静态文件 (public)
  1. hexo generate (生成静态文件)
  2. hexo deploy (Hexo 会将 public 目录中的文件和目录推送至 _config.yml 中指定的远端仓库和分支中,并且完全覆盖该分支下的已有内容。)
  3. 本地仓库同步到GitHub (不同步的话,文章源码只会保留在本地,不易管理)


由于 Hexo 的部署默认使用分支 master,所以如果你同时正在使用 Git 管理你的站点目录,你应当注意你的部署分支应当不同于写作分支。

Hexo 在部署你的站点生成的文件时并不会更新你的站点目录。因此你应该手动提交并推送你的写作分支。


一般来说第一步环境搭建只需要在最开始创建博客网站的时候进行,写文的话只需要重复第2-7步就可以了,这种使用方式强烈依赖于本地环境。但是,有时候我们并不只是固定在一台电脑上写文,(比如:一直写文的电脑坏了,需要换新电脑;电脑重装系统等等)这样就需要在另一台电脑上搭建环境,这样非常的麻烦,而且难免会带来一些其它依赖版本兼容问题。所以,可以采用GitHub Actions持续集成平台来简化发布文章的流程。


简化后的流程如下:


  1. hexo new "title" (创建新文章)
  2. 编写md文档
  3. 本地仓库同步到GitHub
  • push到GitHub上之后,GitHub Actions会监听分支文件变动,触发发布流程(跟Jenkins 构建流程类似)


下文整体分为两个步骤:


  1. 借助GitHub Pages手动部署。
  2. 增加GitHub Actions配置,完成自动部署


2、Hexo 搭建博客


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

文档

npm install -g hexo-cli
cd [workspace]
hexo init <folder:blog>
cd <folder:blog>
npm install
hexo s

image.png

网站基础配置修改参考这里


3、GitHub 托管 Hexo 博客


可以采取分支管理的方式,也可以新建repo,在ci配置上略有不同,这里我采用的是将hexo博客源码托管到独立的repo上,将 Hexo 项目编译生成静态页面,部署到 gh-pages 分支

  1. 新建仓库:blog (名字自己起)
  2. 本地hexo仓库关联远程GitHub仓库 将本地仓库推送到远端
  3. 本地仓库一些必要的修改配置


https://github.com/hexojs/hexo-deployer-git
  • 修改_config.yml配置,如下:
url: https://all-smile.github.io/blog
root: /blog/
# ...
deploy:
  type: 'git'
  repo: git@github.com:all-smile/blog.git
  branch: gh-pages
  • 提交到远程仓库


  1. 创建 gh-pages 分支


hexo结合GitHub创建个人网站指定的分支名,hexo 内默认设置的分支也是叫这个名字

git checkout -b gh-pages
git push -u origin gh-pages


  1. 远程仓库开启 github pages


指定部署分支:gh-pages

image.png


4、手动部署


本地项目执行命令:

hexo clean
hexo g
hexo deploy

hexo模板引擎生成静态文件,并推送到gh-pages分支下(替换原先分支下的所有文件)

image.png

到这里就已经完成了博客的搭建


需要注意的是:hexo deploy 命令并不会帮助我们同步本地的修改到远程仓库,所以当在本地写完博文之后,要做两件事:一是发布站点,二是同步远程仓库,这样做比较麻烦,下面会讲解如何配置持续集成


4.1、查看效果


这里我配置了自定义域名

image.png


5、自动部署


就是DevOps,可以理解成 GitHub 通过一些流水线的配置(CI/CD),然后在本地推送代码的时候触发流水线执行,自动部署站点。


由于 GitHub Actions 也可以实现CI/CD,travis-ci 的市场被挤压了,所以他们改变了运营策略,变成收费使用了!我们换用 GitHub Actions

GitHub Actions 是开源持续集成构建项目,用来持续集成托管在GitHub上的代码,使用起来也非常的简单方便。

使用 GitHub Actions 后,可以将前面部署的步骤自动化,我们只需要将本地修改的文件推送到 github 仓库,GitHub Actions 检测到 master 分支代码有变动,会自动执行脚本命令,将 Hexo 项目编译生成静态页面,部署到 gh-pages 分支,very good!


6、GitHub Actions


GitHub Actions文档请点击这里

使用Github Action来部署hexo,这样电脑本地就不需要安装npm相关的东西了。另外利用github.dev也可以实现在页面上编辑了。

在线编辑:Github有提供一个在线编辑的页面,在Repo页面按下按键.就可以打开编辑页面了


每个 action 就是一个独立脚本,因此可以做成代码仓库,使用userName/repoName的语法引用 action。比如,actions/setup-node就表示github.com/actions/setup-node这个仓库,它代表一个 action,作用是安装 Node.js。事实上,GitHub 官方的 actions 都放在 github.com/actions 里面。

6.1、支持的令牌

支持三个令牌。

令牌 私人仓库 公开仓库 协议 设置
github_token ✅️ ✅️ HTTPS 不必要
deploy_key ✅️ ✅️ SSH 必要的
personal_token ✅️ ✅️ HTTPS 必要的

注意:GITHUB_TOKEN不是个人访问令牌,GitHub Actions 运行器会自动创建一个GITHUB_TOKEN密钥以在您的工作流程中进行身份验证。因此,您无需任何

image.png

所有 Actions 运行器:支持 Linux (Ubuntu)、macOS 和 Windows。

环境 github_token deploy_key personal_token
ubuntu-20.04 ✅️ ✅️ ✅️
ubuntu-18.04 ✅️ ✅️ ✅️
macos-最新 ✅️ ✅️ ✅️
windows-最新 ✅️ (2) ✅️


7、为Hexo配置GitHub Actions


具体步骤:


7.1、设置 SSH 私钥 deploy_key


创建 SSH 部署密钥,使用以下命令生成部署密钥。

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

您将获得 2 个文件:


  • gh-pages.pub是公钥
  • gh-pages是私钥


接下来,转到博客源码存储库设置


  • 转到Deploy Keys并使用Allow write access添加您的公钥 gh-pages.pub,name写为public key of ACTIONS_DEPLOY_KEY,指定用途,方便后面维护

image.png

  • 转到Actions secrets并将您的私钥 gh-pages 添加为 ACTIONS_DEPLOY_KEY(这个名称在yml文件中需要使用)

image.png


7.2、新建 .github/workflows/pages.yml 文件


yml文件通过缩进(空格,不是tab)来表示层级关系。

yaml不会的,可以去看一下这里,了解一下语法即可。

以下文件是我个人的配置的一部分,不建议直接使用

name: Pages
# 触发器、分支
on:
  push:
    branches:
      - master  # default branch
jobs:
  # 子任务
  pages:
    runs-on: ubuntu-latest # 定运行所需要的虚拟机环境
    permissions:
      contents: write
    steps:
      - uses: actions/checkout@v2
        # with:
        #   submodules: true
        #   fetch-depth: 0
      # 每个name表示一个步骤:step
      - name: Use Node.js 16.x
        uses: actions/setup-node@v2
        with:
          node-version: '16.14.1' # 自己正在使用的node版本即可
      # - run: node -v # 查看node版本号
      # 缓存依赖项: https://docs.github.com/cn/actions/using-workflows/caching-dependencies-to-speed-up-workflows
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          # path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      # 查看路径 : /home/runner/work/blog/blog
      # - name: Look Path
      #   run: pwd
      # 查看文件
      - name: Look Dir List
        run: tree -L 3 -a
      # 第一次或者依赖发生变化的时候执行 Install Dependencies,其它构建的时候不需要这一步
      - name: Install Dependencies
        run: npm install
      - name: Look Dir List
        run: tree -L 3 -a
      # - name: clean theme cache
      #   run: git rm -f --cached themes/tenacity
        # run: git submodule deinit themes/tenacity && git rm themes/tenacity
      # 安装主题
      - name: Install Theme
        run: git submodule add https://github.com/all-smile/tenacity.git themes/tenacity
      - name: Clean
        run: npm run clean
      - name: Build
        run: npm run build
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY  }}
          user_name: xiao
          user_email: allblue95@126.com
          # 获取提交文章源码时的commit message,作为发布gh-pages分支的信息
          commit_message: ${{ github.event.head_commit.message }}
          full_commit_message: ${{ github.event.head_commit.message }}
          github_token: ${{ secrets.GITHUB_TOKEN }}
          # GITHUB_TOKEN不是个人访问令牌,GitHub Actions 运行器会自动创建一个GITHUB_TOKEN密钥以在您的工作流程中进行身份验证。因此,您无需任何配置即可立即开始部署
          publish_dir: ./public
          allow_empty_commit: true # 允许空提交
      # Use the output from the `deploy` step(use for test action)
      - name: Get the output
        run: |
          echo "${{ steps.deploy.outputs.notify }}"


7.3、修改 _config.yml 文件中的Deploy配置


# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: git@github.com:all-smile/blog.git
  branch: gh-pages
  # 默认提交信息: Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}
  message: ${{ github.event.head_commit.message }} # 直接将提交消息传输到 GitHub Pages 存储库


发布效果


本地仓库直接push,触发 GitHub Actions 自动构建发布

image.png

image.pngimage.png

网站截图:

image.png


Hexo主题


请查看文档 ,自行安装配置


8、GitHub Actions问题解决


8.1、非法输入值


在 pages.yml 文件的 Deploy 步骤下,发布的时候需要一些参数配置,这些参数名是指定好的,不可以随便写,比如 commit_msg应该使用 commit_message

image.png

commit_message: ${{ github.event.head_commit.message }}

Warning: Unexpected input(s) 'commit_msg', valid inputs are ['deploy_key', 'github_token', 'personal_token', 'publish_branch', 'publish_dir', 'destination_dir', 'external_repository', 'allow_empty_commit', 'keep_files', 'force_orphan', 'user_name', 'user_email', 'commit_message', 'full_commit_message', 'tag_name', 'tag_message', 'enable_jekyll', 'disable_nojekyll', 'cname', 'exclude_assets']


8.2、The process '/usr/bin/git' failed with exit code 128


这个问题大概率是 GITHUB_TOKEN 造成的,参考配置文档

GITHUB_TOKEN 是一种 GitHub 应用程序安装访问令牌。 可以使用安装访问令牌代表仓库中安装的 GitHub 应用程序进行身份验证。令牌的权限仅限于包含您的工作流程的仓库。

image.png

解决:

  • 查看 yml 文件中的名字是否写错
github_token: ${{ secrets.GITHUB_TOKEN }}
  • 在 仓库 Settings/Actions/general 下,修改 GITHUB_TOKEN 的权限

image.png


8.3、deploy key问题


ERROR: Permission to all-smile/blog.git denied to deploy key
fatal: Could not read from remote repository.
Please make sure you have the correct access rights
and the repository exists.


解决:


  • 查看 pages.yml 中引用的变量名称是否跟 GitHub 仓库上设置的一样
  • 公私钥是否匹配,如果不匹配,则重新生成添加即可

👉👉 如果还有其它问题也可以看一下这里,应该会有帮助的😊


最后


  • 本地写文只需要在写完之后push到远程仓库即可发布
  • 其它电脑本地使用,有git就可以了,直接拉取远程仓库源码,在本地创建文件、编辑、推送远端,即可发布
  • 也可以用github.dev在线创建、编辑、发文
目录
相关文章
|
JavaScript API 开发工具
使用GitHub Actions自动发布electron多端安装程序
使用GitHub Actions自动发布electron多端安装程序
591 8
|
JSON 缓存 JavaScript
使用 jsDelivr 免费加速 GitHub Pages 博客的静态资源(二)
使用 jsDelivr 加速 GitHub Pages 的图片资源和动态编译的 JSON 资源。
565 2
利用 GitHub Actions 自动化你的软件开发流程
在现代软件开发中,自动化是提升效率与质量的关键。GitHub Actions 作为 GitHub 的强大自动化工具,允许你在仓库中自动执行多种任务,如测试、打包、部署代码及自动合并 Pull Requests。本文介绍了 GitHub Actions 的核心概念、设置方法及其实用示例,帮助你快速上手并优化开发流程。通过 YAML 文件定义的工作流程可显著提高工作效率和代码质量。
利用 GitHub Actions 自动化你的软件开发流程
在快速发展的软件开发环境中,自动化对于提升效率与质量至关重要。GitHub Actions 作为一款强大的工具,能帮助开发者实现从自动运行测试到部署应用等工作的自动化。本文详细介绍了 GitHub Actions 的核心概念、设置方法及实际应用示例,如自动测试、部署和合并 Pull Requests,助力提升开发流程的自动化水平。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是由 GitHub 提供的自动化工具,可让你在仓库中触发和执行自动化工作流程,如自动运行测试和部署应用。其核心概念包括工作流程(定义在 YAML 文件中的一系列自动化步骤)、作业和步骤。本文将指导你如何设置和使用 GitHub Actions,并提供实用的自动化示例,帮助你提高开发效率和代码质量。通过简单的配置文件,你可以实现自动运行测试、部署应用甚至自动合并 Pull Requests。
|
网络协议 开发工具 git
hexo github部署,通过域名访问你的博客
本文介绍了如何使用Hexo命令部署博客到GitHub,并详细说明了如何通过自定义域名访问GitHub上部署的博客。
hexo github部署,通过域名访问你的博客
|
存储 应用服务中间件 持续交付
使用GitHub Actions和Nginx实现自动化部署
使用GitHub Actions和Nginx实现自动化部署
650 4
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是 GitHub 提供的自动化工具,可在仓库中触发和执行工作流程,包括自动运行测试、部署应用等。其核心概念包括工作流程(Workflow)、作业(Job)和步骤(Step),均定义在 YAML 文件中。本文将指导你如何设置和使用 GitHub Actions,并提供自动运行测试、部署应用及合并 Pull Requests 的示例,帮助提高开发效率和代码质量。
|
Web App开发 缓存 移动开发
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台
四万字符数带你使用 Vitepress 构建博客并部署到 github 平台 最近写了好多篇 Chrome 浏览器插件相关的文章,有十几二十篇,就想着构建个博客,用来放置相应的文章。 正好前段时间看到 VitePress 1.0.0 发布了,而且是用 markdown 写文章,正好写插件文章的时候文章都是 md 格式,所有用下这个然后顺便写一篇使用教程。 Chrome 插件开发博客地址:https://18055975947.github.io/extension/
694 0
|
JavaScript 网络安全 开发工具
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客
[保姆级-从0到1]利用hexo+github托管实现搭建个人博客