GithubPage + Hugo白嫖个人博客经验分享

‍

本人第二代博客 零号机 搭建纪实 此文档已完结^{（使用思域笔记完成）}

可作为搭建个人博客参考, 但不保证完全符合需求

搭建于 Apr. 2024 Hugo-ex版本 v0.125.3

(博客版本已经上线 -> GithubPage)
‍

Header

第一代博客: CSDN (旧日文章已废弃)

第二代博客: Github 托管自动化双仓库部署, 无域名完全省心白嫖 GithubPage + Hugo + Stack

‍

‍

配置要求

‍

个人配置

个人PC全套开发环境IDEA(图形化Git工具) + Github(完整关联) + Google等平台账号 + 流畅代理机场 + 50M宽带网络 + 潮湿度高的脑子 + Github/Microsoft学生认证 + 0 Money

‍

最低配置

代理机场, 大概只有这个是刚需, 或者你有流畅访问Github的方法

(没有这个的, 在具体资源下不了的地方找对应镜像手动下载, 这里不提供)

‍

‍

适合对象

‍

你受够了CXXN的无限制广告战吗? 你讨厌Qzonx的糟糕审核吗? 你疲倦于自建服务器的繁琐吗? 你想要白嫖一个可以用来当哔哔空间的博客吗?..

很好, 你被选中了! 请继续往下看…

‍

‍

基础篇

‍

前期工作

‍

目标

‍

双库解耦

一个用来管理整个Hugo生产仓库 - 私有工厂仓库(存放API信息等敏感内容), 一个用来管理Hugo生成内容(Page) - 公有GithubPage仓库

‍

‍

简化流程

Hugo的一次将推送触发开关, 让Github对生成仓库进行自动构建, 更新Page内容 (基础目标)

使用笔记软件的内嵌代码段进一步简化流程(进阶目标)

‍

‍

基本架构

Hugo + Stack theme (Win10)

‍

‍

未来目标

除需要具有基础功能(写文章)外, 可能需要配置阿里云OSS等图床应用, 目前暂时嵌入资源文件(我基本是纯文字, 没有图片的), 可能采用一些简单图床应用

(敬请期待)

‍

‍

要点

• 自动化Hugo编译

  指准备好md文件后, 需要将其移入对应位置后执行命令进行生产(命令行操作)

• 自动化Page仓库操作

  要手动将生成的网页上传到对应仓库

• 简单静态资源管理

  暂时不碍事(个人), 但是未来一定需要, 可以暂时塞到资源文件夹里, 因为我的笔记一般没有插入图片, 有也是引用形式的

• 低维护成本

  经济成本基本为0, 但是要注意心智成本以及本地结构成本, “心智能量币维护费”

• 便携

  存档Github仓库, 换电脑只需要下载仓库, 安装前置工具后即可使用

‍

‍

本地结构

本人首先在专门划定的代码文件夹的Backup文件目录创建Blog子文件夹, 之后在对应子目录Factory​进行Hugo主体的创建

目录不能有中文

‍

‍

工具安装

路径: Chocolatey -> Hugo -> Blog

‍

Chocolatey

‍

Win10平台安装

powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"

安装完毕后开新实例

SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

‍

Hugo

需要Hugo-extended

choco install hugo-extended

验证

hugo version

‍

‍

Git

‍

安装初始化

这里不赘述

‍

公钥绑定

这里不赘述

IDEA这种IDE会帮助设置你的Git的user.name等属性, 平常用着用着就给你配好了, 很省事

‍

‍

验证配置

‍

ssh一下github, 给你鉴权

ssh -T git@github.com

期望返回结果

successfully authenticated

‍

‍

查看git 配置

git config --list

期望返回结果

user.name=SpadeKTLSG
user.email=spadekxcwxtlsg@gmail.com

‍

‍

项目搭建

‍

BlogFactory初始化

‍

进入Bolg目录cmd, 创建BlogFactory私有仓库

hugo new site BlogFactory

‍

这里控制台也有给一些参考路径

Just a few more steps...

1. Change the current directory to D:\CODE\Backup\Blog\BlogFactory.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

‍

进入BlogFactory就能看到目录结构

‍

‍

基础结构

• ​content​ 是博客读取的各类页面所在的目录，包括主页面（主页、关于、存档等这种大类）和博文
• ​layouts​ 博客网站的布局文件
• ​static​ 静态内容
• ​themes​ 用于存放博客主题
• ​config.toml​ 配置文件

