hugo 博客系列 ✨

今天早上无聊闲逛，看到有不少人是从我的 Obsidian + Hugo 系列，开始了解原来 Obsidian 和 Hugo 还可以这么搭配的。 但是不少人反馈，根据 Hugo 博客写作最佳实践 和 Obsidian + Hugo 最佳配置推荐 这两篇文章操作起来感觉确实方便了，但是方便的不多。整个流程没有非常流畅。甚至感觉有些流程设计的过于繁琐。 不否认，确实是这种感觉，问题在我。 实际上这是我设计的一整套流程，但这两篇博客只讲了关键的一部分，还有一些细枝末节没有讲出来。 所以我临时决定再增加一篇文章说明，把整套流程讲清楚。担心表达能力欠佳，我还录了视频辅助大家理解。 中心思想 整个流程设计的中心思想就是：解决繁琐的操作流程，把操作自动化+高度集中，解放思想，精力都用在写作上。 管理面板 在 Obsidian 的诸多插件的加持下，最终实现所有管理功能集成在一个管理中心，效果如下： 上图中的内容共分为几部分： 统计图，这里只根据发布情况做了发布占比统计，大家完全可以根据自己的需求设计更美观实用的统计图表 操作按钮+笔记：共集成了三个操作按钮，点击新建博客按钮可以根据模板自动创建一篇空白文章；点击发布博客按钮可以把博客内容自动推送到 github，从而触发 github action 自动部署流程；点击获取更新按钮可以从github上同步最新的仓库内容。 草稿箱：使用 dataview 插件，把草稿内容列举出来，归集为草稿箱，直接点击对应草稿便可以开始编辑内容 已发布：把所有已经发布的内容列举出来，方便查看 视频演示 以下视频演示了整个 新建 -> 写作 -> 发布 流程，一刀未剪 技术细节 接下来说一下技术细节。说实话，这里其实并没有太多技术细节，只是一层窗户纸罢了，只要一捅破，大家瞬间就明白了，看到这里应该有很多人已经可以明白实现原理了。 基于 Hugo 博客写作最佳实践 这篇文章，我们可以通过 QuickAdd 插件实现各种自动化命令，在此基础上，只需要增加一个 Buttons 插件，便可以把命令通过点击按钮的方式进行调用。 Buttons 插件安装完成之后，在首页添加如下代码： 新建博客按钮代码 发布博客按钮代码 获取更新按钮代码 总结 以上就是全部内容了，没有什么高深的技术内容，都是一些插件运用的技巧。 有了这个管理面板之后，你是不是可以把精力全部放在写作上了呢？...

静态博客的出现，革了后端的命，极大的简化了搭建环节。但是与此同时，在写作方式上，更加依赖第三方编辑器，能否找到一个合适的编辑器成了大多数人能否坚持使用下去的源动力。本文基于 Hugo 静态博客推荐个人认为最优的编辑器 Obsidian。 Obsidian 是一款非常优秀的双链笔记编辑器。其最主要亮点功能是通过双链构建知识网络。具有完备的编辑器、强大的命令工具以及众多优秀的插件。 关于 Obsidian 的相关配置方案可以参考上一篇文章《 Hugo 博客写作最佳实践 》，在文章中，介绍了如何通过 QuickAdd 插件快速创建一篇博文，以及如何快速编写发布文章，其中还包括如何进行静态资源同步上传图床以及外链回写的实现。 本文主要介绍在实现上文的工作流的基础上，一些写作最佳实践。 1.美观 写作是一个长期的行为，在写作过程中需要一直面对编辑器进行构思，编写，排版，调整。所以，一个符合个人审美的编辑器尤为重要。 Obsidian 编辑器本身作为一个颜值在线的编辑器，已经具备了很高的颜值起点。而且如果对官方主题不满意的话，可以在设置中的外观菜单项里打开主题管理功能，在主题社区中选择符合个人需求的主题进行替换。 除此之外，我们还可以通过自定义 CSS 代码片段对部分展示效果进行调整。这里提供修改编辑器字体的样例。 在外观选项中点击文件夹图标打开 CSS 代码片段目录 在打开的目录中新建文件 字体修改.css 并在文件中输入如下内容。 .view-content div.cm-line,.cm-string { font-family: "仿宋" !important; } .markdown-preview-section { font-family: "仿宋" !important; } 效果如下： 2.方便 基于当前的工作流程，在 Obsidian 中我们已经可以完成从创建到编写到发布所有工作。但是这还不够，既然使用了 Obsidian，我们虽然没办法使用其丰富的 markdown 语法。但是不耽误享受其丰富的插件系统带来的种种便利。 这里推荐另外两个插件 homepage 和 dataview homepage 允许 Obsidian 在打开之后显示默认笔记页面作为仪表面板 dataview 是 Obsidian 众多插件中，构建索引的王者。 通过 homepage ，可以设定一个页面作为 Obsidian 打开之后的默认主仪表面板。在上篇文章中，创建了 obs_scripts 目录用来存储创建文章的脚本。本文复用该目录，在其中创建一篇名叫 主面板 的笔记。...

如今，如果你仅仅为了更好的分享或者记录东西，想做一个博客；静态博客几乎是最好的选择。不需要太多的技术含量，网上有大把的教程，不需要花钱买服务器，甚至不需要花钱买域名。 这篇文章是在使用 hugo 将博客搭建起来的基础上，摸索出来的一套写作流程。可有最大程度上简化除了写作之外的流程。 🏖️前提 这篇文章的前提是你已经通过 hugo 和 github 搭建起来一个可以访问的 Github Pages 主页。如果尚未完成这个步骤，建议通过其他教程先做到这一步。 🤣当前痛点 在当前的流程中，假如你需要新建一篇文章并发布，大体流程如下： 打开命令行工具，切换到博客目录下，执行 hugo new posts/newarticle.md 创建一个新页面 构思编写文章，如果中途需要贴图片，需要先将图片拷贝到指定静态资源目录下或者上传到图床并复制外链到剪贴板，然后在文章中通过图片引入语法添加图片。 文章写完之后，再次打开命令行工具，切换到博客目录下，执行 hugo -D 编译静态网站文件。 通过 git 命令行或者图形话工具，将更新上传至 Github 仓库中。完成！ 以上便是发布一篇文章的基础工作，其中最麻烦便是图片资源的管理以及来回切换工具操作。 ☝️如何解决 1. 自动编译 首要解决的问题是如何才能不需要每次手动编译之后再上传。这也是最好解决的部分。我们可以搭配 Github Actions 使仓库在更新的时候自动编译部署。 Github Actions 是 Github 提供的一套持续集成服务。 操作流程： 在仓库的根目录新建 .github/workfolws 目录 在 .gitub/workflows 目录中新建流程配置文件 main.yml 在 main.yml 中配置每当监听到仓库提交更新，就触发编译，并将编译后的静态网页部署在 gh-pages 分支。 文件目录如下： 配置内容如下： name: blog deploy pipline on: push: tags: - '*' branches: [ main ] env: REGISTRY: ghcr....