静的サイトジェネレータHugo

Hugo入門

• 静的サイトジェネレータ「Hugo」でシンプルブログサイトを構築する
• 静的サイトジェネレータ「Hugo」インストール
• 静的サイトジェネレータ「Hugo」〜公開方法〜

サイト構築

• Hugoのテーマでsubmoduleを使う方法
• シンタックスハイライトにPython Pygmentsが不要となった
• Related Contentを利用して関連記事を表示する
• gulpで画像の最適化
• Hugoソースコードリーディング〜Taxonomy〜
• Render Hooks for Code Blocksを利用してコードブロックにファイル名を表示する
• ブログカードを作成する（resources.GetRemote利用）

Shortcodes

• Shortcodesの作り方
• Shortcodesを利用してAmazon紹介リンクタグを作成する
• AMP対応のブログカードを作る

AMP対応

• AMP向けのミニマルCSSフレームワーク「1BX」
• AMPページの最適化
• AMP OptimizerによるAMPのさらなる最適化
• AMP Service WorkerでPrefetch Linksを実現する

Data Driven Content

• 人気記事を表示するためJSONを返すAPIサーバを作りData-driven Contentを試してみた

Tailwind CSS

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

ビルド

• npm-run-allでローカルAPI serverとHugo serverを同時に実行する
• GitHub Actionsのスケジューラ実行を利用して定期的にビルドする
• Circle CIでHugoのビルド・デプロイを実行する

コンテンツ作成

• Git pre-commitフックでFrontmatterの「更新日時」を自動更新する
• ブログ記事一覧ページ（ブログアーカイブページ）を作成する

移行

• はてなダイアリーからはてなブログ経由で独自ドメインのブログに記事を移行しました
• JekyllからHugoへの移行ポイント
• Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

書籍

Hugoで始める静的サイト構築入門　静的サイトジェネレーターで作る自作サイト (技術の泉シリーズ（NextPublishing）)

インプレスR&D

AmazonKindle楽天市場Yahoo!ショッピング