‍

初始化当前目录中的空 Git 存储库

git init

‍

安装我选择的Stack主题, 代理我要开TUN模式(Clash)

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

格式, 需要存到目录中的themes文件夹

git submodule add <https> themes/<themename>

‍

启动 Hugo 服务器, 访问 http://localhost:1313/

hugo server

这里显示是空的页面, 因为没有引入theme

快速渲染模式，你在代码中进行的改动，只要一保存，就会直接刷新在站点上

‍

之后, 在BolgFactory的hugo.toml中加入

theme = 'hugo-theme-stack'

就能看到示例页面了, 但是这个配置文件东西还是太少了, 于是直接把themes\hugo-theme-stack\exampleSite​ 文件夹里面的配置文件hugo.yaml拿过来放到根目录, 同时删掉根目录的hugo.toml

‍

现在的<blog>​文件夹里的默认配置文件是hugo.toml​，而一般的exampleSite​里的配置文件一般是config.toml​和config.yaml​，而一个网站只能有一个配置文件，且这三种文件名都是可以的

‍

‍

配置项

基础配置选项, 可以先鼓捣一下

‍

• ​baseurl​ 域名
• ​paginate​ 主页一页显示几篇博文
• ​title​ 博客的主名
• ​languages​ 多语言设置，没错，Hugo 是原生支持多语言的。一般来说，保留中英双语已经很够。本文以中英双语为例讲解。
• ​DefaultContentLanguage​ 博客的默认语言。若设置为中文（zh-cn​），则所有被读取的 index.md​ 都会被认为是中文环境下的内容，英文就会空缺。此时你需要额外创建同名的英文文件，比如 index.en.md​，如此填补位置。
• ​hasCJKLanguage​ 如果默认语言设置为中文，这里应改为 true​
• ​mainSections​ 原本是 post​，对应着 F:\Blog\content\post​ 目录。若这里改，文件夹名也要改，两者是连锁的，否则读不到其中的内容物。
• ​since​ 开始写博客的年份
• ​customText​ 底部的一句个性化说明
• ​published​ 文章发布日期的格式，默认的格式并不方便, 设置成 2006-01-02​
• ​lastUpdated​ 同理可调整为 2006-01-02 15:04 CST​。
• ​emoji​ 头像右下角的状态表情，留空就不显示
• ​subtitle​ 博客副标题
• ​avatar​ 下属的几条，分别是，是否启用、是否在本地、存储路径

‍

‍

前期配置

‍

hugo.yml配置一些基础名字

‍

‍

写作生成页面流程

‍

写文, 别忘了末尾加上md, 不然就会报不知道什么类型​的错

‍

folder = post

hugo new [folder]/FILEname.md

默认是post中才会生效(见配置), 在[folder]对应目录下找到对应文件

设置文件有设置项可设置文章识别位置, 当然不建议改, 后面还有tag这类目录要存放

‍

启动server观察情况, -D表示显示 draft 为 true 的草稿

hugo server -D

‍

观察到结果, 基础写作生成页面流程结束

‍

‍

BlogProduct初始化

新建仓库对应GithubPage, 为了符合规范采用账号命名 + 公开

仓库名

SpadeKTLSG.github.io

‍

生成页面填充仓库

将hugo生成的public/目录下所有文件，剪切到本地仓库进行提交

剪切而不是复制, 原因下面有

‍

‍

部署GithubPage

这个产品仓库(公有)和前面的工厂仓库(私有)都同步Github

命名注意同步可先选分支部署模式(不是Action, 而是手动部署)

‍

选择完提交完, 就能自动部署, 通过站点地址栏能访问, 那么一个基础实例就OK了

‍

链接大概长 -> 演示站点 (spadektlsg.github.io) 这样

‍

‍

‍

自动化赋能

这里主要参考双仓库模式Link, 个人需求提升更多解耦和隐私

也可以选择单仓库双分支模式Link, 那样只有单仓库更方便管理

‍

Github Token

Token用来鉴权管理仓库

到Github开发者设置配置里设置个人令牌 Personal access tokens, 选择 Generate new token

Note中输入名称，在 Select scopes 选择 workflow

‍

我的名称 - 永久 (秘钥名称随意)

BlogFactoryProductAutoKey

选择作用域

更新 GitHub 操作工作流程

