0%

2025-02-26-22-52-55

20211101_005742_IMB_3iZZzg [hugo-no-render]

一个轻量级MD文档收集博客,不保证阅读性
使用树莓派+hexo构建,定制化next主题,github部署
2023.9.8更新
使用eci容器构建,自制镜像,cdn加速

一些编辑的Tips:
首页文章预览至:

1
<!-- more -->

markdown paste粘图:

1
ctrl+art+a

本站加速域名:https://md.winotmk.com/
正式站:winotmk.com

点击查看更多该网站更新日志

阅读全文 »

语言构成解析

  1. 基础语法
    代码结构 {{ ... }} 属于 Go 模板的标准语法:

    • {{-` 表示删除左侧空白(包括换行符) - `-}} 表示删除右侧空白
    • 逻辑控制:if/else/endrange
  2. 函数调用
    orin 是 Hugo 的内置函数:

    1
    2
    {{ in $alt "[no-render]" }} // 检查字符串包含关系
    {{ or 条件1 条件2 }} // 逻辑"或"操作
  3. 上下文变量
    $alt$title 是 Hugo 在渲染图片时注入的上下文变量:

    • .Destination → 图片 URL
    • .PlainText → 图片的 alt 文本(不含 Markdown 格式)
    • .Title → 图片的 title 属性

文件类型解析

  1. 文件载体
    代码虽然写在 .html 文件中,但实际包含三种语言层:

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- 外层:HTML 静态标记 -->
    <div>
    <!-- 内层:Go 模板逻辑 -->
    {{ if eq .Section "posts" }}
    <!-- 深层:Hugo 扩展函数 -->
    {{ partial "header.html" . }}
    {{ end }}
    </div>
  2. 处理阶段

    阶段 处理内容 输出结果
    模板编译 执行 {{ ... }} 内的逻辑 动态生成 HTML 片段
    客户端渲染 浏览器解析最终 HTML 用户可见的静态页面

技术定位

  1. 模板引擎

    • 基础:Go 标准库的 text/templatehtml/template
    • 扩展:Hugo 增加了 100+ 自定义函数(通过 hugo::tpl 包)
  2. 领域特性

    1
    2
    3
    // 典型的 Hugo 模板函数示例
    {{ partialCached "footer.html" . .Section }} // 局部缓存
    {{ $img := resources.Get "images/header.jpg" | fingerprint }} // 资源处理

类比其他系统

系统 模板语言 语法特征
Hugo Go Template + Hugo 扩展 {{ .Title }}{{ partial }}
Jekyll Liquid {% if post.featured %}...{% endif %}
Vue 模板语法 <div v-if="show">{{ message }}
React JSX {items.map(item => <li>{item}</li>)}

调试技巧

通过 Hugo 的调试方法输出变量值:

1
2
3
4
5
{{/* 输出调试信息到控制台 */}}
{{- printf "%#v" .Title | warnf -}}

{{/* 在 HTML 中直接显示变量 */}}
<pre>{{ jsonify (dict "indent" " ") . }}</pre>

Hugo安装与建立新网站

配置环境变量

在这里下载打包好的二进制文件,单文件很方便
https://github.com/gohugoio/hugo/releases
要注意的是Hugo发行版分3种,标准版,extended扩展版,和代deploy功能的extended扩展版
而Stack需要extended扩展版

下好以后配置环境变量PATH到hugo单文件所在的目录,如果可以hugo version即说明它可以工作啦!

2025-02-24-14-43-28

建立一个新站点和Stack主题安装

https://gohugo.io/getting-started/quick-start/
我是直接新建一个目录到里面打开CMD,然后

1
hugo new site .

就会在本地生成好网站目录
初始化git(因为需要用git子模块来拉主题的库)

1
git init

然后加载子模块

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

主题文档参见:
https://stack.jimmycai.com/guide/getting-started
https://themes.gohugo.io/themes/hugo-theme-stack/

好了,主题的安装文档居然到这里戛然而止了,令人十分费解,前期工作完成后,最后一步启用居然没说,Stack主题发的文档似乎十分希望用户使用这个库来直接开始用主题和hugo:
https://github.com/CaiJimmy/hugo-theme-stack-starter

但我偏不,我不喜欢预制用户用法的做法,我只是希望hugo作为一个生成器,部署要在阿里云OSS上做而不是github pages。

