"让写blog的人专注于blog，实现全自动issue_blog，use：Issue + Hexo + Github Action"

[WQhuanm]

关于我吝啬(不愿买服务器)又懒惰(写博客不想太麻烦)，所以在全网网罗众多blog搭建idea，最后形成这篇blog这件事

本文主要借鉴于Github的一个issue_blog项目
yihong0618/gitblog

最终效果可参考我的Blog仓库以及Blog网站

建立个人博客网站是在网上混迹的不错方式

相信有些人会在issue上记录自己的点滴，提交issue非常方便可惜缺少美观界面，也有些人使用hexo等静态网站，但是hexo等上传blog确实有些麻烦。

集思广益后，个人认为这份只需要用issue提交blog，通过Github Action来自动生成Readme,并自动部署博客到静态网站的方法也许值得一试。

一，配置Blog repo：clone这个仓库到你想用来建立博客的仓库

这份博客运作的核心有三:

1. main.py: 内含生成readme的逻辑
2. generate_readme.yml: 通过action自动调用main.py生成readme
3. generate_page.yml: 在readme生成后，将博客部署到Gitpage网站

必须执行的操作(require)

1. 获取你的Github Token

可以给你的token备注个名字(Note)。
有效期建议无限，否则每次过期你需要重新替换。
后面权限建议全部勾选，以防workflow权限不够。

最后Generate token便可获取，注意保存这个字符串，只会出现这一次

2. 在你博客仓库的settings的Actions secrets and variables添加你刚刚获得的token。

建议命名为G_T(否则需要把2个workflow里面的G_T改为你设定的名字)

3.在你博客仓库的settings的Actions ：General里运行workflow的读写权限

4. 删除Blog文件夹

因为里面是我博客的存档(😓)

Option

1. 更改main.py的MD_HEAD内容，这个会写在readme头部

执行后上述操作，你以后每次写issue(可以打上相关的label),都会更新到readme作为一个索引目录了。

readme会根据你打的label对你的博客进行分类

二，配置 Github Page

yihong0618/gitblog是使用Zola配置了Github Page。我后面也会简要介绍一下zola的配置
我这里提供一种hexo的配置思路，采用的主题是kira

1. 你可以根据你选择的hexo主题进行本地配置后，把这个主题上传到你的私人仓库方便后面workflow来clone

• 我也提供了一个公共仓库以便您进行测试，你可以先暂时使用这个https://github.com/WQhuanm/Test_Blog_Repo.git
• 强烈建议私人仓库，因为你配置文件极可能有个人敏感信息
• 强烈建议先在本地测试好你的静态网站部署是成功的，然后配置成私人仓库给workflow来clone，毕竟本地调试和配置要容易的多
• 如果你配置好了自己的私人仓库，请在package.json添加这段代码：
  (否则你必须把generate_page.yml中Generate Hexo public里面run的最后一部分即"&& gulp"删除，这个gulp用于压缩文件，提高前端页面访问效果的)

      "devDependencies": {
          "gulp": "^4.0.2",
          "gulp-minify-css": "^1.2.4",
          "gulp-babel": "^8.0.0",
          "gulp-uglify": "^3.0.2",
          "gulp-htmlmin": "^5.0.1",
          "gulp-htmlclean": "^2.7.22",
          "gulp-imagemin": "^7.1.0",
          "imagemin-jpegtran": "^7.0.0",
          "imagemin-svgo": "^11.0.0",
          "imagemin-gifsicle": "^7.0.0",
          "imagemin-optipng": "^8.0.0"
      }

