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

本贴最后更新于 276 天前,其中的信息可能已经时移世异

先决条件:思源笔记、一键发布工具、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 主题至自己仓库

  • 创建主页仓库

    • 自定义首页,首先需要创建一个与你 Github ID 同名的仓库

      image

      创建完成

  • 获取 github 个人访问令牌 token

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

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

    1. 生成 Personal Access Token
    - 登录到您的`GitHub`账户。
    
    - 点击右上角的头像,然后选择`Settings`(设置)。
    
    - 在左侧导航栏中,点击`Developer settings`(开发者设置)。
    
    - 在下拉菜单中,选择`Personal access tokens`(个人访问令牌)。
    
    - 点击右上角的`Generate token`(生成令牌)按钮。
    

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

    1. 生成令牌
    在配置了权限后,滚动到页面底部,然后单击`Generate token`(生成令牌)。`GitHub`将生成一个令牌,并将其显示在屏幕上。请务必将此令牌复制到安全的地方,因为在生成后,您将无法再次查看完整的令牌。
    
    1. 将令牌添加到 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 同步仓库):

      镜像触发的最短间隔时间为 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,之后会自动构建

  使用详情:

  • 思源笔记一键发布插件配置

    image

    image

    image

  • 使用一键发布插件发布文章并选择 hugo

    image

    image

  参考资料:

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

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

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

  Gitee Pages | Gitee 产品文档

  ‍

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22340 引用 • 89395 回帖 • 1 关注
1 操作
yw1551 在 2024-02-19 17:21:05 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 1 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    4 引用 • 16 回帖 • 5 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
  • OnlyOffice
    4 引用 • 3 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖 • 1 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 31 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    21 引用 • 140 回帖 • 1 关注
  • jsDelivr

    jsDelivr 是一个开源的 CDN 服务,可为 npm 包、GitHub 仓库提供免费、快速并且可靠的全球 CDN 加速服务。

    5 引用 • 31 回帖 • 58 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 537 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 2 关注
  • Bug

    Bug 本意是指臭虫、缺陷、损坏、犯贫、窃听器、小虫等。现在人们把在程序中一些缺陷或问题统称为 bug(漏洞)。

    75 引用 • 1737 回帖 • 5 关注
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    222 引用 • 473 回帖 • 1 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 642 关注
  • 创造

    你创造的作品可能会帮助到很多人,如果是开源项目的话就更赞了!

    179 引用 • 995 回帖
  • CodeMirror
    1 引用 • 2 回帖 • 129 关注
  • MyBatis

    MyBatis 本是 Apache 软件基金会 的一个开源项目 iBatis,2010 年这个项目由 Apache 软件基金会迁移到了 google code,并且改名为 MyBatis ,2013 年 11 月再次迁移到了 GitHub。

    170 引用 • 414 回帖 • 387 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 1 关注
  • Python

    Python 是一种面向对象、直译式电脑编程语言,具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法简捷和清晰,尽量使用无异义的英语单词,与其它大多数程序设计语言使用大括号不一样,它使用缩进来定义语句块。

    543 引用 • 672 回帖 • 1 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 3 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    334 引用 • 323 回帖
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 20 回帖 • 463 关注
  • DevOps

    DevOps(Development 和 Operations 的组合词)是一组过程、方法与系统的统称,用于促进开发(应用程序/软件工程)、技术运营和质量保障(QA)部门之间的沟通、协作与整合。

    47 引用 • 25 回帖
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • 禅道

    禅道是一款国产的开源项目管理软件,她的核心管理思想基于敏捷方法 scrum,内置了产品管理和项目管理,同时又根据国内研发现状补充了测试管理、计划管理、发布管理、文档管理、事务管理等功能,在一个软件中就可以将软件研发中的需求、任务、bug、用例、计划、发布等要素有序的跟踪管理起来,完整地覆盖了项目管理的核心流程。

    6 引用 • 15 回帖 • 114 关注
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 1 关注
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    132 引用 • 1114 回帖 • 124 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 302 关注