思源笔记一键发布至Hexo、Hugo、Jekyll、Vitepress、Vuepress博客（github）并通过github action构建page并同步gitee page

移动开发2024-10-15 17:56:51

思源笔记一键发布至Hexo、Hugo、Jekyll、Vitepress、Vuepress博客（github）并通过github action构建page并同步gitee page

先决条件：思源笔记、一键发布工具、Hexo\Hugo\Jekyll\Vitepress\Vuepress相关主题

以Hugo的hugo-theme-next主题示例，其他的同理，构建文件不同

注意事项：Hugo使用无序和有序列表尽量不要超过3层

部署和配置时长：1小时+

部署流程：克隆Hugo主题至自己仓库->创建主页仓库->获取github个人访问令牌token->github action构建并输出至主页主页->gitee导入github仓库并配置镜像仓库->开通gitee page->配置hugo-theme-next

使用流程：思源笔记一键发布插件配置->使用一键发布插件发布文章并选择hugo

部署详情：

克隆Hugo主题至自己仓库
- ? 克隆主题
  
  点击右上角的 Use this template 绿色按钮然后填写代码仓库的相关信息，参考如下：
  
  使用模板创建
  
  https://camo.githubusercontent.com/0031520ad9bb551333a37cf756fbfb3f538e6f33638cd3318e5d70f94aae28e8/68747470733a2f2f696d67732e6c6973656e6875692e636e2f6875676f2d6e6578742f7573652d6875676f2d6e6578742d737461727465722e706e67
  最后点击 Create repository from template 绿色按钮，会直接在你的空间中生成站点代码，再使用git clone命令把它克隆到本地进行创作。
  
  记得首次完全克隆后，需要在根目录中使用如下的 Git 子模块更新命令拉取 hugo-theme-next 主题的最新版本。
创建主页仓库
- 自定义首页，首先需要创建一个与你 Github ID 同名的仓库

创建完成后就可以开始为你的首页添加一些有趣的内容了，代码格式可以是 `markdown` 语法，也可以是 `HTML` 语法，但 HTML 的扩展性更强一点，因此笔者使用的是 HTML 语法

获取github个人访问令牌token

当您需要在GitHub Action中执行需要身份验证的操作时，例如推送到另一个仓库或访问私有仓库，您需要提供身份验证凭据。GitHub提供了一种安全的方式来存储这些凭据，即使用Personal Access Token（个人访问令牌）并将其添加到仓库的Secrets中。

以下是如何生成Personal Access Token并将其添加到GitHub仓库的Secrets中的详细步骤：

生成Personal Access Token：

- 登录到您的`GitHub`账户。

- 点击右上角的头像，然后选择`Settings`（设置）。

- 在左侧导航栏中，点击`Developer settings`（开发者设置）。

- 在下拉菜单中，选择`Personal access tokens`（个人访问令牌）。

- 点击右上角的`Generate token`（生成令牌）按钮。

配置Personal Access Token的权限：

当您生成`Personal Access Token`时，需要为其分配适当的权限。根据您的需求，可以为其分配不同的权限，例如访问仓库、读取用户资料等。请谨慎选择权限，最小化所需的权限以提高安全性。

生成令牌：

在配置了权限后，滚动到页面底部，然后单击`Generate token`（生成令牌）。`GitHub`将生成一个令牌，并将其显示在屏幕上。请务必将此令牌复制到安全的地方，因为在生成后，您将无法再次查看完整的令牌。

将令牌添加到GitHub仓库的Secrets：

- 转到包含您的博客源文件的GitHub仓库。

- 在仓库顶部导航栏中，单击`Settings`（设置）。

- 在左侧导航栏中，选择`Secrets`（密码）。

- 单击`New repository secret`（新存储库密码）按钮。

- 在`Name`字段中，输入`PERSONAL_TOKEN`（或您选择的名称）。

- 在`Value`字段中，粘贴您在第3步中生成的`Personal Access Token`。

- 单击`Add secret`（添加密码）按钮。

现在，您的Personal Access Token已经以安全的方式存储在GitHub仓库的Secrets中，并可以在GitHub Action的工作流程中使用。

在上文中提到的PERSONAL_TOKEN将会被引用并传递给GitHub Action中的相关步骤，以便执行需要身份验证的操作。这个过程确保了敏感凭据的安全性，并且不会将它们直接硬编码到工作流程文件中，从而保护了您的GitHub仓库的安全性。

github action构建并输出至主页主页

配置GitHub Action，首先需要在博客源文件的仓库中创建一个.github/workflows目录，并在该目录下创建一个.yml配置文件。我们将其命名为deploy.yml。

以下是本人改进过的自动化部署Hugo博客的示例deploy.yml配置文件：

.github/workflows/deploy.yml

name: deploy

