このブログはGo言語（Golang）ベースの静的サイトジェネレータHugoで構築しています。

Go言語（Golang）はこれまで全然触れたことがなかったのですが、Hugoは

• 既存テーマをベースにscssやhtmlを柔軟に変更できる
• 好みのエディタにてMarkdown形式で記事が書ける
• ビルドが高速
• ウェブサイトの表示が高速
• Reactベースではない（これについては後述）
• Goへの不慣れをそんなに気にしなくて良さげ

という魅力的なポイント満載だったので、とりあえず手を出してみたら結構私にマッチしていました。

ちなみに もう一つのブログ はWordpressで構築しておりまして、 まあWordpressにも良い点は色々とあるのですが、記事を書くにはまずダッシュボードにいちいちログインする必要があるのが煩わしく、 そのダッシュボードの動作が何かと重いし、サイトの表示も遅い（←それはたぶん写真の数が多すぎるからだ）。 Wordpress本体やプラグインのアップデートがやたら多く、脆弱性も度々報告されていてなんだかなー・・・とだんだんと不満が溜まっていたところだったのです。

（でもお仕事ではWordpressから離れられないので、情報収集のためにもWordpressサイトの運営はこれからも続けるつもりです。）

静的サイトジェネレータとは

静的サイトジェネレータ（Static Site Generator）、略してSSGは、静的サイトを高速でビルドしてくれるツールです。

静的サイトについては こちら で特徴を挙げています。

SSGで有名どころなのは

• Hugo（Goベース）
• Next.js（Reactベース）
• Gatsby（Reactベース）
• Jekyll（Rubyベース）

など。

上の3つはよく見聞きする気がします。

今回はHugoを採用しましたが、React（＝Javascriptライブラリ）ベースのNext.jsやGatsbyも試したことがありまして、なかなか思った通りにならないのでイラっとして途中でやめてしまいました。

Hugoが使いこなせてきたら、また手をつけてみるつもりです。

Hugoでの制作環境

前述のとおり、静的サイトジェネレータHugoはGo言語（Golang）で開発されたフレームワークです。

Hugo公式サイトは日本語版が無く、個人で日本語訳サイトを作ってくれている方がいるようです。（ありがたい。）

Go & Hugo ドキュメント

Hugoとは 　

Hugoドキュメントの日本語翻訳プロジェクト

私はWindows環境なのでWindows上のことしか書けませんが、まずローカル環境で静的サイトが出来るまでの流れを大まかにいうと

1. Goをインストール
2. Git環境がなければインストール
3. Gitから最新のHugoをインストール
4. Hugoの実行環境にpathを通す
5. サイトを作りたいフォルダでWindows PowerShellを起動
6. Windows PowerShellで新規サイトを作るコマンドを実行
7. 好きなテーマをダウンロードして必要なファイルやフォルダを配置
8. SCSSやHTMLなどを自分好みに変更
9. DRAFTモードでMarkdown形式の記事を書く
10. Windows PowerShellでビルドコマンド実行
11. Windows PowerShellに表示されたアドレスをローカル環境のブラウザで確認

って感じでしょうか。たぶん他にもやり方はあって、もっとスマートな流れで出来るかもしれませんが、私はこんな感じで進めました。

Windows PowerShellはディレクトリ移動やファイル削除、フォルダ削除が出来る程度の知識で大丈夫です。なにせHugoでよく使うコマンドはそんなに多くないので。

広告

SCSSやHTMLはHugoのディレクトリ構造を 日本語訳ドキュメント などを読みつつ 各ディレクトリに入っているファイルをエディタで開いて眺めていたら、だんだんと「ここがこのパーツだな」と分かってくると思います。 これに関してはHugoと関係なくSCSS・HTMLの基本を理解できていないと読み解くのに時間がかかるかもしれません。

Markdown形式の記事についても、そんなに詳しくなくてもちょっと調べればある程度は書けると思います。

広告

Markdown記法だけではなく、Hugoのショートコード機能を使ってラクしたり、直接HTMLを書くこともできます。

ビルド時間は公式サイトによると1ページあたり1ミリ秒未満とのこと。非常に高速です。

このサイトをビルドするときも、まだページ数が少ないのもあって一瞬でした。ノーストレス。 今後ページが増えてきたときにどうなるか・・・ネットで見た情報だと数千レベルだったらまだ実用に耐える速度らしい。

DRAFTモードでHugoサーバーを実行中にMarkdownで記事を書いたりSCSSやテンプレートを少しいじって保存したら即レンダリングされるのが良くて、ブラウザで最新の状態がすぐ確認できるのがとても便利です。

Hugoで作ったサイトを公開

DRAFTモードである程度形になってきたら本番モードでビルドします。といってもWindows Powershellで「hugo」というコマンドを実行するだけ。

問題なくビルドできたらpublicフォルダに必要なHtml,css,画像などが生成されます。カンタン！

あとはpublicフォルダ内のファイルをホスティングサーバーにアップロードすれば公開完了です。普通に静的サイトを作って公開する流れ。

（ホスティングサーバーやドメインの準備など通常のサイト公開に必要な工程は色々ありますが、Hugoに関係ない話なので割愛。）

Hugoで作ったサイトを更新

これはもう少し調べたら良い方法があるんだろうなーと思っているのですが、、、

記事を変更したり追加したりデザインを少し変えたりしたときにローカル環境でビルドすると、publicフォルダに反映されるのはいいのですが、これが追記モードなんですよね・・・

例えば記事を削除した場合、その情報がどこかしらに残ってたりする。同期されるもんだと思い込んでいたので、最初は戸惑いました。

なので、いったんpublicフォルダごと削除してからビルドする必要があります。

ちょっと面倒くさい気もしますが、Windows Powershellでhugoコマンドを実行する前にpublicフォルダ削除コマンドを実行する習慣がつけば気にならなくなるかな・・・

もちろんサーバーにアップロードする際は同期モードで。ここ、大事です。

　

以上が、Hugoで静的サイトを作る大まかな流れです。

各フェーズの詳細はまた別記事にまとめようと思っています。自分が忘れないためにも。

ちなみにこのブログは・・・

前述のとおり、このサイトはブログ形式ですが静的サイトです。静的サイトジェネレータ Hugoで構築しています。

ホスティングサーバーはロリポップをレンタルしています。

今ならドメインが1個無料でもらえるみたいですね～（2023.8.3現在）

最初は無料でサイト公開できるGitHub Pagesで公開しようかなーとも思ったのですが、もう一つの 趣味全開日記ブログ のために既にロリポップと契約していて空き容量がまだまだあったので、ムームードメインでドメイン取得だけして放り込みました。

仕事ではその時のキャンペーン状況やサイト規模に応じてロリポップだけではなく他のレンタルサーバーをオススメすることもありますが、 自分のサイトは少しでもお安く、且つ、安定的に運営したいのでロリポップにしました。

これまで大きなトラブルもないですし扱いやすくサポートも充実しているのでオススメです～。