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