こんにちは、山田ハヤオです。
もう割と長い間このブログを書いていますが、ここに載せるまでもない個人的な愚痴とかも書こうと思って自分だけの小さなブログを構築しようとしました。
最初はWord Pressでやろうと思ったのですがサーバ代を払える余裕はなく、かといってHTMLやCSSを1から書くのは手間だしろくなクオリティにはならないのは明白…
さてどうしたものかと考えてるときにFascodeの管理人の山Dから教えてもらったのがHugoでした。
当時は自分もよくわからなかったのですが、HugoはサイトをMarkdownから生成する静的サイトジェネレータです。
生成されたサイトはHTMLとJavaScript、CSSしかないのでGitHub Pagesでも公開できます。
ということでHugoでブログを構築した結果、何がよくて何が悪いのかを話していこうと思います。
実際のサイトの構築はまた今度少しずつ開設していこうと思います。
今回の記事はなるべく間違いがないようにしていますが、Hugoにそこまで詳しいわけではなく、ブログ構築やテーマの改造を少し行った程度の知識で書いています。間違いがあったら指摘をお願いします。
Hugoの構造とおおまかな仕組み
Hugoは静的サイトジェネレータです。なので生成されるものはHTML、JS、CSSのみです。
そして自分が書くソースコードはメインの設定ファイルとMarkdownのみです、基本的には。
HugoにはWordPressと同じように「テーマ」があり、その中から1つを選んでサイトを構築します。
テーマはHTMLとCSS、JavaScript、そしてHugoの独自構文で書かれています。
そして独自構文によって、本来はマークアップ言語であるHTMLがコンパイル言語のようになります。
コンパイルといってもバイナリを生成するのではないのですが、HTMLやMarkdownをimportしたり擬似的に動的なことを行えるようになります。
ブログ構築の流れ
まずはGitHubでリポジトリを作成します。私の場合は既存のサイトのサブディレクトリとして追加したのですが、それによってなかなかに苦戦したので新しくリポジトリを作成することを強く推奨します。
Gitリポジトリを作成したら、そのディレクトリをcloneし、hugoコマンドを使って初期化します。
初期化されるといくつかの空のディレクトリが生成されるので、その中に具体的なブログの内容を書いていきます。
Hugoは基本的には他人が書いたHugoテーマをもとに作るので、そのテーマを自分のGit上にsubmoduleとして追加します。
submoduleはGitリポジトリ間をリンクさせる機能で、Gitリポジトリを1つのファイルとして管理できます。
テーマを追加したら、自分やブログに関することを記述する設定ファイルを書きます。
設定ファイルはYamlやTOMLなどの現代風なマークアップ言語で記述していきます。
最後にMarkdownのベースとなるテンプレートを作成します。
これでブログの基礎は完成です。
あとはhugoコマンドを使って実際の記事となるファイルを作成したあと、本文をマークダウンで記述します。
直接touchコマンドなどでマークダウンを作成しても良いのですが、投稿日時やタグなどのメタ情報を手で書くのは面倒です。hugoコマンドを使って記事を追加すればテンプレートをもとに全て自動でやってくれます。
Hugoの良いところ
Hugoはいいところも悪いところもいろいろあります。まずはいいところから。
まず、記事本体をMarkdownで書くので、WordPressの使いにくいエディタを使う必要がないというのがおおきいです。
VScodeやらTyporaやらMarkTextやら、何でも好きなエディタで書けます。
また、Hugoはコマンドによるコンパイルが必要ですが、GitHub Actionsでコミットからの自動ビルド、デプロイまでをすべて自動化できます。
そのままGitHub Pagesで公開できるので費用が一切かかりません。
反面、WordPressはPHPなので専用のサーバが必要ですし、容量も大きめです。
Hugoで構築されたサイトはサイズが非常に小さいのでサーバの容量を食いません。
個人的にはこれは大きいメリットだなと感じています。
Hugoの悪いところ
Hugoはブログの構築をテーマをもとに行ってきますが、WorkdPressと同じようにテーマによってカスタマイズできる範囲が大きく異なってきます。
有名なテーマなら細かい部分までカスタマイズできてドキュメントも充実していますが、個人が作った小さなテーマの場合は、設定ファイルに記述する変数名などをソースコードから探していく必要があります。
また、テーマ全体を変更する場合は当然HTMLやCSSなどを書く必要も出てきます。
そこがやっぱり面倒な部分です。
構築する上で苦戦したこと
今回、すでに公開されていたhayao.fascode.netのサブディレクトリに追加する形でHugoを使いました。
具体的にはhayao.fascode.net/blog/以下に構築しました。
しかし、日本語で紹介されているHugoの記事の大半はドキュメントルート直下に設置する形でした。
そのため設定ファイルを試行錯誤しながらいろいろ変えていく必要がありました。
最終的にはある程度までうまくいったもののビルドされたものにCSSが適用されず、公式のフォーラムで質問をしてようやく解決しました。
また、そんな特殊な構造だったのでGitHub Actionsも自分で書く必要があり苦労しました。
最後に
Hugoはアニメーションなどの豪華なものはないものの、個人の小さいブログにはもってこいのツールです。
専門的な知識があればHTMLとCSSでテーマを作成することもできるので試してみてください。
次のHugoの記事のときには実際の構築を書こうと思います。それでは、また今後。
コメント