‍

生成的token复制保存

XXXXXaXXsssXuXDnXXXX <-假的

‍

回BlogFactory里面设置 -> Secrets -> Action -> repository secret New repository secret​

‍

name部分输入秘钥名称==(将在yml中设置)==, Secret部分输入刚才的个人令牌

我直接用这个命名

PERSONAL_TOKEN

‍

‍

引述博主内容:

​name​​的值不能以GITHUB_​​开头，否则创建会出错

‍

‍

BlogFactory Github Action

用来指定自动配置

‍

在hugo博客根目录下，创建放置Github Action配置文件的目录, 其中创建一个yml文件, 名称随意. 即为Github Action需要的工作流配置文件

.github/workflows/main.yml

‍

引述博主

需要根据自己的情况修改配置参数(原参数不赘述)

Action包含 4 个步骤

1. 拉取代码
2. 准备 hugo 环境
3. 使用 hugo 编译生成静态文件
4. 把生成的静态文件发布到 Github Pages

‍

‍

‍

个人配置参考

‍

‍

重点对象

name --> BlogFactoryBuild 配置名随意

hugo v0.125.3 --> 查看自己版本 hugo version​ 获得

PERSONAL_TOKEN --> 上面的名称, 格式还是这里的 secrets. XXX​

几个master分支名称看仔细了, 很可能和仓库的的main / master / XXX 分支名称不一样. 第一处是Factory仓库的监听分支, 第二处是目标Product发布分支

‍

具体内容可参考Github Action系列文档(附录)

name: BlogFactoryBuild

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-20.04
    steps:
      - name: Check out source
        uses: actions/checkout@v2

      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.125.3"
          extended: true

      - name: Build
        run: hugo

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN}} 
          external_repository: SpadeKTLSG.github.io 
          publish_dir: ./public
          publish_branch: master

‍

简单注释版

name: BlogFactoryBuild # 配置名称

on: # 触发条件
  push: # 推送事件触发
    branches: # 需要在XXX分支
      - master # Factory仓库的master分支


jobs: # 工作流
  build-deploy: # 工作流名称

    runs-on: ubuntu-20.04 # 运行环境(虚拟机)


    steps: # 步骤
      # 拉取代码
      - name: Check out source # 检出源码
        uses: actions/checkout@v2 # 使用"工具"

      # 安装hugo
      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2

        with: # 配置参数
          hugo-version: "0.125.3" # hugo版本
          extended: true # 是否安装扩展版本, yes

      # 构建
      - name: Build
        run: hugo # 执行hugo命令

      # 部署
      - name: Deploy

        uses: peaceiris/actions-gh-pages@v3

        with: # 配置参数

          personal_token: ${{ secrets.PERSONAL_TOKEN }} # GitHub Token
          external_repository: SpadeKTLSG/SpadeKTLSG.github.io # 部署到的仓库, 用户名/仓库名
          publish_dir: ./public # 部署目录
          publish_branch: master # 部署分支

‍

‍

Action Settings

去GithubPage里面设置更新的方式, 需要改为Github Action

‍

在Factory新写一篇文章, 提交更改push

等待奇迹发生…

‍

‍

‍

‍

实操

一些命令与操作记录

‍

‍

CRUD

由于有了附仓库操作, 完全不需要手动进行编译了, 好好好.

我为了本地预览, 没有忽略本地的public

‍

写博客

hugo new post/NaMe

按照模板生成一个博客md文件

‍

脚本(+)

参考

‍

我简化了实现, 只要求输入文章, 其他不动

@echo off
echo [create one blog in post/XXX/Name]
set /p input= 请输入标题, 如果存放到对应文件夹下, 可输入"media/Name"
hugo new post/%input%.md
pause

‍

‍

脚本写类别(+)

参考

‍

‍

脚本写标签(+)

参考

‍

‍

‍

‍

删博客

直接删, 不用管

一般是要去清理下public防止垃圾片段影响, 但是见下文脚本清理

‍

‍

改博客

VSCODE 或 笔记软件导入后修改导出覆盖, 见下文移花接木

一般是new post/完后复制黏贴到里面, 但是有时候文章很长就很麻烦, 于是移花接木操作

‍

‍

手动编译预览(×)

hugo

但是这并不会 删除之前生成的文件, 因此如果进行了删除请清空一次目录再完整编译^{（官网建议）}

预览(带草稿)

