程序员经验分享-hwhale

Hexo+GitHub搭建个人博客，实现云端编辑、一键发文

2023-10-27

操作环境：Windows10、Node、Git、ssh

前置准备: <username>github.io 仓库已建立，预计托管博客网址为<username>github.io/blog

先对hexo有个清晰的认识，不至于稀里糊涂的跟着步骤走。

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

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

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

4、手动部署

本地项目执行命令：

hexo clean
hexo g
hexo deploy

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

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

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

4.1、查看效果

这里我配置了自定义域名

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密钥以在您的工作流程中进行身份验证。因此，您无需任何配置即可立即开始部署

6.2、支持的平台

所有 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，指定用途，方便后面维护

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

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 自动构建发布

Hexo主题

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

8、GitHub Actions问题解决

8.1、非法输入值

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

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 应用程序进行身份验证。令牌的权限仅限于包含您的工作流程的仓库。

解决：

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

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 仓库上设置的一样

  • 公私钥是否匹配，如果不匹配，则重新生成添加即可

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

GitHub

博客建设

前端

Hexo+GitHub搭建个人博客，实现云端编辑、一键发文 的相关文章

  • 将存储库从 Github 移至 Gitlab

    有没有办法将整个存储库从 Github 移动到 GitLab 对于代码本身来说 只需在 GitLab 上创建一个新的存储库并推送到它即可 Wiki 页面位于 Github 上的单独分支中 并通过 Git 机制进行管理 据我所知 GitLab

  • 本地分支显示在 GitHub 的“网络”视图上

    我们使用 Git 我们的工作流程由 dev 和 master 分支组成 它们位于 GitHub 和每个开发人员的本地存储库上 不会直接在 master 或 dev 上执行任何工作 而是在本地分支中执行工作 并且仅在 dev 上进行合并 然后

  • 如何使用 Bower 正确注册 github fork

    不久前 我不得不在我的项目中使用 jQuery 插件 我需要一些不同的功能 所以我重写了这个插件 几天前我在 github 上发布了一个 fork 我想添加 打包到 Bower 存储库 分叉存储库 https github com itd2

  • 错误：无法锁定引用..“引用/标签”存在；无法创建“参考/标签/”

    当我尝试从 github 中提取更改时 出现奇怪的 无法锁定引用 错误 我尝试过 git gc 并查找类似的错误 但找不到解决方案 gt git pull error cannot lock ref refs tags v2 8 refs

  • 将 Github 分叉到 AzureDevops

    我想将 github 存储库分叉到 AzureDevOps 中 同时保留 AzureDevOps 中的功能 以按照在 github 中分叉存储库的方式不断从 github 中提取更改 这是否可行 在路线图上吗 我想将 github 存储库分

  • 如何在 Jenkins 控制台输出中隐藏 checkout scm 步骤输出

    我在 Jenkinsfile 脚本化管道 中的第一个阶段是 checkout scm 它简要描述了 GitHub checkouts 和所有修订相关的内容我不想在 Jenkins 控制台输出中显示 是否可以将其隐藏在 Jenkins 的控制

  • 合并 GitHub 中的拉取请求后，Jenkins 将不会触发构建

    到目前为止 在 Jenkins 中触发构建可以很好地创建新的拉取请求 推送更改并留下评论 例如test this please但是 当我在 GitHub 中点击绿色的 合并拉取请求 按钮时 我没有看到 Jenkins 中正在运行任何作业 我

  • 从另一个分支或从 master 创建 Git 分支？

    所以我是 Git 新手 我最近从存储库中提取了主分支的新版本 我创建了一个branch 1 获取某个功能并将其推送到存储库并创建拉取请求 现在我创建了一个新的branch 2 具有另一个功能 但由于我的拉取请求尚未合并 再次拉取 maste

  • 如何将Github中的develop分支设置为默认分支而不是master？

    我知道这可以在存储库的管理页面上完成 可以在那里设置另一个默认分支 这就是这个问题的答案 但我发现 也许是一个错误 以下内容 如果你的master分支和develop分支完全相同 那么git克隆将不会克隆默认的 develop 分支 但仍然

  • Visual Studio 2013 GitHub 头像未显示

    我已经使用 GitHub 设置了 VS 2013 我的问题是 当我提交到 GitHub 时 我看不到我的 GitHub 头像 如本文所述post http blogs msdn com b visualstudioalm archive 2

  • 如何将“develop”分支推送到远程“origin”？

    当我做git flow init它创造了一个master and develop分支机构 当我添加遥控器时git remote add origin email protected cdn cgi l email protection Ne

  • 尝试匿名克隆 github 存储库时权限被拒绝

    作为匿名用户 github 上没有存储公钥 我尝试通过以下方式克隆公共存储库 git 网址 但它失败了 git clone email protected cdn cgi l email protection mikehaertl phpw

  • Travis CI 不使用 pom.xml 中提供的额外 Maven 存储库

    我有一个基于 Java 的 GitHub 项目 健身jiffy 弹簧 https github com steve perkins fitnessjiffy spring tree bootstrap 我目前专注于 bootstrap 分支

  • GitHub 的 Subversion 版本？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • git push 被拒绝，合并冲突，git pull --rebase

    我正在尝试推动我的提交 但不能 因为还有另一个提交 HEAD 竞赛中的同一级别 我知道我需要将这两个提交合并在一起 但不确定如何去做 我已经尝试过了git pull rebase My GIT CLI https i stack imgur

  • 带有 GitHub 页面的 Favicon

    我正在托管一些带有 GitHub 页面 用户和项目页面 的网站 但它们没有显示其图标 在浏览器中 是 GitHub 显示站点的问题吗 我知道可以显示网站图标 至少使用 Jekyll 但是我可以单独显示网站图标吗 是的你可以 把这个放入hea

  • 如何在 GitHub Action 中推送到受保护的主分支？

    这是我的 github 操作工作流程 name Release on push branches main jobs release name Release runs on ubuntu latest steps name Checkou

  • 如何为 github 中两个分支之间的单个文件生成差异

    我需要为单个文件生成一个 diff 以显示两个版本之间的差异 这实际上是 github 中的标签 然后我想通过电子邮件将此差异发送给某人 因此差异的 github URL 将是理想的选择 github 比较视图将允许我对所有更改的文件执行此

  • Github 版本如何生成存档文件名？

    我刚刚在 github 上为我的 NFQL 软件创建了版本 这是发布页面 https github com vbajpai nfql releases https github com vbajpai nfql releases 对于最新版

  • 主存储库和本地存储库在同一台机器上

    我是 Git 新手 我已经在 Linux 服务器中创建了一个主存储库 同一个服务器将由 5 组 每组 3 个用户 使用 我想为每个组创建一个本地存储库 小组成员又应该为每个人创建一个本地存储库 使用内容并将修改提交到小组的本地存储库 我该怎

