Hugo

  • Published on
    https://github.com/timlrx/tailwind-nextjs-starter-blog https://github.com/timlrx/pliny <TOCInline toc={props.toc} asDisclosure /> ## migration repo ```shell git checkout -b hugo git push origin hugo git branch -D main git checkout --orphan main rm -rf ./* rm -rf .forestry .gitignore .gitmodules cp -rav ~/repo/blog/nextjs-ttys3.dev/* . ...
  • Published on
    PlantUML 是最近才了解到的, 实际上这个东西存在已经很多年了. 之前有用过 mermaid, 但是 mermaid 的 flowchart 写起来很蛋疼. PlantUML 的 activity diagram 对多行文本和 note 支持更好, 同时不用写太多的箭头和 A, B, C 这种标记. mermaid 要支持多行文本, 当前只能用 `foo1<br/>foo2<br/>foo3` 的方式. 另一方面, A, B, C 这种标记, 当你突然想在中间插入一个的时候, 就会很蛋疼. ## 添加到 Hugo 模板 这里我并没有采用 Front Matter 参数的方式来确定是否加载 plantuml-encoder js 文件, 因此老灯觉得这样太麻烦. ...
  • Published on
    | 对比项 | Hugo | Zola | |-----------------|----------------------|--------------------------| | 实现语言 | Golang | Rust | | 主题数量 | 丰富 | 较少 | | 模板引擎 | Go Template | Tera | ...
  • Published on
    giscus: A comments system powered by [GitHub Discussions](https://docs.github.com/en/discussions) 老灯之前用的是 utteranc.es, 这个是基于 Github issue 功能实现的. giscus 是基于 discussion, 简单试用了一下, 最明显的区别回复的功能吧. 可以直接在某个评论下面回复. 第二就是支持reaction. ![](giscus-2022-07-25_00-35.png) 新建一个专门的仓库用来做评论用即可. 具体做法很简单: Choose the repository giscus will connect to. Make sure that: ...
  • Published on
    其实我用这个标签,主要是给分享到 twitter 的时候能够让 twitter 自动抓取时生成的 card 带有缩略图。 bookmarklet 也一并分享一下吧: ```javascript javascript:(function(){var D=640,A=480,C=screen.height,B=screen.width,H=Math.round((B/2)-(D/2)),G=0,F=document,url,text; if(C>A){G=Math.round((C/2)-(A/2))}; url=encodeURIComponent(window.location); text=encodeURIComponent(window.getSelection?window.getSelection().toString():(document.selection?document.selection.createRange().text:'')); if(text==''){ window.alert('Please, select text on the page first');}else{ window.open('http://twitter.com/share?url='+url+'&text='+text,'','left='+H+',top='+G+',width='+D+',height='+A+',personalbar=0,toolbar=0,scrollbars=1,resizable=1');}}()); ...
  • Published on
    ## 功能介绍 对于主题的 params 配置,之前版本的 Hugo 只支持浅合并(shallow merge),举例来说: 假设主题有一个配置 ```toml [params] [params.colours] blue="#337DFF" green="#68FF33" red="#FF3358" ``` 如果是之前版本的 Hugo, 你要调整其中一个配置,比如 `red` 的颜色,你需要 copy 整个 `colours` 配置,然后把 `red` 修改成你想要的值。 现在你可以在站点配置里这样简单地进行覆盖: ```toml [params] [params.colours] red="#fc0f03" ``` ## 默认合并策略 ...
  • Published on
    首先,看下效果,就是下面这样(RSS 订阅用户可能看不到效果,请点击查看原文): ``` {{< mermaid >}} sequenceDiagram participant Alice participant Bob Alice->>John: Hello John, how are you? loop Healthcheck John->John: Fight against hypochondria end Note right of John: Rational thoughts prevail... John-->Alice: Great! ...
  • Published on
    之前一直用的是 Hugo 默认的 permalink 配置. 如 `content/post/linux/commandlinefu/how-to-start-tmux-as-systemd-user-service/index.md` 将会生成 `/post/linux/commandlinefu/how-to-start-tmux-as-systemd-user-service/` 的 URL path. 最近我越来越发现这样的链接过度复杂了,干脆直接调整成 `/post/:filename/` 。 于是 `/post/linux/commandlinefu/how-to-start-tmux-as-systemd-user-service/` 变成了 `/post/how-to-start-tmux-as-systemd-user-service/` 。 ...
  • Published on
    集成 Algolia 后,最简单无脑的更新索引方式就是每次构建后由 Netlify 触发 webhook 通知 Algolia 自动抓取。 这也就是 Algolia Crawler for Netlify 干的活。 但是老灯使用一段时间后发现存在一些问题: 1. 每发一篇博客,甚至可能是只改动了一个字就要触发全量索引 (git push 触发了 Netlify CI CD -> webhook -> Algolia Crawler 干活 -> 抓取全站 URL 并索引)。一是浪费资源,二是低低效(速度慢)。 2. 很多不需要索引的页面也被索引进去了,比如 tags 和 categories 的分页列表页面。我博客总共才70篇文章不到,索引后的页面居然有300多! ...
  • Published on
    ## 为什么需要 Netlify CMS Netlify CMS 主要是解决了,随时随地打开浏览器写markdown博客的问题,同时它自动处理了图片上传等问题。 简单来说: > Netlify CMS = web 版的 markdown 文件管理器 + 自动图片上传并插入markdown代码 + 在web浏览器写markdown并自动推送到git仓库构建 .... 编辑器可以在富文本(所见即所得)和 Markdown 方式之间切换。 Markdown模式没有语法高亮显示,编辑起来略不方便。同时,切到 Markdown编辑模式后,编辑器的那些按钮都变灰不可用了。 Netlify CMS 只是附加功能,你完全可以在本地直接打开 NeoVim 或者 Emacs 写博客,然后用 Git push 发布文章。 ...
  • Published on
    有人看过我的博客后觉得主题的配色有些过于闪亮。 而`terminal`这个主题里,我选取的还是唯一不那么“闪”的`orange`颜色。于是我按自己的想法,调整了一下默认`orange`方案的配色。 现在博客应该看起来舒服一些了。 原版配色: ![hugo-terminal-theme-orig-color.png](hugo-terminal-theme-orig-color.png) 同时,顶部加上了一个小banner背景图, 毕竟一个博客没有一张图片,也略显单调。 刚好前面了解到一个免费图片素材网站(无需版权,免费商用), 搜索了下[黑白主题](https://pixabay.com/photos/search/black%20and%20white/?orientation=horizontal) ...
  • Published on
    此方法来自[Hugo官方文档](https://gohugo.io/tools/search/) 中的 [hugofastsearch](https://gist.github.com/cmod/5410eae147e4318164258742dd053993) > A usability and speed update to “Github Gist for Fuse.js integration” — global, keyboard-optimized search. 没错,这个方案,是[Github Gist for Fuse.js integration](https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae) 的改进版。 ...
  • Published on
    私有仓库发布跟public仓库稍有不同。增加了两步。这里记录一下。 ## 1. 登录Netlify生成deploy key 登录Netlify, 点击进入要设置的站点,然后点击`Site settings`按钮, 然后点击`Build & deploy`, 在`Continuous Deployment`下面,往下拖页面到`Deploy key`, 这里默认是没有key的,点击 `Generate public deploy key`生成一个deploy(发布)公钥。然后你会看到一个文本框,里面有rsa public key. 先复制完整的key内容到系统剪切板。 ![](netlify-gen-deploy-key-2020-06-01-19-59-23.png) ...
  • Published on
    ## 0. AWS S3介绍 Amazon S3 Endpoints可以在这里查看 https://docs.aws.amazon.com/general/latest/gr/s3.html S3 在大部分地区都有节点,但是也不是所有节点都有。 S3是对象存储,默认情况下是不能用来做静态网站的,但是可以通过启用website config来达到目的。 这里要注意的是,[Website endpoint](https://docs.aws.amazon.com/AmazonS3/latest/dev/WebsiteEndpoints.html) 和普通的REST API访问时,其使用的endpoint是不同的。 ...
  • Published on
    ## 准备工作 1. 安装好最新版本的vscode(这个自动不用说),但是我这里要强调一下的是,vscode插件用vscode自己来写,能省很多事情,虽然你也可以用WebStorm之类的来写 2. 安装好基本的工具,Git和Node.js(包含我们需要的npm) 3. 安装[Yeoman](http://yeoman.io/)和[VS Code Extension Generator](https://www.npmjs.com/package/generator-code) ```bash npm install -g yo generator-code ``` Yeoman号称“现代webapps脚手架工具”,使用它可以非常方便地生成各种项目的代码,而不是每个字节都要你从0撸起。 ...
  • Published on
    ## 前言 此前老灯介绍过最麻烦的Hugo站点部署方法,很多人可能光看配置文件就头疼了, 这次老灯借着给NanoDM站点迁移的机会,顺便介绍一下最简单的Hugo部署方法。 ## 为什么迁移 NanoDM当前的站点是基于Hugo静态站点生成器构建的。 ### 仓库为什么迁移到github NanoDM的站点源码此前一直托管在我的bitbucket私人仓库,这次做的另一个改变是:迁移到github 新的仓库地址为: https://github.com/ttys3/nanodm.net (欢迎fork, 欢迎贡献文章或编写FAQ) 迁移到github之后,可以方便大家一起维护NanoDM的文档。毕竟单靠我一人之力,精力非常有限。 ...
  • Published on
    这篇主要讲一下这个博客是怎么部署的 ``` {{< music "32272267" >}} ``` ## hugo 主题选取 主题选取这个其实在[前篇](/blog/new-blog-new-domain)已经说过了 这里说下这个主题的特点吧: 1. 5色可选。5种双色主题 (orange is default, red, blue, green, pink)可以直接在配置文件里修改。 2. [Fira Code](https://github.com/tonsky/FiraCode)作为默认等宽字体 3. 响应式设计,各种分辨率浏览效果都不错 4. 采用 [PrismJS](https://prismjs.com/) 实现客户端代码高亮 ...
  • Published on
    ## 回顾博客折腾之路 博客圈子里熟悉无灯的童鞋可能知道, 老灯早期玩了相当长一段时间的 **WordPress**. 后面又折腾过Habari(已经阵亡) 和 typecho, 后面换成了自己基于Kohana(2016年停止更新)写的博客系统,再后来又换成了自己基于Yii2框架写的博客系统. 可能是嫌弃自己写的博客系统体验太差了吧,正好给了借口可以不写博客了. 因此博客从刚开始的日更周更,变成月更,渐渐地变成了季更,年更,最后变成了长期不更了. 博客域名刚开始是`ihacklog.com`(停止续费,丢弃), 后面切换成`80x86.io`(停止续费,丢弃),而现在的域名是`ttys3.net`,原因很简单,不同时间,折腾的东西不同,喜好也会产生变化,因此域名命名上也会变化。 ...