静的サイトジェネレータ
静的サイトジェネレータって「Static Site Generators」？最近よく見る言葉ですが、ちょっと前までに全然しらなかった！実は我が家の長男と次男はプログラミングができます。さすが私の子供です😅。子供たちは私より全然プログラミングができるので色々教えてくれる。私は元SE（システム開発者）なので子供たちと話しが合います。
次男は教えてくれた、静的サイトジェネレーター「Static Site Generators」略して”SSG”の事。最初は怪しい言葉って聞こえたので思わず笑ってしまいました。なるほどね、私はWordpressに依存しているので、最近コードなんか見たりしません。このまま忘れてしまうので、試しで”SSG”サイトを作ろうと思っています。
静的サイトジェネレータ（SSG）
静的サイトジェネレータは、生データとテンプレートのセットに基づいて、完全な静的なHTMLのウェブサイトを生成するツールです。簡単にローカル側でサイトの確認ができます。度々サーバーにアップロードしてから、サイトの確認する面倒な作業がいらなくなります。レンスポンスも早くて、余計なタグを消す事もできます。しかし最低限のIT知識が必要のため、デメリットがあります。
エディタとターミナル（コンソール）を使いますので慣れていない方には難しいと思います。私は久々にエディタとターミナルコマンドを使ったので、改めて勉強をする必要がありました。💦
SSG有名なツール
その他色々ありますJamstackのホームページで確認ができます。Jamstack アーキテクチャには、大規模な e コマース サイト、SaaS （Software as a Service）アプリケーション、個人ブログのいずれを構築する場合でも、多くの利点があります。詳しく公式サイト（英語）のページをご覧ください。
実際使って見る
私は選んだツールはHugoです。パソコンにツールをインストールしてサイト作成は全て自分のパソコンになります。＊Wordpressの場合はWeb上で作業とは違います。
| Hugo は、Go で記述された高速で最新の静的サイト ジェネレーターです。Hugo で構築された Web サイトは、非常に高速で安全です。 Hugo サイトは、Netlify、Heroku、GoDaddy、DreamHost、GitHub Pages、GitLab Pages、Surge、Aerobatic、Firebase、Google Cloud Storage、Amazon S3、Rackspace、Azure、CloudFront など、どこでもホストでき、CDN とうまく連携します。 |
- Hugoのインストール
- 新しいサイトのディレクトリ作成（格納フォルダ）
- テーマのダウンロード（好きなテーマ選べる）
- サイトにコンテンスの追加
- Hugoサーバースタート（ローカルサーバーでサイト表示）
- サイトのジェネレーター（コンパイル）
- 最後に
Hugoのインストール
MacOs Big Sur使用
macOS のパッケージ マネージャーである Homebrew と MacPorts は、それぞれ brew.sh または macports.org からインストールできます。（ターミナル使用）”%”は私のPCで使っているターミナル プロンプトです。
Homebrew: %brew install hugo
MacPorts: %port install hugo
新しいサイトのディレクトリ作成（格納フォルダ）
ターミナルのアプリから新しいサイト用のディレクトリーを作成します。cd コマンドを使用することにより、ホームディレクトリ以外のディレクトリに移動することができます。作りたい場所をカレントディレクトリにしてからコマンドを実行しましょう。使うコマンドはHugo new siteです。尚、サンプルのため、細かいオプションを指定しません。例：
- %cd homepage/sample
- %〜 hugo new site ファイル名（好きな名前）
homepageの中のsampleの中にサイトディレクトリーが作成されます。Finderで確認して、中に色々なデータが入っています。それはHugoの最低限必要なものになりますので削除しないでください。一番最初修正するファイルはconfig.tomlです。
| config.tomlって？toml（Tom’s Obvious, Minimal Language）を持つ拡張子は、設定ファイルのフォーマットの1種です。読みやすくて、分かりやすいフォーマットとなるように作られています。tomsは多数のソフトウェアプロジェクトで採用されており多数のプログラミング言語で実装されています。TOMLの構文は３種類があります。
・大部分がキーと値の組 ：(key = “value”) |
テーマのダウンロード
Hugo公式さいとよりお好きなテーマ（Theme）をダウンロードします、さまざまなテーマがあって思わず迷っていしまいますね。最初はできるだけシンプルを選ぶのがいいと思います。複雑なテーマを選ぶと設定が面倒になるので初心者でしたら簡単なテーマからスタートしましょう。ダウンロードしたテーマをthemesのディレクトリーに格納します。右側サイドバーカテゴリーからテーマタイプ並んでいるので“simple”、”minimal“、”light“のようなキーワードから選べます。
config.tomlの設定：theme = “”の値の中にテーマ名にします。
%echo theme = \”テーマ名\” >> config.toml
エディタでも設定が可能です、config.tomlファイルを開いて、theme = “テーマ名”を設定します、
サイトにコンテンスの追加
ターミナルコマンでで新しいコンテンスを追加します。コンテンスはデフォルトで”content”の中に作成されます。
%〜 hugo new post/mynewblog.md
- postと言うディレクトリーの中にmynewblog.mdが作成されます
- 必ずmdの拡張子を忘れずに！
- エディタで作成したフォルダを表示します。
中身を確認すると下記のように表示されます。（markdown）
| — title: “My First Post” date: 2019-03-26T08:47:11+01:00 draft: true — |
Hugoサーバースタート
Hugoサーバーをスタートする事でローカル側で出来上がったサイトの確認ができます。ターミナルから下記のコマンドを入力します。（カレントディクトリーを必ず確認）
%hugo server -D
これでHugoはデータの生成します。パソコンのブラウザーで作成したサイトの確認ができます。
Navigate to your new site at http://localhost:1313/
サイトのジェネレーター
実際インターネットサーバーに動かすためにこのままでは使えません。その為にHugoのジェネレーターでサイトのコンパイル（生成）が必要になります。ターミナルコマンドで簡単にできます。
%hugo -D
生成されたサイトのデータは全てpublicと言うフォルダーに格納されます。実際サーバーにアップロードするのは、publicのデータだけでいい。
最後に
簡単に見えて実際動かすとなかなかうまくいきません。実は細かい設定が必要になります。今後それらのノウハウを作りたいと思います。全て私のエクスペリエンス（経験）になりますのでお役に立てばいいと思っています。Hugoの公式サイトは全て英語ですが、とても簡単な英語で説明されています。