• 其次，您需要在你的私人仓库根目录添加一个文件，名字为:gulpfile.js ,内容如下：

      var gulp = require("gulp");
      var minifycss = require("gulp-minify-css");
      var uglify = require("gulp-uglify");
      var htmlmin = require("gulp-htmlmin");
      var htmlclean = require("gulp-htmlclean");
      var imagemin = require("gulp-imagemin");
  
      // 压缩css文件
      gulp.task("minify-css", function () {
      return gulp
          .src("./public/**/*.css")
          .pipe(minifycss())
          .pipe(gulp.dest("./public"));
      });
  
      // 压缩html
      gulp.task("minify-html", function () {
      return gulp
          .src("./public/**/*.html")
          .pipe(htmlclean())
          .pipe(
          htmlmin({
              collapseWhitespace: true,
              collapseBooleanAttributes: true,
              removeComments: true,
              removeEmptyAttributes: true,
              removeScriptTypeAttributes: true,
              removeStyleLinkTypeAttributes: true,
              minifyJS: true,
              minifyCSS: true,
              minifyURLs: true,
              ignoreCustomFragments: [/\{\{[\s\S]*?\}\}/],
          })
          )
          .pipe(gulp.dest("./public"));
      });
  
      // 压缩js文件
      gulp.task("minify-js", function () {
      return gulp
          .src(["./public/**/*.js", "!./public/js/**/*min.js"])
          .pipe(uglify())
          .pipe(gulp.dest("./public"));
      });
  
      // 压缩图片
      gulp.task("minify-images", function () {
      return gulp
          .src([
          "./public/**/*.png",
          "./public/**/*.jpg",
          "./public/**/*.gif",
          "./public/**/*.svg",
          ])
          .pipe(
          imagemin([
              imagemin.gifsicle({ interlaced: true }),
              imagemin.mozjpeg({ quality: 75, progressive: true }),
              imagemin.optipng({ optimizationLevel: 5 }),
              imagemin.svgo({
              plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
              }),
          ])
          )
          .pipe(gulp.dest("./public"));
      });
  
      gulp.task(
      "default",
      gulp.series(
          gulp.parallel("minify-html", "minify-css", "minify-js", "minify-images")
      )
      );

2. 修改 .github\workflows\generate_page.yml，参考里面的注释

• 修改BASE_URL
• 修改jobs:deploy:steps:name: Generate Hexo public 里面的克隆仓库（也可以改成我提供的仓库来测试:https://github.com/WQhuanm/Test_Blog_Repo.git)

3. 请把博客仓库的settings的page的生成改成使用action生成

否则GitPage的部署默认使用分支部署，呈现出来的页面即是你的readme内容

配置后，如果你的博客仓库提交过issue写文章，点击https://{username}.github.io/{your blog repo}/ 就可以看到你的网站了

Option

• workflow生成page时，已经使用了上文提到的gulp对网站的文件进行压缩，如果网站图片不是那么多的话，无梯子下访问速度还是很快的，如果你有很多图片上传的需求，推荐你使用国内主流图床或者使用Github做图床+CDN技术来优化，可以参考jsDelivr和Github配合才是最佳免费CDN，五分钟学会使用，附搭建免费图床教程

使用Zola简易配置Gitpage

1. 你无需弄一个私有仓库了，只需要在博客仓库根目录添加一个config.toml文件，内容如下:

   base_url = "https://{username}.github.io/{your blog repo}/" #如果repo是{username}.github.io,请改为https://{username}.github.io/
   generate_feeds = true
   feed_filenames = ["rss.xml"]
   theme = "even"
   taxonomies = [
       {name = "categories", feed = true},
       {name = "tags", feed = true},
   ]
   [extra]
   even_title = "yihong0618's Blog"
   even_menu = [
       {url = "$BASE_URL", name = "Home"},
       {url = "$BASE_URL/tags/top/", name = "Top"},
       {url = "$BASE_URL/issue-282/", name = "About"},
   ]

