【Hugo設定】SEO対策とSNSシェア(OGP・Twitter Card)のメタタグ自動出力設定
ブログ記事を公開した後、読者がX (旧Twitter) やLINE、FacebookなどのSNSでリンクをシェアしてくれた際に、「目を引くようなきれいなサムネイ …
Posts
【Hugoカスタマイズ】タグ・カテゴリーの一覧ページ(terms.html)をタグクラウド風にデザインする方法
ブログ記事に「タグ」や「カテゴリー」を付けて分類していくと、「サイト内の全タグとそれぞれの件数が知りたい！」「どの分類にどれくらい記事があるのか全体像を見せたい …
【Hugo開発】Hugo Pipesを使ったSCSS(Sass)の導入とCSS自動コンパイル・軽量化
ここまで、サイトデザインの調整は static/css/style.css という生のCSSファイルを直接編集することによって行ってきました。 しかし、実際の …
【Hugo機能】記事一覧を分割表示する「ページネーション(Pagination)」の実装方法
サイトを長く運営して記事数が数十、数百と増えてくると、トップページやカテゴリーの一覧ページが果てしなく縦に長くなりすぎてしまい、読者にとって非常に見づらく（ロー …
【Hugoデプロイ編4】Firebase Hostingに独自ドメイン(Custom Domain)を設定してサイトを本格運用する
いよいよデプロイ編の最終回、そしてサイト制作の総仕上げとも言えるステップです！ 現在のサイトのURLは https://***.web.app のような …
【Hugoデプロイ編3】GitHub Actionsを使ったサイト自動更新(CI/CD)の設定手順
さあ、デプロイ編の最大の山場でありクライマックスです！ ここまで前回の記事で「コマンドを叩いての手動デプロイ」環境を構築してきましたが、これを現代のWeb開発で …
【Hugoデプロイ編2】Google Firebase Hostingへの無料公開手順とCLI初期設定
GitHub側にテーマや記事データの保管場所（倉庫）を作成する準備が整ったら、次はいよいよビルド済みのHTMLファイルを実際に配信する「インターネット空間の公開 …
【Hugoデプロイ編1】Git/GitHubの初期設定とリモートリポジトリへのプッシュ手順
ここからは、ローカル環境で完成したHugoサイトをインターネットに公開するための「デプロイ編」セクションへと本格的に突入します！ まずは自動化のための必須基盤と …
【Hugoカスタマイズ】Mermaid.jsを導入してテキストだけで図解(フローチャート等)を描画する方法
「百聞は一見にしかず」。 複雑なシステムの仕組みや業務フローなどを説明する際、文字だけの文章よりも直感的な「図解」が添えられている方が圧倒的に伝わりやすいですよ …
【Hugoデプロイ編0】静的サイトを世界へ公開する2つの方法(手動と自動)
テーマを作り終え、記事も充実してきたらいよいよ作成したHugoサイトを全世界に向けてインターネット上に公開（デプロイ）する段階です！ 静的サイトジェネレーターで …