hugo server -D

‍

脚本编译预览(√)

见下文脚本预览, 双击脚本即可查看

这里是完整版

@echo off
echo [清理/public, 完整构建, 预览启动]

del /s /q ".\public\*"
for /d %%x in (.\public\*) do rd /s /q "%%x"

echo [清理残余/public完毕]
start  http://localhost:1313/
hugo
echo [hugo 完整构建完毕]
hugo server -D
echo [hugo 预览启动]

pause

‍

‍

手动发布(×)

public内文件复制到对应GithubPage仓库进行Commit + Push, 触发一次自动构建Page(可以查看进度)

‍

自动发布(√)

Action联动双库

使用上述自动化流程后, 直接IDEA无脑全选提交并推送, 坐等发布即可

‍

‍

图片操作

‍

图片放入 static​ 目录下

Markdown 文件中以 /XXX.jpg​ 的路径引用

Hugo 会自动在图片路径前追加 static​ 的路径

为了区分开不同文章的用图，还可以在 static​ 下新建子目录

![XXX](/AAA/XXX.jpg)

我也不经常插入图片, 如果有也是用图床比较好, 方便后续引用, 不然就和这个地方强绑定了

‍

示例

图片在static/sys/Good.png, 引用方法是

![testPic](/sys/Good.png)

‍

‍

Markdown操作

.md操作不赘述, 见个人其他文档

‍

‍

注意

‍

‍

• 生成md文章后不要动它们的基本层级(md文件的命名和位置), 不然会出乱子
• ‍

‍

‍

提高篇

‍

‍

页面美化

官方手册指路

配置主题 | Hugo 主题 Stack (stack-docs.netlify.app)

‍

标签

暂时没需要

‍

‍

代码高亮

配置文件直接加, 高亮主题可去 Chroma Playground 找

# 代码高亮

highlight:
  style: github

‍

字数统计

暂时不需要, 简单黏贴了一点代码凑合着用

‍

‍

稳定运行字段

见博主Link

‍

‍

返回顶部

未来

‍

系统原理

‍

模板

引用

用 hugo 来new而不能手动创建一个 .md​ 文件, 这是因为使用 hugo 创建会自动使用已填入 Front Matter​的模板

​Front Matter​ 用于标识文章的标题、时间等信息，hugo 就是据此来生成静态页面。关于属性的含义和用法可以参考 Hugo 中文文档。

模板可以在 \archetypes\default.md​ 下找到

‍

---

title: "{{ replace .Name "-" " " | title }}" # 标题，创建时自动填充
description: # 文章简介
date: {{ .Date }} # 日期，创建时自动填充，格式同2023-01-15T12:00:00+08:00
image: # 文章的封面，留空就是没有，填文章所在位置的相对地址，通常放在同目录下，
math: # 是否启用KaTex，填true启用
license: # 文章尾部显示的协议，false为隐藏，其他作为内容，留空就是使用config.yaml里默认的
hidden: false # 是否隐藏，一般用不到
comments: true # 因为bug所以这个属性只要存在，不管是true还是false都会导致回复无法显示，需要删掉
draft: true # 是否为草稿，建议改为false或者删掉这个属性以防止忘记修改

---

‍

---

default

我将draft改为false, 加一个image就可以了

+++
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
date = {{ .Date }}
image = '/sys/defaultPage.png'
draft = false
+++

如上, 这样也能使文章能带有图片头(放在static内分好目录, 按目录层级引用)

‍

categories + tags

有问题, 暂时不需要, 不做了

‍

‍

‍

‍

域名装配

我暂时不想用其他域名, 虽然访问速度在身边人里基本是0, 但是这样也隔离掉一些别有用心的家伙. 就用Github也不用上防护措施了

但是我确实在之前的日子里想要使用一下不需要付费的白嫖域名试试, 因为大多数是1年期限, 所有当时不想用. 现在正是用兵之时. 于是就开始鼓捣了

‍

‍

失败Github认证踩坑记录

题外话…

‍

Github认证 - 域名资源类列表

Name.com:一年任意域名免费,SSL证书和隐私保护.

Namecheap:一年.me域名免费,SSL证书.

.TECH:一年.tech域名免费.

‍

freenom

免费域名一直没有我的, 因此放弃. 其他两家注册太麻烦了, 于是直接用namecheap

‍

Name.com

