TECH

2022.09.03

【Hugo】Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する

Hugo v0.93.0からコードブロックに対してもRender Hooksを利用できるようになった。 Render Hooksを利用して、コードブロックにファイル名を表示する方法を調べたときのメモを以下に残しておく。 Release v0.93.0 · gohugoio/hugo 目次 Render Hooks for Code Blocksを利用してコー …

TECH

2022.08.29

Hugoでブログカードを作成する（resources.GetRemote利用）

以前、 HugoでAMP対応のブログカードを作る でAPIサーバを利用したブログカードの作成方法を紹介した。このときは、getJSONを利用していた。 Hugo v0.91.0でresources.GetRemoteが実装され、getJSONやgetCSV以外にもresources.GetRemoteを利用できるようになった。 Release v0.91.0 · gohugoio/hugo …

TECH

2022.08.14

GitHub PagesからCloudflare Pagesへの移行

Github Pagesから Cloudflare Pages に移行したときのメモを以下に記す。 目次 背景 Cloudflare Pages側の操作 PagesのCreate a project > Connect to Gitを選択 「Deploy a site from your account」からHugoのリポジトリを選択 Set up build and deployments …

TECH

2022.06.29

AMP Service WorkerでPrefetch Linksを実現する

AMP Service Workerを使うと、簡単にServiceWorkerを導入できる。 このブログでも利用しているが、1つうまく動かないモジュールがあった。 それは、Prefetch Linksの機能だ。 ドキュメントどおりに設定してもうまく動かなかったが、「amp-install-serviceworkerにdata-prefetch属性を付ける」というのがポイントだったので、メモとして残 …

TECH

2021.02.11

Git pre-commitフックでFrontmatterの「更新日時」を自動更新する

今までブログ記事コンテンツの「更新日時」はgitの履歴情報を元にしていました。 たとえば、Hugoの場合はenableGitInfo = trueとすると、Gitの履歴情報からMarkdownの最終更新日時を自動で取得してlastmodとして割り当てられていました。 しかし、GitHub ActionsでHugoのビルドを行う際に、全履歴を取得するのをやめたことで、Markdownのlastmod …

TECH

2021.01.24

「Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト」を出版しました

2021年1月22日、技術書典9で頒布した電子書籍を底本とした「Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト」をインプレスR&D様の「技術の泉シリーズ」の1つとして発行しました。

TECH

2021.01.09

GitHub Actionsのスケジューラ実行を利用して定期的にビルドする

GitHub Actionsのスケジューラ実行で、Hugoなどのサイトを定期ビルドし、データを最新化する方法を調べたときのメモです。 目次 GitHub Actionsでスケジューラ実行 定期ビルド gh-pages.yml 参考

TECH

2020.12.26

Hugoでブログ記事一覧ページ（ブログアーカイブページ）を作成する

以前、ブログメンタリングを受講していたときの課題でもあった「アーカイブページ」を作った時のメモです。 ようやく、ブログ記事一覧の機能を実装できました。 /blog/archives/ 目次 実装方法 layouts/_default/archive.html content/blog/archives/index.md 参考ページ 合わせて読みたい

TECH

2020.11.01

HugoでTailwindCSSを利用しAMP Validなページを生成する

HugoでCSSフレームワーク「Tailwind CSS」を利用し、AMP Validなページを生成する方法についてのメモです。 ポイント HugoでPostCSSの仕組みを利用して、TailwindでCSSを組み立てる Tailwind CSS v1.4からpergeCSSを内包し、設定方法が変わった 目次 ポイント head.html postcss.config.js …

TECH

2020.03.13

npm-run-allでローカルAPI serverとHugo serverを同時に実行する

このブログではローカルでAPIサーバ（Express）を動かし、HugoのShortcodesから利用しています（2020/03/13現在）。 HugoでAMP対応のブログカードを作る - SIS Lab そのため、記事を書いてHugoのプレビューを利用する場合は、2つのターミナルで以下のコマンドを実行していましたが、ちょっとだけ面倒です。 API Server: npx ts-node …

TECH

2020.02.02

HugoでAMP対応のブログカードを作る

「Hugoでもブログカードを利用したい」 そう考えているところに以下の記事がTwitterのTLで流れてきたので、試してみました。 Hugoでブログカードに対応する | Hugo 入門 / 解説 | nasust dev blog

TECH

2019.12.03

Homebrewで過去バージョンのパッケージをインストールする方法

Homebrewで入れたHugoを、「brew upgrade hugo」でv0.60.1にアップグレードしたところ、まともにビルドできなくなってしまった。これでは困ると思い、前のバージョンをインストールしようと思ったがやり方が分からなかったので、調べてみました。