Hugo(ヒューゴ)でブログを立ち上げるまでにやったこと

Hugoでこのブログを立ち上げたので、HugoのインストールからGithub Pageで公開するまで。 --- 環境 - windws11 --- Hugo そもそもHugoのことをよく知らずに技術選定をしてしまったので、ここでしっかり調べておくことにする。 HugoはGoで記述された静的サイトジェネレータで 「ウェブサイトを構築するための世界最速のフレームワーク」 らしい。 The world’s fastest framework for building websites | Hugo 静的サイトジェネレータ > 静的サイトジェネレーターとは、生（未加工）データとテンプレート群を基に、完全に静的なHTML > Webサイトを生成するツールのことです。静的サイトジェネレーターは、基本的に個々のHTMLページをコーディングする作業を自動化し、それらのページをユーザーがすぐに使えるようにします。これらのHTMLページは事前作成されたものであるため、ユーザーはブラウザで即座に読み込むことができます。 > > 静的サイトジェネレーターとは？ 上記の通り、事前にHTMLを生成するのでパフォーマンスがいいのがメリットのひとつ。 --- Hugoのインストール 公式サイトに詳しい。 WindowsなのでWindowsのインストール方法通りに行った。 パッケージ管理システムのChocolatey、ScoopとWingetを使うインストール方法が提供されていた。他にも2つインストール方法が記載されている。比較表があるのでわかりやすい。 パッケージ管理システム ちなみにパッケージ管理システムとは、 > コンピュータのプログラムを一貫した方法でインストールやアンインストール、ライブラリなどの依存関係を解決する流れをツールによって管理を自動化するシステム のこと。 npmとかComposerとかも言語のパッケージ管理ツールにあたる。 Chocolateyが有名っぽいけど、インストール方法がぱっと見わからなかったので、Scoopを使用することにした。 調べるとMacではHomebrew一択っぽい。Windowsではwingetが公式っぽく、インストールも必要なく使えて便利そうだった。 インストール情報をエクスポートすることもできるので、パソコンの買い替え時とかにも重宝できそうだった。 Windowsのパッケージマネージャー「winget」を使ってみた 今思えばwingetにすれば良かったと思うけど、Scoopを選択したので、それで進めていく。 Scoopでインストールする 上記コマンドを使用すれば、hugoの拡張版をインストールすることができる。 --- Hugoでサイトを構築する Hugoでサイトを構築するのは簡単で、下記コマンドを叩くだけでいい。 上記を実行した後に、 で、サイトを確認することができる。 --- テーマを選んで適応する Hugoは沢山のテーマが提供されている。Wordpressに通ずるものがある。 Hugo Themes 今回は一番上にあったPaperModを採用することにした。 hugo-PaperMod テーマを導入する サブモジュールって？ > 外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組み どういうこと🤔? とりあえず、上記コマンドでthemesの中にPaperModがインストールされた。 最後にhugo.yamlに を追加すればテーマが適用される。 できたサイトが🦥 nove-bでリポジトリがこちら。 ---