Table of Contents
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でインストールする
scoop install hugo-extended上記コマンドを使用すれば、hugoの拡張版をインストールすることができる。
'hugo-extended' (0.122.0) was installed successfully!Hugoでサイトを構築する
Hugoでサイトを構築するのは簡単で、下記コマンドを叩くだけでいい。
hugo new site site-name上記を実行した後に、
hugo -D serveで、サイトを確認することができる。
テーマを選んで適応する
Hugoは沢山のテーマが提供されている。Wordpressに通ずるものがある。
今回は一番上にあったPaperModを採用することにした。
テーマを導入する
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperModサブモジュールって？
外部の git リポジトリを、自分の git リポジトリのサブディレクトリとして登録し、特定の commit を参照する仕組み
どういうこと🤔?
とりあえず、上記コマンドでthemesの中にPaperModがインストールされた。
最後にhugo.yamlに
theme: PaperModを追加すればテーマが適用される。