我试试填中国的地址行不行. 前面都好, 要付款时候自己银行卡遇到问题了, 因为自己只有一个可怜的农行储蓄卡, Google说不支持, 于是网站认证, 结果卡住了. 于是找找GooglePay能不能给我走点后门…也不行只让美丽国人和汉斯用, 那我只能试试找其他人借一张没用的银行卡了, 尝试把谷歌支付搞定

借了父亲的银联银行卡也不行, 原来绑卡需要的条件太苛刻了, 散了散了

‍

Namecheap

又是烦人的这个东西: 大学不得到认可

‍

我即使是死了，钉在棺材里了，也要在墓里，用这腐朽的声带喊出–

                                                      XX带砖怎么了你?

‍

我记得去年11月也是这样: 就算连接了github, 它也是无法连接到我的主账号邮箱, 明明都是一样的! 太凎了

It looks like your email is not associated with an eligible university

‍

‍

.TECH

‍

全程不到3分钟, 直接到手, 不需要支付, 认证非常快

拿到手了, 控制台很简陋, 可以配置DNS什么的. 按下不表

spadektlsg.tech

‍

那么关于域名的探索就暂时存档到这里, 没有白嫖的不要了

被前面的域名拷打了之后, 立刻就到手的这玩意让我大为惊喜, 但后来发现要到了还不如不要, 浪费时间在那个就是一个草台玩意的控制面板…各种连接CloudFlare失败

‍

域名配置

未来, 并且是遥远的未来

主要是图省事罢

‍

‍

功能模块

‍

评论

选择Giscus, 这个在Stack支持列表里面有

官方文档 - 即时生成对应配置

‍

引用

由 GitHub Discussions​ 驱动的评论系统，与GitHub Pages​有非常好的天然联结

• 开源
• 无跟踪，无广告，永久免费
• 无需数据库。全部数据均储存在 GitHub Discussions​ 中
• 支持自定义主题
• 支持多种语言
• 高度可配置
• 自动从 GitHub​ 拉取新评论与编辑
• 可自建服务

‍

配置项目里可以看到基础的结构

  comments:
    enabled: true # Enable comments globally
    provider: giscus

    giscus:
      repo:
      repoID:
      category:
      categoryID:
      mapping:
      lightTheme:
      darkTheme:
      reactionsEnabled: 1
      emitMetadata: 0

‍

官方文档

运作

giscus 加载时，会使用 GitHub Discussions 搜索 API 根据选定的映射方式（如 URL、pathname​、<title>​ 等）来查找与当前页面关联的 discussion。如果找不到匹配的 discussion，giscus bot 就会在第一次有人留下评论或回应时自动创建一个 discussion。

访客如果想要评论，必须按照 GitHub OAuth 流程授权 giscus app 代表他发布，或者可以直接在 GitHub Discussion 里评论。你可以在 GitHub 上管理评论。

‍

‍

注意

选择 giscus 连接到的仓库。请确保：

1. 该仓库是​**公开的**，否则访客将无法查看 discussion。
2. giscus app 已安装，否则访客将无法评论和回应。
3. Discussions 功能已在你的仓库中启用。

‍

流程

按照官方配置, 先开启discuss(设置面板往下拉), 再安装giscus(直接链接跳转), 显示成功！该仓库满足所有条件 ​则说明完成

复制下方的片段, 稍加修改复制入配置文件

        data-repo="SpadeKTLSG/SpadeKTLSG.github.io"
        data-repo-id="XXX"
        data-category="Announcements"
        data-category-id="XXX"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="light"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"

‍

我的测试完成的结果

  comments:
    enabled: true # Enable comments globally
    provider: giscus

    giscus:
      repo: SpadeKTLSG/SpadeKTLSG.github.io
      repoID: R_kgDOLz5uXQ
      category: Announcements
      categoryID: DIC_kwDOLz5uXc4Ce_BV
      mapping: pathname
      lightTheme: 1
      darkTheme: 1
      reactionsEnabled: 1
      emitMetadata: 0

‍

搜索

文章很少, 不搞了

选用Github Gist for Fuse.js integration

只需要增加一些文件和修改config.toml中的output格式

具体参考引用: 博主Link, 这里只记录我的操作流程

‍

添加文件

在hugo项目根目录添加4个文件：content/search.md​,layouts/_default/search.html​, static/js/search.js​,layouts/_default/index.json​