随机推荐

  • 详谈一下：Java中的基本类型变量（8种）与引用类型变量的区别

    对于Java语言中的基本类型 不知道各位老铁是否还能全能说出来 Java语言中的8种基本类型 byte short int long float double char bollen 上面8种Java语言中的基本类型 所对应的变量 就是基本

  • 全网最细，接口自动化测试-数据库操作与日志模块，一篇打通...

    目录 导读 前言 一 Python编程入门到精通 二 接口自动化项目实战 三 Web自动化项目实战 四 App自动化项目实战 五 一线大厂简历 六 测试开发DevOps体系 七 常用自动化测试工具 八 JMeter性能测试 九 总结 尾部小

  • NEC红外协议编码，38K红外遥控编码，红外遥控发射接收电路选型设计

    NEC为红外遥控最常用的编码 红外载波频率为38KHz 其协议小巧简单 非常适合家电设备的控制 其他的还有 Phillips RCA 的RC 5和RC 6 但那只是IR协议的少数 本篇博文参照国外博客或论坛资料并汇总 原链接可能需要翻墙 N

  • 微信小程序与服务器对称加解密,细说CryptoJs使用（微信小程序加密解密)

    前言 CryptoJs是google推出的一款前段解密类库 功能强大 包含很多的前段解密算法 一 google下载地址 二次开发版本 google原版地址 二 常用方法Testing websockets var key BOTWAVEE

  • 开源地震处理软件Seismic Unix（SU）安装

    Seismic Unix SU 是著名的开源地震处理软件 安装包可从以下链接下载 cwp su all 44R18 tar 1 解压 首先在 home usrname 路径下建一个安装文件夹 usrname代表自己的用户名 自己命名 比如c

  • MySQL中 数据库 和 表 的基操

    一 数据库 的操作 1 显示 数据库 2 创建 数据库 3 使用 数据库 4 删除 数据库 二 表 的操作 1 查看表结构 2 创建 表 3 删除 表 4 查看数据库中的表 三 常用的数据类型 一 数据库 的操作 1 显示 数据库 show

  • html css js 完整案例,html+css+js实例

    实例简介 用html css js做的一个简单小网页 可以作为初学者的参考资料 实例截图 核心代码 travel travel css css images 0 PNG 100 jpg 101 jpg 102 jpg 103 jpg 104

  • java语言的运算符

    目录 小白的疑惑 大白话运算符概念 运算符概念 运算符分类 特别注意 代码定天下 二元运算符 关系运算符代码 逻辑运算符 位运算符 拓展运算符 三目运算符 小白的疑惑 很多没接触编程的小伙伴都会顿感疑惑 啥是运算符 大白话运算符概念 小学算

  • VSCode 下载缓慢或者下载失败解决方案

    最近发现在VSCode官网上下载vscode十分缓慢 甚至经常断网或者是直接导致下载失败 我们可以使用国内镜像 让下载飞起来 附图 从官网上下载网速极其缓慢 我们将链接复制下来 黑框 https az764295 vo msecnd net

  • 版本发布流程

    文章目录 一 版本发布流程 1 增加 变更功能流程 1 需求确认 2 产品开发 3 alpha测试 4 问题修复 5 beta测试 6 版本发布 2 问题修复流程 1 问题确认 2 问题修复 3 alpha测试 4 版本发布 二 CHANG

  • 每天一个---- 吉尔德定律和迈特卡尔定律

    吉尔德定律 即主干网带宽的增长速度至少是运算性能增长速度的三倍 因为运算性能增长速度主要是由摩尔定律决定的 所以根据每18个月运算性能提高一倍计算 主干网的网络带宽的增长速度大概是每6个月增长一倍 而主干网的网络带宽的不断增长意味着各种新的

  • centos安装nc

    yum install y nc

  • el-button按下后背景颜色不恢复

    绑定的点击事件 const One click using evt gt let target evt target if target nodeName SPAN target evt target parentNode target b

  • 什么是MES系统？本文解释得很清楚了

    MES 英文Manufacturing Execution System的缩写 即生产执行系统 是近几年发展起来的企业信息化系统 目前在发达国家已经普遍推广 MES软件是介于ERP 企业资源计划系统 和自控系统 DCS PLC等 之间的系统

  • Android APK反编译技巧全讲解

    导言 在我们安卓开发当中 我们不仅需要掌握基础的开发技能 也需要掌握软件的安全技能 这样才可以让我们的软件能够成为一款能够真正可以进行发布的软件 同时也可以让自己的核心技术不会被别人所盗取 首先我们应当了解的是 对于反编译我们一共需要三个工

  • 《英雄联盟》丢失d3dcompiler_47.dll怎么办，推荐这个修复方案

    不知道大家有么有遇到过 在打开 英雄联盟 的时候 计算机提示丢失d3dcompiler 47 dll 无法继续执行此代码 d3dcompiler 47 dll是一个动态链接库文件 它是与Direct3D编译器相关的组件之一 像是photos

  • HTML ＜tt＞ 标签

    HTML5 中不支持

  • 也谈SDH、MSTP、OTN、PTN的区别和联系

    首先要说的是TDM的概念 TDM就是时分复用 就是将一个标准时长 1秒 分成若干段小的时间段 8000 每一个小时间段 1 8000 125us 传输一路信号 SDH系统的电路调度均以TDM为基础 所以看到很多人说SDH业务就是TDM业务

  • 求解全排列与幂集

    全排列 include

  • Hexo+GitHub搭建个人博客，实现云端编辑、一键发文

    操作环境 Windows10 Node Git ssh 前置准备

热门标签