2. generate_page.yml改为这个

   name: Deploy static content to GitPages
   on:
   workflow_dispatch:
   workflow_run:
       workflows: [Generate GitBlog README]  # Depends on the completion of the workflow: Generate GitBlog README
       types:
       - completed
   # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
   permissions:
   contents: read
   pages: write
   id-token: write
   concurrency:
   group: ${{ github.workflow }}
   cancel-in-progress: true
   jobs:
   deploy:
       environment:
           name: github-pages
           url: ${{ steps.deployment.outputs.page_url }}
       runs-on: ubuntu-latest
       env:
           GH_TOKEN: ${{ github.token }}
           ISITE_VERSION: v0.1.3
           ZOLA_VERSION: v0.19.2
           USER: ${{ github.repository_owner }}
           REPO: ${{ github.event.repository.name }}
            #if you use Gitpage and your repo'name is not {usernmae}.github.io,please use this
           BASE_URL: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}
           # else if your repo's name is {usernmae}.github.io,please use this,please use this
           # BASE_URL: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}
       steps:
       - name: Checkout
           uses: actions/checkout@v4
       - name: Generate markdown
           run: |
           gh release download $ISITE_VERSION --repo kemingy/isite -p '*Linux_x86_64*' --output isite.tar.gz
           tar zxf isite.tar.gz && mv isite /usr/local/bin
           isite generate --user $USER --repo $REPO
           gh release download $ZOLA_VERSION --repo getzola/zola -p '*linux*' --output zola.tar.gz
           tar zxf zola.tar.gz && mv zola /usr/local/bin
           cp config.toml output/config.toml
           cd output && zola build --base-url $BASE_URL
       - name: Setup Pages
           uses: actions/configure-pages@v4
       - name: Upload artifact
           uses: actions/upload-pages-artifact@v2
           with:
           path: 'output/public'
       - name: Deploy to GitHub Pages
           id: deployment
           uses: actions/deploy-pages@v3

参考文章:
这个博客开源了
使用 GitHub Issues 来写博客，真香。
jsDelivr和Github配合才是最佳免费CDN，五分钟学会使用，附搭建免费图床教程
加快GitHub Pages国内访问速度

[briteming]

hi.

我按你这个说明。搞了一个博客：https://briteming.github.io/Issue_Blog/ 。不过在我提交issue后，博客怎么没更新呢？我看了：
https://github.com/briteming/Issue_Blog/actions ，显示好几个x. 怎么解决？

这里https://github.com/briteming/Issue_Blog/blob/main/.github/workflows/generate_page.yml ，我编辑得正确吗？

谢谢回复！

[WQhuanm]

hi.

我按你这个说明。搞了一个博客：https://briteming.github.io/Issue_Blog/ 。不过在我提交issue后，博客怎么没更新呢？我看了： https://github.com/briteming/Issue_Blog/actions ，显示好几个x. 怎么解决？

这里https://github.com/briteming/Issue_Blog/blob/main/.github/workflows/generate_page.yml ，我编辑得正确吗？

谢谢回复！

