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

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

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

  ‍

  • 思源笔记

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

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

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

欢迎来到这里!

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

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

推荐标签 标签

  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 13 关注
  • OnlyOffice
    4 引用 • 14 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 8 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    93 引用 • 901 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有计划重制上线。

    14 引用 • 257 回帖
  • sts
    2 引用 • 2 回帖 • 203 关注
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    107 引用 • 295 回帖 • 1 关注
  • 快应用

    快应用 是基于手机硬件平台的新型应用形态;标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。

    15 引用 • 127 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 330 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 23 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    289 引用 • 4492 回帖 • 657 关注
  • Outlook
    1 引用 • 5 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    150 引用 • 257 回帖 • 1 关注
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖 • 2 关注
  • WebSocket

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

    48 引用 • 206 回帖 • 303 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 780 关注
  • V2Ray
    1 引用 • 15 回帖 • 4 关注
  • Postman

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

    4 引用 • 3 回帖
  • FFmpeg

    FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。

    23 引用 • 32 回帖 • 1 关注
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 414 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 165 关注
  • TextBundle

    TextBundle 文件格式旨在应用程序之间交换 Markdown 或 Fountain 之类的纯文本文件时,提供更无缝的用户体验。

    1 引用 • 2 回帖 • 66 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 184 关注
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 625 关注
  • CSS

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

    197 引用 • 541 回帖 • 2 关注