所以摸索了大半天,自己安装的话应当将:
themes\hugo-theme-stack\exampleSite目录下的hugo.yaml文件复制到Hugo根目录并且删除原有的hugo.toml设置文件,注意不是themes\hugo-theme-stack里的config.yaml
如果你想看自带的示例文章可以将themes\hugo-theme-stack\exampleSite下的content覆盖到根目录的同名目录里
之后就可以启动hugo预览了(不加-p参数默认端口为1313)

1
hugo server -D -p 7512

打开浏览器你将会看到:
2025-02-24-15-06-17

恭喜你,开始为博客填内容吧~

按照 https://brew.sh 这里的提示:

1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

装完brew后,敲brew居然不认得,还得我自己配一下
所以:

1
2
3
cd /opt/homebrew/bin/

PATH=$PATH:/opt/homebrew/bin

然后再

1
2
3
4
5
cd ~/

touch .zshrc

echo export PATH=$PATH:/opt/homebrew/bin >> .zshrc

这下就可以用brew啦,我主要是拿来

1
bres install git

安装git
但是神奇的是当我后面再用vim ~/ .zshrc想看看它时却似乎打不开这个文件,难道mac的设置是一次性的生效就删

1. 进入本地仓库目录

打开终端(或 Git Bash),切换到仓库根目录:

1
cd /path/to/your-repo

2. 查看修改状态

检查哪些文件被修改:

1
git status
  • 红色显示的文件表示已修改但未添加到暂存区。

3. 将修改添加到暂存区

添加单个文件:

1
git add 文件名

或添加所有修改的文件:

1
git add .

再次运行 git status,绿色显示的文件表示已添加到暂存区。


4. 提交修改到本地仓库

1
git commit -m "描述你的修改内容(例如:修复登录页面样式问题)"
  • -m 后跟提交信息,需简洁明确(推荐使用英文或中文)。

5. 推送修改到远程仓库

将本地提交推送到远程仓库(默认分支通常是 mainmaster):

1
git push origin 分支名
  • 例如推送到 main 分支:
    1
    git push origin main

6. 验证推送结果

  • 访问远程仓库页面(如 GitHub),检查文件是否更新。
  • 或通过命令查看远程状态:
    1
    2
    git log --oneline  # 查看本地提交记录
    git remote show origin # 检查远程仓库状态

常见问题

  1. 提交后发现漏了文件

    1
    2
    3
    4
    # 继续修改文件,然后再次添加并提交
    git add 漏掉的文件名
    git commit --amend # 合并到上一次提交
    git push -f origin 分支名 # 强制推送(仅限自己的分支)
  2. 推送冲突(多人协作时可能发生):

    1
    git pull origin 分支名  # 先拉取远程最新代码,解决冲突后再推送

默认情况下直接使用 git clone 不会自动克隆子模块(submodule)。子模块信息虽然记录在 .gitmodules 文件中,但其代码需要额外操作才能同步到本地。


如何完整克隆包含子模块的仓库?

方法 1:递归克隆(推荐)

在克隆时添加 --recurse-submodules 参数,一次性递归克隆主仓库和所有子模块

1
git clone --recurse-submodules 仓库URL

方法 2:克隆后初始化子模块

如果已经用普通方式克隆了主仓库,后续可以手动拉取子模块:

1
2
3
4
5
6
7
8
9
10
11
# 进入主仓库目录
cd your-repo

# 初始化子模块配置(从 .gitmodules 读取)
git submodule init

# 拉取子模块代码
git submodule update

# 或者合并成一步:
git submodule update --init

验证子模块

  1. 查看子模块目录是否包含文件(不再是空文件夹):

    1
    ls -la path/to/submodule
  2. 检查子模块状态:

    1
    git submodule status

常见问题

  1. 子模块更新失败

    • 确保子模块的仓库地址可访问(尤其是私有仓库)。
    • 如果子模块本身也有嵌套子模块,使用:
      1
      git submodule update --init --recursive
  2. 切换分支后子模块内容异常
    主仓库切换分支时,子模块可能需要同步更新到对应提交:

    1
    git submodule update --remote

子模块工作原理

  • 主仓库只记录子模块的具体提交哈希,不保存子模块的代码。
  • 子模块是独立的仓库,需要单独拉取和更新。

设置代理

