静的サイトとは？

静的サイトとは、形が決まっている静的アセットを事前に配置しておき、ユーザのリクエストに対してホスティング先のWebサーバが事前配置された静的アセットを返すものです。サイトの表示スピードが速いですが、コンテンツの追加には時間がかかります。しかし、データベースを使用しないため低コスト・運用・メンテナンスフリーです。

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

配信可能な性的アセットを事前生成するツールです。近年では、gitとの連携によりコマンド一つで自動的に配信可能な静的アセットを自動的に生成し、サイト公開まで行うことができます。

Hugoの魅力

生成時間が短いプレビューがストレスなくできます。また、ホスティングサービスの無料枠から外れる条件にビルド時間があることがあります。
学習コストが低い Hugo特有のテンプレートと、HTML・CSS・JavaScriptの基本を理解しているだけで使えます。
開発が活発である開発・メンテナンスがされなくなる心配は当分ないと考えられます。

Hugoのインストール・自作サイト公開まで

Git環境とGitHubアカウントとリポジトリを準備します。そして、Hugoをインストールします。サイトを構築するには、

hugo new site newsite

とすると、newsiteというディレクトリにサイトが構成されます。次に、テーマを設定します。テーマを設定していないと、サイトを構築することができません。HugoのテーマはHugo Themesにたくさんあるので気に入ったものを選びます。newsiteの中のthemeに、ダウンロードしたテーマを配置します。テーマはgit submoduleとなっています。私は動きが理解できなかったので、themeの中にcloneした後.gitを消去しました。

プレビューするには、

hugo server -D

とすると、http://localhost:1313にサイトが立ち上がります。選んだテーマによって、エラーが起こることがあります。その場合は、Hugo-extendedをインストールしてください。私は、Scoopを使ってインストールしました。

サイトの公開

今回はNetlifyを用います。 Netlifyの管理画面で「New site from Git」をクリックします。ガイダンスに従い、GitHubを選択します。デプロイするリポジトリを鰓時、Deploy siteをクリックします。ビルドが成功すれば「Preview deploy」から自分のサイトを確認できます。

利用するテーマによっては、Hugoのバージョンの関係でビルド失敗することがあります。その場合は、Setting>Build&deploy>Environmentに、KeyにHUGO_VERSION、Valueにバージョン番号を入力してSaveをクリックして下さい。

Academic Theme

https://themes.gohugo.io/academic/themes.gohugo.io

Academicというだけあり、大学教授向けのポートフォリオのテンプレートです。論文や執筆の項目がありますが、使わない項目は簡単に非表示にできます。公式ドキュメントを読みながら作成すると、簡単に自分のポートフォリオが完成しました。 ExampleSiteというディレクトリにサイトの例があるので、実際のサイトの画面とファイルの内容を見比べながら作っていきました。私に必要だったのは自己紹介・経歴・活動・出版物だったのでそれ以外を非表示にしました。

感想

こんなに簡単にリッチなコンテンツの静的サイトが作成できることにびっくりしました。このような仕組みとテーマを開発された方に感謝します。

ごまなつ Blog

楽しく働ける世界を目指して

【Hugo】 Academic Themeを使ってポートフォリオを作ってみた