这种带有目录层级的文件搭建, 可以选用命令行, 不用的话可以用IDE实现, 例如IDEA/VSCODE这类都可

‍

修改配置文件

我的是从主题配置文件里抓下来的hugo.yaml, 因此格式不太一样, 需要自行转换 - YAML to TOML (transform.tools)

‍

添加以下内容

已经存在 [outputs]​这项，就在home​中增加"JSON"​格式

[outputs]
home = ["HTML", "RSS", "JSON"]

outputs:
  home:
    - HTML
    - RSS
    - JSON

余下见博主文章

‍

‍

‍

访问统计

没什么人看, 不搞

‍

‍

链接

社交链接, 友链等

在配置文件里找到

menu:
  social:

mailto链接

‍

‍

‍

‍

资源管理

‍

‍

图标

参考Link

‍

‍

网上下载中意的图标后放到图标文件夹, 例如素材库

然后放到assets/icon就可以用了

‍

‍

上游下游

‍

笔记软件

‍

笔记软件自动化

具体参考其他博主的实例, 笔记软件可进一步简化从笔记软件写完文章之后到将md文档放入到hugo -> post/里面的效率, 实现自动化

(内嵌js等内容)

‍

我暂时不需要, 因为我都是统一导出md操作, 并且希望留下中间产物发布其他地方的, 大部分文章也暂时不打算在博客发. 于是这个操作就有点不实用了

‍

‍

博客管理客户端

指类似Github Desktop这种简化封装的博客应用, 适合摆烂… 我暂时不用

Gridea | 一个静态博客写作客户端

‍

就好像面试官问你: 你平常操作Git, 是图形化界面多一点还是命令行多一点? 你肯定得回答: 我用命令行, 并且很熟练 (然后被拷打致死, 乐)

‍

‍

流量

写博客是拿来干什么的? 拿来给人看! 嗨, 还真就这么一回事, 写完的文章确实就放那太不好了. 可是确实没人看啊 😭

‍

我选择暂时无线电静默, 先把复活赛打赢了再说

关于我的"复活赛"是什么, 如果你好奇, 请继续寻找线索

‍

‍

‍

‍

附录

‍

‍

二回熟

我拿到了一台新电脑…工作环境和旧电脑完完全全相同(本人见另一篇博客 - PC主力机选择)

‍

Chocolatey重来!

powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"

安装完毕后开新实例

SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

‍

Hugo重来!

需要Hugo-extended

choco install hugo-extended

hugo version

‍

Factory pull local

IDEA图形化界面, 直接拉到二仙桥

‍

‍

之后就是和上面一样操作了. 爽!

‍

‍

踩坑

本人悲惨踩坑记录, 包括初号机内容(未公开 但是零号机文档已经包含其全部内容)

‍

‍

注意自动化脚本分支名称

由于前一天的失败经历, 前面基础搭建流程还算顺利, 但是在自动化编辑文档时候看花了眼, 忘记自己的主分支都是master, 博主所用的是main, 花了1个小时调试才找到这个问题(平时都把main和master混用的后果, 被拷打了)

‍

注意gitignore

不要自作聪明把本地编译出来的public文件添加到忽略列表里, 否则自动生成的GithubPage啥都没有, 只有搞笑的XML页面

‍

收手吧阿伟

博客美化什么是次要的, 内容才是第一的, 搭建到提高篇前面我花了8h(从0开始, 算上之前的失败经历), 也许是太慢了. (因为找域名花了很久)

‍

设置文件配置

几个关键点小心再小心, 需要改的地方都指出来了

‍

删除文件后需要刷新一次

额外执行一次

hugo

再上传

‍

Toml <-> Yml 转化

本人后端牛马, 这个用的挺少, 不懂手撕, 于是常备转换器… 不然报错多的头皮发麻

‍

系统CMD控制台需要开全局代理 + TUN模式才能稳定下载

反正我开全局还不够, 系统代理这里好像没有用, 要开TUN

当时8KB/s 一边哭一边下, 一边哭一边下, 就是不肯退

‍

记得修改(魔改)配置之前提交

照着博主的内容魔改html前端的东西, 后端牛马可谓是对牛弹琴了, 改完了也不知道哪里错了, 这个时候才想起来忘记commit了, 或者是删除中间文件了, 就很难受

‍

暂时实现不了的别硬实现(摆), 下次再来

