つみぼんを Hugo x GitHub Pagesで爆速開発した話
こんにちは、つみぼんです。
2022/3/21に、つみぼんのサイトを大幅アップデートしました👏
リリース後、twitterでコメントくれたり、DMもらったりするんですが、なかなか好評でうれしい。
さて、今回は、そのアップデートに至るまでの開発話です。
既に企画は終わっているので、一気にmakeの話から入ります。
0.基本方針
開発を始めるにあたり、大切なことは基本方針の決定。
これによって、何を使うか、どういう設計にするか、などが全然違ってくる。
今回の基本方針はこちら。
1. 開発に時間をかけない
2. ユーザーのストレスを減らす（具体的には、レスポンスを改善する）
3. スマホ対応はちゃんとやる
4. 上記を条件を満たした上でなるべく新しい技術を使ってみる
私が結構凝り性なのこともあり、「1. 開発に時間をかけない」が実は超大事な方針。私みたいな素人さんが時間をかけてゴリゴリ作ったところで、自己満としては良いかもしれないが、出来るものなんて高々しれているので。
あと、今はWeb2.0よりもWeb3.0に興味があるので、Web2.0にはなるべく時間をかけないようにしている、というのもある。
この方針に基づき、今回はHugo × GitHub Pagesでサイト構築することにした。
1. Hugoとは
静的サイトジェネレーター（SSG）のひとつ。雑に言うと、簡単に静的HTMLを生成してくれるツール。フロントエンドがめちゃ簡単に作れてしまう。
一からサイトを構築しようとすると、静的サイトであっても結構色々書かないといけない。でも、それをやらずに、それよりもずっと簡単な入力ファイルを書くだけで、いい感じに静的HTMLをビルドしてくれるものがSSG。
Hugoのリンクはこちら。
静的サイトジェネレーターは、以下のJamstackに載っているものが有名どころである。
2022年3月時点では、Next.js、Hugo、Gatsbyが上位にいる。今回はなるべく新しいものを触ってみたかったので候補から落としたが、老舗SSGのJekyllは第4位につけている。
上位3つのうち、Next.jsとGatsbyはReactベース、HugoはGoベース。
特にReactもGoも触ったことはなく、言語自体へのこだわりはない。基本方針を念頭に置きつつ、加えて、設計思想、立ち上げの手軽さ、ビルドの速さ、ドキュメントがある程度揃っているかあたりを考慮して、今回はHugoを使うことにした。
2.実際に触ってみる
環境構築は公式サイトを見つつ、その他のディレクトリ構造や細かい書き方なんかは以下のサイトなどを見ながらやった。
最初にディレクトリ構造をきちんと理解しておけば、あまり悩むこともない。実際に、適当なTheme（テンプレ）をいじりながらだとより理解しやすいので、Themeやデモサイトのファイルを触ってみるのがおすすめ。
調べたり触ってみたりして分かったが、Hugoは本当にラクチンだ。
何がラクって、環境構築で一切ハマりポイントがなかったこと。というか、ビルドするまでハマりポイントが全くなかった。
普通、環境構築だけでハマって全然先に進まなかったりするので、環境構築がスムーズだったというだけでルンルンだ。
あとは、構造がとても良く整理されているので、全然迷わない。
3.利用するThemeを確定して、作る
何ができそうかある程度わかったところで、改めて今回の目的に合いそうなThemeを選ぶ。2.の段階である程度見繕っていたものを最終確定。
基本方針が「開発に時間をかけない」なので、なるべく、作りたいものに近いレイアウトと機能が揃っているものを選んだ。
選んだThemeに少し手を加えていく。
また、shortcodeで必要なパーツも作っておく。
Hugoにはshortcodeというのがあって、コンテンツ内にカスタムしたテンプレを作っておくことができる。便利。
（今後Hugo使う予定のない人は、ちょっと複雑なHTMLとか、パーツとかを簡単にmarkdownに埋め込めるようになるもの、くらいに思ってもらえればOK。ShortcodeはHugoの特徴の一つなので、気になる人は調べてほしい）
4.コンテンツ投入＆微修正
これが一番時間がかかった。
実コンテンツを作成していると、既に作成した個々のshortcodeを若干修正した方がよいことも見えてくるので、いくつかのバリエーションでコンテンツを作成しつつ、この辺も見直しも行った。超簡易なコンテンツ投入テストをしながら、コード変えていった感じ。
そんなこんなをごにょごにょやっていたら意外に時間が持っていかれた。とは言え、後々ラクするためには、このタイミングでキレイにしておいた方がよいので、必要な時間の使い方だ。
ちなみに、コンテンツ自体はmarkdownで全部書けるし、既にコンテンツは手元に整理していたものがあるので、大変というわけではない（純粋に、数の暴力でコンテンツ作成に時間がかかったというのはある。まあ、コンテンツ作成に時間がかかるのは世の常だ。）
なんやかんややってコンテンツも投入完了。
5.GitHub Pagesを使って公開
Netlifyにするか、GitHub Pagesにするか悩んで、読み込みがどちらかというと速いと噂のGitHub Pagesを選んだ。真偽のほどは知らないが、今のところ遅くてストレスといったことはないためOKということにしている。
ちなみに、私はGitもGitHubもちゃんと使うのはほぼ初めてだったが、エンジニアの世界はとても優しいので、やり方も、エラーの対応も、必要なことは調べたら出てくる。
先人の知恵素晴らしすぎる。
素晴らしき先人に感謝しつつ、無事「つみぼん」サイトを公開！めでたしめでたし。
6.Hugoを使ってみた感想
Themeを最大限活用したこともあり、どのSSGを使うかリサーチ→makeまでで、丸一日かからなかった。めっちゃラクチン〜。
コンテンツ作成でプラス丸一日くらい。
それにしても、本当にいい時代になったな、というのが正直な感想。
静的サイトなら、もう全部Hugoでいいじゃん。
興味ある人は、他のSSGも含め色々触って感想教えてください。
▼サポートもよろしくお願いします🙌
この記事が気に入ったらサポートをしてみませんか？