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

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

先决条件:思源笔记、一键发布工具、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 产品文档

  ‍

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

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

推荐标签 标签

  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 129 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖
  • iOS

    iOS 是由苹果公司开发的移动操作系统,最早于 2007 年 1 月 9 日的 Macworld 大会上公布这个系统,最初是设计给 iPhone 使用的,后来陆续套用到 iPod touch、iPad 以及 Apple TV 等产品上。iOS 与苹果的 Mac OS X 操作系统一样,属于类 Unix 的商业操作系统。

    84 引用 • 139 回帖 • 1 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 18 关注
  • abitmean

    有点意思就行了

    30 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    325 引用 • 1395 回帖
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 209 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖
  • wolai

    我来 wolai:不仅仅是未来的云端笔记!

    2 引用 • 14 回帖
  • Docker

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的操作系统上。容器完全使用沙箱机制,几乎没有性能开销,可以很容易地在机器和数据中心中运行。

    490 引用 • 916 回帖 • 2 关注
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖
  • 倾城之链
    23 引用 • 66 回帖 • 139 关注
  • 笔记

    好记性不如烂笔头。

    308 引用 • 793 回帖
  • 设计模式

    设计模式(Design pattern)代表了最佳的实践,通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。

    200 引用 • 120 回帖 • 1 关注
  • HHKB

    HHKB 是富士通的 Happy Hacking 系列电容键盘。电容键盘即无接点静电电容式键盘(Capacitive Keyboard)。

    5 引用 • 74 回帖 • 465 关注
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    5 引用 • 7 回帖
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 561 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 101 关注
  • Postman

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

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

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 347 关注
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 2 关注
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    677 引用 • 535 回帖
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    179 引用 • 407 回帖 • 489 关注