Windows で 10 分でブログ作成 Hugo x Netlify 前編
ひとさじ
初投稿です🍀
Hugo を用いてこんなブログが作れます．色々カスタムしながら記事を書き溜めています✨
GitLab Pages? GitHub Pages? Netlify? どれでホスティングするかの方法を含めて情報提供します．
環境は Windows 11 Home で，以下の手順に従い 10 分で PaperMod テーマのブログが持てます．
前提
GitLab Pages を愛用しており，以前は GitBook を使った静的サイトを作っていた．ガジェット友達の元同僚に勧めたところ気に入ってサイト作成をその方法に乗り換えてくれたのだが，その後，さらに Hugo に乗り換えたという知らせを受けた．
自分でも技術ブログ的なものを書いてみたくなり，GitBook はページ数が決まっているサイトには適しているけれど，ブログのようなサイトには適さないと思い至った．そこで Hugo を使いたくなり一日調べ上げてブログを公開した．
調査
ホスティング先は Netlify がお勧めされている．もちろん，GitLab Pages や GitHub Pages でも良いのだけれど，
https://[好きなアドレス].netlify.app
というさらに短縮された URL で公開できるのは魅力的に思った．
Netlify は CodeSandBox か何かで間接的に用いただけでアカウントを持っていなかったので，GitLab アカウントでログインしたが，あまり使い方がわからない．GitLab では Hugo テンプレートが最初から選択できて，すぐに Hugo サイトを GitLab Pages で公開できる．そのため，GitLab の Hugo テンプレートを選択してリポジトリを作成し，そのリポジトリを Netlify の from exsisting repositry から選んでみた．よし，これで簡単と思ったが，Netlify では自動で URL を付けてくれたが，Page Not Found となった．
Hugo の日本語情報がそもそも多くはなく，Netlify と組合わせて公開する例はさらに減る．減るがないわけではないし，それなりのギークな人が公開しているので役立つページは多い．
諦めて GitLab Pages で公開しようかなと思ったが，そもそもテーマテンプレートをうまく設定できない．テンプレートを設定するには複数の方法があるようだが，これがページによって説明がまるで違って非常にわかりにくい．
たった数行のコマンドで良いはずなのだが．．．
結局，git サブモジュールとしてテンプレートを設定する方法が推奨されているので，hugo コマンドを打つ必要があり，ローカルで諸々設定する必要性を感じ，大人しく従うことにした．
Hugo に好きなテンプレートを適用する
私は PaperMod を使ってみることにした．
テンプレート設定の正しい情報が載っているサイトが少なく，結構たくさんのページを調べたが，結論から言うと，
PaperMod 公式の以下のインストール手順と，
英語サイトの以下を参考にするだけで良かった．
Git をインストールする
正直，Git とかコマンドラインの経験がない人には Hugo でのブログ公開は諦めて欲しい．
つぶやき
（と言いつつ，コマンドライン経験が今後も一切ないであろう同僚に GitLab アカウントを作成させ，GitLab 上の GUI エディタを使って画像の入れ方とリンクの貼り方のタグだけ教えて GitBook のサイトを更新させている．GitLab に閉じて新規リポジトリの作成で Hugo テンプレートを選んで GitLab Pages での公開をするだけならできなくもないかもしれないが，新規ページを作成する段階でディレクトリ構造が理解できなくて詰むことが予想される．最低限，昔 Web ページを素で HTML 書いて作ってたレベル以上の人にしかお勧めしない．）
パッケージマネージャーをインストールする
Hugo 公式 GitHub から Git Clone で良かったかもしれないのだが，Windows のパッケージマネージャーとして Chocolately を入れた．
管理者権限 PowerShell を開き以下を入力してインストーラーをダウンロード，インストール．
Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
インストールが完了したらコマンドラインで，以下を実行．
choco -v
バージョン情報が表示されたら Chocolatery のインストールは完了．
Hugo のインストール
コマンドラインから以下を実行．
choco install hugo-extended
Hugo サイト作成
hugo new site [サイト名] --format "yaml"
PaperMod では設定ファイルを yaml にする必要がある．
cd [サイト名]
git init
Git リポジトリじゃないのでこれからの管理を考えてリポジトリ化しよう．
好きなテーマを git サブモジュールとして適用する
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
echo "theme: PaperMod" >> hugo.yaml
テンプレートファイルの公開 URL を指定してサブモジュール化し，
設定ファイルに echo でテーマ名を書き込み．ここでは，PaperMod．
Hugo ローカルサーバを立上げ表示確認
hugo server
表示されたローカルアドレスにアクセス．
初記事を書く
hugo new posts/hoge.md
contents/posts配下に新規ページ hoge.md が作れます．
ひとこと
個人ブログで記事を先に公開してから，この Zenn のフォーマットに合うように整えました．
これから少しずつ投稿していきますのでどうぞよろしくお願い致します😄
参考にさせていただいたサイト
Netlify をホスティング先にすることについて．
Chocolatery のインストール方法について
記事を作成するコマンドについて．
Discussion