Tag和Categories实现失败, 不搞了, 反而在搞的时候触发了其他地方代码, 导致错误混杂无法定位了

真丢人哇, 下次一定 : (

‍

‍

成果

引述博主:

GitHub Action，按工作流的配置自动生成静态页面文件，并推送到GitHub Pages仓库。而 GitHub Pages 仓库更新后，又会自动触发官方页面部署 CI，实现网站的自动发布

就是自动化操作

‍

流程综合

哪怕用Github完成Action部署, 但还真是, 体力活. 于是想法子把流程简化下

这部分基础篇提高篇通用, 于是移到附录

‍

‍

移花接木式导入文章

个人情况, 默认文章很大不方便在笔记软件或IDEA中展示

通过思源(我的笔记软件)写了一篇文章, 准备好了选择导出为md. 导出成功后鼠标移动到通知上在文件夹打开

复制其名称

之后打开IDEA, 在IDEA内置cmd中

hugo new post/名称

留在IDEA中找到对应文件, 复制其预生成内容

双击导出的md文件(默认用VSCODE打开), 预生成内容黏贴到导出的md的头部

完成嵌入的自己文档直接拖拽到IDEA里面覆盖

IDEA commit & push, 提交并推送

‍

(差不多20s)

喝口水, 打开页面, 砰!好了

‍

‍

‍

脚本打包预览实现

如果要预览一下, 控制台还是很繁琐的, 于是借鉴了博主的批处理脚本程序

根目录创建preview.bat

@echo off
echo 【preview ur blog】
start  http://localhost:1313/
hugo server
pause

‍

同样我进行了优化, 创建了previewBest.bat, 用来一并查看草稿, 还创建了一键清理public + hugo + hugo server预览的流程

‍

但他们可能在IDEA等IDE中无法正常运行, 例如其没有提供bat支持, Intellij IDEA我装了插件Batch Scripts Support, 再加上Idea我配置的启动快捷键, Alt + V直接运行脚本, 自动清理public, 重新打包预览避免残留文件问题. 同时将浏览器类型留空, 即替换为默认浏览器

于是我的最终配置 cleanBuildViewAll.bat 诞生!

@echo off
echo 【del all temp res in /public then preview ur blog with drafts show】

del /s /q ".\public\*"
for /d %%x in (.\public\*) do rd /s /q "%%x"
start  http://localhost:1313/
hugo server -D

pause

‍

美化后

@echo off
echo [清理/public, 完整构建, 预览启动]

del /s /q ".\public\*"
for /d %%x in (.\public\*) do rd /s /q "%%x"

echo [清理残余/public完毕]
start  http://localhost:1313/
hugo
echo [hugo 完整构建完毕]
hugo server -D
echo [hugo 预览启动]

pause

‍

‍

普通加强式导入文章

由上面所有基础篇高级篇内容整合, 现在写文到发布经历过程:

(假设需要的文章已经导出为md躺着了)

1. 打开IDEA, 定位项目 (单击Win, 单击IDEA, 单击最近项目) * 3
2. 脚本右键(双击运行) 写文, 输入标题目录 (平均敲键盘10下) * 12
3. 复制写完文章的md内容到生成的文章, * 4
4. 检查丢失的本地资源文件手动嵌入 (!) (体力活, 还好我从不在笔记里插入本地图片, 都是超链接) * N
5. 觉得差不多了, 脚本右键(双击运行) 运行, 查看 (自动打开页面, 浏览点击几次鼠标即可) * 2
6. 关闭浏览器, IDEA图形化提交点几下提交并推送 (单击 “提交”, 单击 “全选”, 单击"提交并推送", 单击"确定") * 4
7. 20s - 30s后打开页面, 看一眼跑路 *1

‍

共计单击键盘鼠标 25 + N 次

‍

所以…?

太不直观了…得想想办法变换一下这个概念

‍

等价交换^{（偷换概念）}:

• 让手机开始计时, 连续单击某经常坏的蓝牙静音鼠标左键达到28次停止, 平均时间约为5.3s

• 打开赛博朋克2077, 植入螳螂刀 + Hunter式飞扑击杀一只杂兵需要

  W + shift冲刺 + ctrl突进 + space * 2 + 空中俯冲突进 + 左键蓄力放松螳螂刀坠击 + F斩杀 = 8次点击
  

  也就是等于4个杂兵的生命

‍

于是经过优化的发送博客的时间成本就 == 5.3s的连续单击 == 4个杂兵, hmmm可以接受, 可以接受

‍

以上纯为扯淡, 总之我都是存着一段时间后再一起发, 那个时间段价值不高, 因此我不怎么在乎10s - 60s的差别, 能发就好, 能发就好(摆)

‍

‍

工作环境

本地只需要下载一个BlogFactory仓库, 无需使用BlogProduct仓库(自动配置)

说走就走, 仓库根目录留下这篇文档, 啥时候忘了就拿出来查查…

‍

‍

学到了什么

个人感受

激动之情溢于言表, 让我冷静几天再来…

‍

‍

‍

引用

所有借鉴内容, 部分在正文有明确提及, 统一表示感谢!

‍

基础篇

• 快速入门 | Hugo官方文档 (opendocs.io)
• 如何在 Windows 系统从零开始构建一个和我一样的 Hugo 博客 (zexwoo.blog)
• 无需付费 GitHub Pages，轻松搭建个人博客 - 掘金 (juejin.cn)
• 用Github和Cloudflare自建博客 - 掘金 (juejin.cn)
• 怎么利用 GitHub 绑定域名来做一个网站？ « 复网问答 (fuyeor.com)
• GitHub学生包白嫖Jetbrains全家桶等权益(福利) - 糖果梦博客 (xiaoma.cool)
• GitHub Student Developer Pack - GitHub Education
• Hugo 博客写作最佳实践 - 知乎 (zhihu.com)
• 建站第九篇 Hugo+Github Pages+Github Action博客方案之一——使用Hugo搭建个人博客 | DD299的博客 | DD299 Blog (goodfun.me) (三部曲) + 合集 Hugo | DD299的博客 | DD299 Blog (goodfun.me)
• 使用 Hugo + Github 搭建个人博客 - 知乎 (zhihu.com)
• 从零开始的 Hugo 博客搭建 - 知乎 (zhihu.com)
• 在github.io用hugo部署个人博客，2023新教程 - 知乎 (zhihu.com)
• GitHub Actions入门教程-自动部署静态博客 - 知乎 (zhihu.com) 可以看看Github Action

‍

提高篇

• 建站第十二篇 Hugo博客使用giscus作为评论系统 | DD299的博客 | DD299 Blog (goodfun.me)
• 用 Hugo 重新搭建博客 - 炸鸡人博客 (zhajiman.github.io)
• CaiJimmy/hugo-theme-stack: Card-style Hugo theme designed for bloggers (github.com)
• 介绍 | Hugo 主题 Stack (stack-docs.netlify.app) hugo 主题 stack 手册
• 建站技术 | 使用 Hugo+Stack 简单搭建一个博客 (reincarnatey.net)
• Hugo Stack主题装修笔记 (thirdshire.com)
• 使用 Hugo 对博客的重建与 Stack 主题优化记录 (oxidane-uni.github.io)
• Blog养成记(4) Hugo中增加tags等分类 | ZHENG Zi'ou (orianna-zzo.github.io)

‍

‍

‍

日志

‍

2024-04-25

从2023.4月宣布要有一个个人博客彻底抛弃Qzone后的一年余, 正式对宿敌发起的总攻! 我这一年沉淀的功力, 挡得住吗?

两个小时后, 被GIthub学生认证给的几个免费域名拷打, 不是这个问题就是那个问题; 又一小时后, 文档借鉴错了, 脑子红温了不懂怎么写文章, 还配置错了, 把随便一个自动化配置加进来, 真就一团乱麻, 感到羞愧万分迅速删库跑路了

‍

2024-04-26

竟然被挡住了, 乐

但是我可是不屈不挠的呢, 喝!

‍

2024-04-27

第二天早上醒来后深刻的反省了, 一日干完…?

‍

2024-04-28

怎么今天还在干这个啊, 自己的屎山清理了吗? 作业写了吗? 有没有认真工作?

不干了, 导出然后发博客收摊…

‍

战役总览

• 2023.Apr 宣布, 我想要一个博客
• 2024-3-18 开始博客支配事态
• 2024-04-27 15:54:24 制作完基础篇草稿
• 2024-04-27 18:00:00 制作完提高篇草稿
• 2024-04-27 21:57:10 完结
• 2024-04-28 润色, 发布, 存档
• 2024-04-28 20:18:55 导入其他文章
• 2024-04-29 删库跑路予定