git config –global http.proxy http://127.0.0.1:7080
git config –global https.proxy https://127.0.0.1:7080
取消设置代理
git config –global –unset http.proxy
git config –global –unset https.proxy
可以通过
git config -l
查看设置状态

我要先吐槽一下是真麻烦,以前一年续签一次的免费证书多好,和服务器续费周期一致,一年维护一次就好了,现在搞得像交房租,每季度都要维护,听说Let’s Encrypt上可以发免费证书,然后通过类似Certbot或者httpsok来自动获取和部署,回头再研究了,似乎我用的这种老式虚拟云主机不能整这个,回头想换成容器服务,这官网价格一年500是逼着你转型网站服务器的节奏

获取新的证书

阿里云SSL证书管理
这里点个人测试证书,然后申请域名winotmk.commd.winotmk.com

部署证书

部署全站加速的证书

由于都是一个号里买的阿里云的产品,所以可以一键部署
2025-02-20-21-32-48

部署到别的平台

先下载证书,点更多
2025-02-20-21-41-10

这里选下载tab,下载第一个pem/key格式的证书即可,解压下来会是两个文件
2025-02-20-21-43-04

winotmk.com 是我在新万网买的,所以这里登录后台
www.xinwanwang.com/login.asp
2025-02-20-21-36-55

用他给的管理员账号密码在控制面板里登录
2025-02-20-21-38-38

登录上以后在域名绑定这里选关闭强制http访问再打开,把刚才下载下来的证书密钥文件两个分别复制到对话框里即可完成部署

整了大半天,总算明白GithubAction是怎么用的了,给人感觉其实有那么些像docker,而需要为其写的action规则又像dockerfile或者dockercompose,它们都是去调用一些已经做好的功能/镜像,来按步骤去一步步达成一些事
参考文章:
https://thooooor.github.io/posts/%E8%84%B1%E5%9D%91%E8%AE%B0%E5%BD%95/hugo%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2/
https://kingtuo123.com/posts/hugo-deploy/
https://zhuanlan.zhihu.com/p/367426039

用到的

action:
https://github.com/manyuanrong/setup-ossutil
https://github.com/peaceiris/actions-hugo

hugo和其主题:
https://gohugo.io/getting-started/quick-start/
https://github.com/adityatelange/hugo-PaperMod

当你通过 git push 触发 GitHub Actions 流程时,需要将 Hugo 博客的源代码推送到仓库。以下是具体操作步骤和本地准备:


一、本地准备工作

1. 项目结构要求

你的本地 Hugo 博客项目需要包含以下内容:

1
2
3
4
5
6
your-blog-repo/
├── .github/workflows/deploy.yml # 你的 GitHub Actions 配置文件
├── content/ # 博客文章
├── themes/ # Hugo 主题(通常作为 Git 子模块)
├── config.toml # Hugo 配置文件
└── (其他 Hugo 相关文件)

2. 本地环境配置

  • 安装 Git:确保已安装 Git 并配置好 GitHub 账户。
  • 安装 Hugo(可选):
    建议本地安装 Hugo 用于测试(与 Actions 中版本一致):
    1
    2
    brew install hugo  # macOS
    # 或参考 Hugo 官方文档 https://gohugo.io/installation/

3. 初始化 Git 仓库

1
2
3
cd your-blog-repo
git init
git remote add origin https://github.com/你的用户名/你的仓库名.git

4. 处理子模块(主题)

如果使用了 Hugo 主题(如通过 Git 子模块添加):

1
2
# 示例:添加主题为子模块
git submodule add https://github.com/主题作者/主题仓库.git themes/主题名

确保 .gitmodules 文件已提交。


二、触发 Actions 的 Push 内容

你需要将以下内容推送到 GitHub 仓库:

  1. Hugo 源文件

    • config.toml(Hugo 配置)
    • content/(文章)
    • themes/(主题,通常以子模块形式存在)
    • archetypes/static/ 等其他 Hugo 所需文件
  2. GitHub Actions 配置文件
    确保 .github/workflows/deploy.yml 文件存在于仓库中。

  3. 不包含生成的文件
    不要推送 public/ 目录(Hugo 生成的静态文件会被 Actions 自动构建)。


三、操作流程示例

1. 本地修改并测试

1
2
# 本地生成静态文件测试(可选)
hugo server -D # 启动本地预览

2. 提交代码

1
2
git add .
git commit -m "更新博客内容"

3. 推送到 GitHub