你的yml克隆成我的仓库了(😅
报错显示你没有找到这个仓库，因为这是我存静态网站配置的私人仓库

你应该在这一段把仓库改成你自己配置的仓库：

当然，如果只是先测试配置的话，你可以把这句改成:npm create kira-hexo@latest output.
即参考我前面说的这个:

[WQhuanm]

hi.

我按你这个说明。搞了一个博客：https://briteming.github.io/Issue_Blog/ 。不过在我提交issue后，博客怎么没更新呢？我看了： https://github.com/briteming/Issue_Blog/actions ，显示好几个x. 怎么解决？

这里https://github.com/briteming/Issue_Blog/blob/main/.github/workflows/generate_page.yml ，我编辑得正确吗？

谢谢回复！

关于更新的问题，readme的生成是没问题的:

然后你静态网站显示的不是Hexo网页，而是Readme的内容。
不好意思，这里有一个操作我忘记提醒了
大概把博客仓库的settings的page的生成改成使用action生成而不是使用分支生成(这个会默认readme作为主页面)

这样就ok了
:

你先改改试试，还有问题的话欢迎提问

[briteming]

改了，还是不行。
你这个图片：https://private-user-images.githubusercontent.com/111880052/398205123-77e46fcd-2211-4e8e-b1b3-bfb09543becd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQ5OTQwODMsIm5iZiI6MTczNDk5Mzc4MywicGF0aCI6Ii8xMTE4ODAwNTIvMzk4MjA1MTIzLTc3ZTQ2ZmNkLTIyMTEtNGU4ZS1iMWIzLWJmYjA5NTQzYmVjZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMjIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIyM1QyMjQzMDNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lMmFkZjc1YmZlZGJjNjRmYzQyN2QxYzA0YTMyMmU5Nzk2MzZmZWE2Y2UwZDQxN2ZiZjRjZTI3NmExMGE0NDg5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.bSvmUDLv3lZk4KY0cFG2ue-eMEMjxUzr3rbiS4XlEtg 所显示的内容是怎么弄出来的？能把网址发给我看一下吗

[WQhuanm]

改了，还是不行。 你这个图片：https://private-user-images.githubusercontent.com/111880052/398205123-77e46fcd-2211-4e8e-b1b3-bfb09543becd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzQ5OTQwODMsIm5iZiI6MTczNDk5Mzc4MywicGF0aCI6Ii8xMTE4ODAwNTIvMzk4MjA1MTIzLTc3ZTQ2ZmNkLTIyMTEtNGU4ZS1iMWIzLWJmYjA5NTQzYmVjZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQxMjIzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MTIyM1QyMjQzMDNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lMmFkZjc1YmZlZGJjNjRmYzQyN2QxYzA0YTMyMmU5Nzk2MzZmZWE2Y2UwZDQxN2ZiZjRjZTI3NmExMGE0NDg5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.bSvmUDLv3lZk4KY0cFG2ue-eMEMjxUzr3rbiS4XlEtg 所显示的内容是怎么弄出来的？能把网址发给我看一下吗

你好，根据你提出的问题，我配置了一个公共的hexo仓库以便测试。

我查看你action的所有运行版本，你可以试试将第6次的拿份generate_page.yml的clone仓库修改为这个https://github.com/WQhuanm/Test_Blog_Repo.git，应该就能部署成功了
我也修改了部分博客文档，你可以参考看看能不能解决问题，如果还不能解决欢迎提问

[briteming]

你说“修改jobs:deploy:steps:name”，修改哪个 name 的值？有很多name 项。
我说的图片是：

[WQhuanm]

你说“修改jobs:deploy:steps:name”，修改哪个 name 的值？有很多name 项。 我说的图片是：

不是修改name,我的意思是修改name: Generate Hexo public 这个模块

根据注释的提示，把clone的仓库改了(注释已经提供2种写法

[briteming]

1. 我说的那个图片所显示的内容，你是怎么弄出来的？能把网址发给我看一下吗
   2.麻烦再仔细看一下这个文件 https://github.com/briteming/Issue_Blog/blob/main/.github/workflows/generate_page.yml ，看看哪个地方还需要再改？刚才运行了actions,还是失败

[briteming]

比如，第25行和第26行，要分别改为：
USER: briteming
REPO: Issue_Blog 吗

[WQhuanm]

1. 我说的那个图片所显示的内容，你是怎么弄出来的？能把网址发给我看一下吗
   2.麻烦再仔细看一下这个文件 https://github.com/briteming/Issue_Blog/blob/main/.github/workflows/generate_page.yml ，看看哪个地方还需要再改？刚才运行了actions,还是失败

1，图片的话就在你仓库的主页面呀，那个就是你的readme啊

2，你根据action报错信息就知道为什么嘛，它显示

我建议你clone 那一行，改成我注释提到的git clone https://github.com/WQhuanm/Test_Blog_Repo.git output
这样应该就真没问题了，没有glup是我的问题，这个是我之后配的，忘记原网站没有了，所以我已经专门提供了这个WQhuanm/Test_Blog_Repo仓库来进行测试了

[WQhuanm]

比如，第25行和第26行，要分别改为： USER: briteming REPO: Issue_Blog 吗

这个写法action就能自动获取你的用户信息的，不需要更改

[briteming]

终于搞定。谢谢你这么热心和细心回答问题。

[WQhuanm]

终于搞定。谢谢你这么热心和细心回答问题。

没关系，你也让我发现了配置过程的一些纰漏，最后麻烦把克隆仓库里面原本我的文章删除，谢谢

[briteming]

如何删除你的文章？

[WQhuanm]

如何删除你的文章？

直接把整个Blog文件夹删除即可，这样以后他只会检索你issue文章，将未生成的文章生成.md并部署到静态网站

提醒一下，我建议改下main.py那个MYHEAD的内容，这个内容写了readme最上面的内容。
不更改的话，你的readme转到的会是我的博客。

[briteming]

我改了main.py那个MYHEAD的内容，但是并未生效。怎么回事？
在哪里删除Blog文件夹？没看见删除按钮

[briteming]

哦，已生效

[WQhuanm]

我改了main.py那个MYHEAD的内容，但是并未生效。怎么回事？ 在哪里删除Blog文件夹？没看见删除按钮
生效触发仅在本人的issue内容发生编辑的情况会触发自动化任务，你随便找个你的issuee编辑一下就会更新。

删除在这里

[briteming]

不能直接删除你那2个md file吗

[WQhuanm]

不能直接删除你那2个md file吗

可

[briteming]

一样的没看见删除md file的地方。sorry,打搅你了

[WQhuanm]

一样的没看见删除md file的地方。sorry,打搅你了

打开下滑就有的：

[briteming]

完成了，删了那篇教程文章。我修改了about.me.md,因此就不必删它了。
点击delete file,还要点击commit changes，删除才会生效

[briteming]

hi.
还有几个问题。

1. 图片https://kira.host/assets/Pictures/Others/-f0d5cc34c6e5aa7_compressed.jpg 和https://kira.host/assets/Pictures/Others/20220922230447.jpg可以替换掉吗？我搜了一下，没找到它们：

~/Issue_Blog (main)$ grep -rni https://kira.host/assets/Pictures/Others/-f0d5cc34c6e5aa7_compressed.jpg .
~/Issue_Blog (main)$ grep -rni 'https://kira.host/assets/Pictures/Others/20220922230447.jpg' .
~/Issue_Blog (main)$

2. 我的文章底部的链接用的还是你的域名，比如https://briteming.github.io/Issue_Blog/2024/12/24/10_%E6%B5%A3%E6%BA%AA%E6%B2%99/ 底部的link显示的是https://wqhuanm.github.io/Issue_Blog/2024/12/24/10_%E6%B5%A3%E6%BA%AA%E6%B2%99/ 。如何替换为我的域名briteming.github.io？

3. 博客中文章显示的顺序并不是按提交issue的时间顺序来做的。比如我先提交了issue 15: test-1 briteming/Issue_Blog#15 ,稍后提交了issue 16: test-2 briteming/Issue_Blog#16, 但是博客里显示的文章的顺序并不是按提交issue的时间顺序来做的: 文章https://briteming.github.io/Issue_Blog/2024/12/26/16_test-2/ 应该在https://briteming.github.io/Issue_Blog/2024/12/26/16_test-1 的上面，但是实际上却在其下面。如何纠正这问题？

谢谢回复

[WQhuanm]

hi. 还有几个问题。

1. 图片https://kira.host/assets/Pictures/Others/-f0d5cc34c6e5aa7_compressed.jpg 和https://kira.host/assets/Pictures/Others/20220922230447.jpg可以替换掉吗？我搜了一下，没找到它们：

~/Issue_Blog (main)$ grep -rni https://kira.host/assets/Pictures/Others/-f0d5cc34c6e5aa7_compressed.jpg . ~/Issue_Blog (main)$ grep -rni 'https://kira.host/assets/Pictures/Others/20220922230447.jpg' . ~/Issue_Blog (main)$

2. 我的文章底部的链接用的还是你的域名，比如https://briteming.github.io/Issue_Blog/2024/12/24/10_%E6%B5%A3%E6%BA%AA%E6%B2%99/ 底部的link显示的是https://wqhuanm.github.io/Issue_Blog/2024/12/24/10_%E6%B5%A3%E6%BA%AA%E6%B2%99/ 。如何替换为我的域名briteming.github.io？
3. 博客中文章显示的顺序并不是按提交issue的时间顺序来做的。比如我先提交了issue 15: test-1 briteming/Issue_Blog#15 ,稍后提交了issue 16: test-2 briteming/Issue_Blog#16, 但是博客里显示的文章的顺序并不是按提交issue的时间顺序来做的: 文章https://briteming.github.io/Issue_Blog/2024/12/26/16_test-2/ 应该在https://briteming.github.io/Issue_Blog/2024/12/26/16_test-1 的上面，但是实际上却在其下面。如何纠正这问题？

谢谢回复

文章说过了，静态网站显示的内容自己去修改配置文件，所以推荐把配置完的网站上传到仓库以便自己使用