on:
  push:
    branches:
      - main  # 或者是你的源代码分支

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4
      with:
          submodules: true
          fetch-depth: 0

    - name: Set up Hugo
      uses: peaceiris/actions-hugo@v2.6.0
      with:
        hugo-version: "latest"
        extended: true

    - name: Build and Deploy
      run: |
        hugo -F --cleanDestinationDir  # 生成静态文件
        mkdir -p public  # 确保public文件夹存在
        cp -r public/* ./  # 复制生成的静态文件到仓库根目录

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v3.9.3
      with:
        PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}  # 你的个人访问令牌
        EXTERNAL_REPOSITORY: szhiku/szhiku.github.io  # 你的GitHub Pages仓库
        PUBLISH_BRANCH: main  # 或者是你的GitHub Pages分支
        PUBLISH_DIR: ./
        commit_message: ${{ github.event.head_commit.message }}

之后点右上角的commit（提交），会自动触发构建，构建详情如下图
正常的话，github pages已经可以了

点击设置，再点击右边栏上的 Pages
1. 设置 main 分支，root 根文件夹，并点击保存
1. 可以看到 Actions 中已经在构建和部署页面了
1. 构建完成后，重新回到设置的Pages 页，可以看到多了如下的提示，点击查看即可

gitee导入github仓库并配置镜像仓库
- 登录gitee导入github仓库
- 添加 Pull 方向的镜像
  
  Pull 方向的镜像用于将 GitHub 的仓库镜像到 Gitee 。
  
  你可以根据自身需求选择自动镜像或手动镜像。
  
  你可以通过以下方式配置 Pull 方向的镜像：
  1. 进入需要使用镜像功能的仓库，进入「管理」找到「仓库镜像管理」选项，点击「添加镜像」按键；
    
    如果你还没有绑定 GitHub 帐号，请根据弹窗提示绑定 GitHub 帐号；
  2. 添加镜像；
    1. 在「镜像方向」中选择 Pull 方向；
    2. 在「镜像仓库」下拉列表中选择需要镜像的仓库；
    3. 在「个人令牌」中输入你的 GitHub 私人令牌；
      - 私人令牌中必须包含对 repo 的访问授权，否则添加后镜像不可用；
    4. 根据自身需求选择是否勾选「自动从 GitHub 同步仓库」；
      - 勾选后，我们将会在镜像仓库中自动生成 webhook 用于实现自动镜像；
      - 此功能需要你的个人令牌中包含对 admin:repo_hook 的访问授权，否则会添加失败；
    5. 点击「添加」保存镜像配置；
      - 如果添加失败，请根据如何申请 GitHub 私人令牌提供的流程重新申请私人令牌；
      - 如果重新申请私人令牌后仍然添加失败，请取消勾选「自动从 GitHub 同步仓库」后点击「添加」保存镜像，并手动配置 webhook。
  配置完成后，可以通过以下方式触发镜像操作（Gitee 从 GitHub 同步仓库）：
  - 推送代码到 GitHub 镜像仓库
  - 手动更新镜像
  镜像触发的最短间隔时间为 5 分钟。
  
  如果只配置了 Pull 方向的镜像，建议你将最新的代码提交到 GitHub 镜像仓库；
  
  Gitee 会自动从 GitHub 同步仓库（分支/Branches、标签/Tags、提交记录/Commits）。
开通gitee page
- A.新建仓库 test_pages
 
 点击创建完成仓库的创建
 
 B.添加文件 index.html (注意名称是 index.html 哦！)
 
 点击新建文件
 
 文件名输入index.html，内容就是简单的html
 
 点击提交，将文件提交到仓库
 
 C.选择 pages 服务
 
 D.选择需要部署的分支，这里选择 Master 启动服务。
 
 E.访问生成的网站地址，即可以查看你部署的静态页面啦！
 
 3. 已经有 Pages 仓库如何部署到 Gitee 的 Pages
 
 以jQuery-File-Upload仓库为例，仓库地址：https://github.com/blueimp/jQuery-File-Upload
 
 它在 Github 上的 Pages 地址是：https://blueimp.github.io/jQuery-File-Upload/
 
 如果想把它转移到 Gitee Pages，只需要登录你的 Gitee 账户，点击右上角的 + 号，选择新建仓库
 
 然后点击创建，仓库会在后台自动导入，导入成功后，点击菜单栏的服务下拉Gitee Pages
 
 这里我们默认的Pages服务分支是仓库的默认分支，但是你也已选择自己静态页面所在的分支，这里jQuery-File-Upload仓库的静态页面分支是gh-pages，选择gh-pages并点击启动服务。
 至此，静态网页已经部署成功，访问提供的地址：https://frech.gitee.io/jquery-file-upload/ 即可查看到jQuery-File-Upload仓库的静态官网。
配置hugo-theme-next
- 来到这个文件夹
- 按照备注说明依次修改配置文件config.yaml、menus.yaml、params.yaml，修改后记得点击右上角绿色的commt，之后会自动构建

使用详情：

思源笔记一键发布插件配置
使用一键发布插件发布文章并选择hugo

参考资料：

教你如何自定义 Github 首页_设置github主页-CSDN博客

【Hugo网站搭建】GitHub Action自动化部署Hugo博客 - 知乎

仓库镜像管理(Gitee<->Github 双向同步) | Gitee 产品文档

Gitee Pages | Gitee 产品文档

查看全文

https://www.xamrdz.com/mobile/4aw1993884.html

思源笔记一键发布至Hexo、Hugo、Jekyll、Vitepress、Vuepress博客（github）并通过github action构建page并同步gitee page

? 克隆主题

3. 已经有 Pages 仓库如何部署到 Gitee 的 Pages

相关文章：