1
git push -u origin main  # 假设主分支是 main

4. 触发 Actions

推送后,到 GitHub 仓库的 Actions 标签页查看运行状态。
若流程成功,阿里云 OSS 的存储桶中会自动出现 public/ 的内容。


四、关键注意事项

  1. 分支匹配
    确保工作流配置中的 push 事件分支(默认所有分支)与你推送的分支一致。
    (若需限制分支,可在配置中指定:on.push.branches: [main]

  2. 密钥安全

    • 阿里云的 OSS_KEY_IDOSS_KEY_SECRET 必须通过 GitHub 仓库的 Settings → Secrets 添加,不要明文写在代码中
  3. 子模块更新
    如果主题子模块有更新,需在本地执行:

    1
    2
    3
    git submodule update --remote --merge
    git add themes/主题名
    git commit -m "更新主题"
  4. 调试失败问题

    • 若 Actions 运行失败,检查日志中的报错信息(如 Hugo 版本冲突、OSS 权限不足等)。
    • 本地可通过 hugo --minify 命令预验证构建是否正常。

五、流程图解

1
2
本地修改博客内容 → 提交并推送 → GitHub 触发 Actions → 自动构建 Hugo → 上传到 OSS
(无需手动操作部署)

通过这种方式,你只需专注于内容创作和本地代码修改,部署过程会完全自动化。

其他

hexo的GithubAction自动部署,用了两个仓库——github.io与hexo项目仓库区分操作
https://hackergavin.com/2024/01/11/hexo-automate-deploy/#%E5%88%9B%E5%BB%BA-Github-Actions-%E8%84%9A%E6%9C%AC

另外一种hexo部署
https://cloud.tencent.com/developer/article/2369534

投影仪侧解码的软件

https://www.zhihu.com/tardis/zm/art/408177850
KODI软件,可以直接这里
https://kodi.tv/download/android/
下载到能直接安装的软件,试了极米的投影可直接装,然后要设置nas的文件目录,从而通过局域网读取视频文件,显然这是通过投影里解码的,卡得飞起,很快就出现了音话不同步的问题

nas解码的软件

群晖自己有video station,有nas内的软件,也提供客户端,还有专为tv提供的软件:
https://www.synology.cn/zh-cn/support/download/DS720+?version=7.2#androids

但是这里的tv版装会出现装完了但是会有看不到图标的问题,多半是因为极影用的安卓并不是安卓tv而是魔改的安卓,所以要使用群晖的这个客户端,要么自己重新编一下
https://blog.csdn.net/hx7013/article/details/103764083

要么下这个改过入口app的软件——DSVideo GO!,配合群晖官方的客户端即可使用!!
http://nasyun.com/thread-63924-1-1.html

泰香辣,24年10月31,入了垂涎已久的macbook air M3,之前买的m1pro的macbookpro给了女票剪视频用了,自己平常用台式还是想入个轻便的本本,然后补贴价格入的,真香真香

现在的mac下截图有Longshot(和win下的snipaste完全平替),vscode也一样的用,svn也很好使,群晖nas上的也很好使,还能iphone投屏了!很适合带到图书馆公司里,开盖就做点东西用,重要的是重量和大小,仿佛一个大号的ipad但是x86pc能做的基本都可以做~

方法一:开SMB文件服务再映射端口

在这里打开SMB

然后在路由器里打开端口转发,需要137-139,445这么几个端口,我是路由拨号已有公网IP

这样的好处就是相对简单,不需要客户端再装软件windows自带即可连接,当然需要NAS有公网IP(或者再做穿透)

缺点:坏处就是,这个几个端口似乎非常不安全,在我转发这几个端口后,可以看到一直有IP尝试钻进来被NAS封,而且如果想要改这几个端口似乎不是那么容易的懒得研究啦

某天在公司忽然死活连不上后(内网还可以访问,说明SMB服务没问题,也许被运营商封端口了?),尝试另一种访问文件的方法

方法二:WeaDAV+RaiDrive客户端

首先NAS上装WeaDAV,设置一下:

路由器里转发这俩端口就可以
然后pc安装RaiDrive这个软件,设置如下:


即可成功挂载一个带盘符的网络驱动器,试了下稳定性还是不错的,速度和SMB无异,用起来也没啥区别
缺点:开机得启动RaiDrive这个软件,而且似乎读不了正确的NAS容量大小(500g是我自己填的)