关于前端:HexoGitHub搭建博客实现云端编辑一键发布

32次阅读

共计 6464 个字符,预计需要花费 17 分钟才能阅读完成。

操作环境: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
  4. 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. 本地仓库一些必要的批改配置
  4. 装置 hexo-deployer-git。

    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 仓库上设置的一样
  • 公私钥是否匹配,如果不匹配,则从新生成增加即可

👉👉 如果还有其它问题也能够看一下这里,应该会有帮忙的😊

最初

  • 本地写文只须要在写完之后 push 到近程仓库即可公布
  • 其它电脑本地应用,有 git 就能够了,间接拉取近程仓库源码,在本地创立文件、编辑、推送远端,即可公布
  • 也能够用 github.dev 在线创立、编辑、发文

🎈🎈🎈

🌹 继续更文,关注我,你会发现一个虚浮致力的宝藏前端😊,让咱们一起学习,独特成长吧。

🎉 喜爱的小伙伴记得点赞关注珍藏哟,回看不迷路 😉

🎁 欢送大家评论交换, 蟹蟹😊

正文完
 0