メニュー 閉じる

Hugo+Netlifyで軽量なWebページを構築する

Hugoはここ数年シンプルなWebサイト構築で人気のフレームワークです。
フレームワークというか超シンプルなWebサイト作成ツールです。
公式にも「世界一高速なWebサイトビルディングフレームワーク」を歌っています。

The world’s fastest framework for building websites

こうしたシンプルなWebサイトはこれまでHTMLとCSSで作成されていました。
例えば阿部寛さんの公式サイト?はシンプルな情報提供ページとして秀逸です。

 

WebサイトといえばWordpressだったけど…

実はこのくらいシンプルなWebページでも十分その機能を果たしていることが多いようです。
そのため、近年はStatic Site Generator (静的サイトジェネレーター)と呼ばれる、
Hugoのようなフレームワークが簡単なWebページ構築には使われています。

このWebページのようなCMS機能が付属したWordpressなどのツールはとても高機能です。

そのためHTMLとCSSだけで構築されているわけではなく、CMS機能として記事の管理や、
プラグインの設定、ダッシュボードでのデータ閲覧機能など複雑な機能を持っています。
そのため、例えばWordpressであればPHPという言語で開発されています。

中でもWordpressは編集画面やダッシュボードがUX的に使いやすいところが魅力であり、
またプラグインや拡張開発を行うことでユーザー管理機能やネットショップ機能などの実装も可能です。

一方で機能が多いということは重要な情報を頻繁に扱うということでもあり、
定期的にサーバーのメンテナンス、データベースのメンテナンス、
セキュリティ確保のためのアップデートなどやるべきことが増えるという欠点もあります。

ただし、現在もWordpressはコミュニティが活発で精力的な開発が続けられており、
デザイン的にも優れたテンプレートが多数提供されていることから、
CMSとして大手企業のWebページでもWordpressが活用されています。

 

なぜ今Hugoが使われるのか?

一方で高機能であるがゆえに保守も必要であり、そこまでの機能を必要としない個人や中小企業もあります。
例えばWebページをマーケティングのための情報発信用として使うことがなければ、
ちょっとした紹介ページとして用意するだけでいいケースもあります。

そうした場合はHugoのような静的サイトジェネレーターを用いることで、
更新やメンテナンスの労力から静的サイトを活用しても良いでしょう。
もちろん、Hugoはエンジニアの力量次第では拡張することが可能です。
また、CMSとしての機能は乏しいですが、シンプルな情報発信であれば十分対応可能です。

現時点ではテキストエディタベースでWebを構築したい人向けではありますが、
もしかすると、エディタ環境などが専用アプリやGUIベースで実現されることで、
より広い層へそのユーザーを拡大させていくのではないかと思っています。

 

Hugoをデプロイする方法

Hugoを使うことでホスティングサーバーを選ぶことがありません。
Netlify、Heroku、GitHub Pages、Firebase、Google Cloud Storage、Amazon S3などどこでも可能です。

現在のところはWeb開発者や研究者を中心に利用者が増えており、
一般的にはNetlifyやGitHub Pagesにデプロイすることが多いようです。

そう、現時点においてHugoをデプロイする最も簡単な方法はNetlifyです。
Hugo Academicを含めて6種類のテンプレートから、Netlifyに簡単にデプロイが可能になっています。

https://wowchemy.com/templates/

Githubアカウントを持っているエンジニアの皆さんであれば、
手順に従ってほぼ解説を見ることなくデプロイすることができるでしょう。
以下は本当に初めての方向けの説明です。

NetlifyとGithubを連携する

まずGithubのアカウントを作成しましょう。
https://github.co.jp/

「サインアップ」をクリックし、Githubアカウントを作成します。
Githubアカウントが作成できたらログイン状態にしておくと良いでしょう。

次にHugoの導入です。Hugoのテンプレートはこれら以外にも多数用意されていますが、
テンプレートはGithubというサービスで提供されていることから、エンジニア以外には利用が難しいでしょう。
そのため、今回は簡単にデプロイできるサービスを使います。

以下のリンクからお好きなテンプレートを選択、「Create Site」をクリックします。
https://wowchemy.com/templates/

すると以下のようなページが開きます。

次に以下のようなページが開きます。
ここではGithubアカウントにログインすることでアカウント連携させます。

Githubに自動でコードが登録されるのでリポジトリ名をつける

次は「リポジトリ名」を設定します。これはGithub上のコードを管理するフォルダ単位です。
今回は「academic-kickstart」という名前がつけられていますが、「mysite」などでも構いません。
名前を決めたら、「Save&Deploy」をクリックします。

これで完成です。

Overview画面から自分のURLをクリックして表示されたら完成!

「Overview」画面から見てみると自動的にURLが作成されています。
このURLは「Domain Settings」から変えることができます。もちろんカスタムドメインも利用可能です。

「Production deploys」がPublishedになっていることを確認しておきましょう。
URLをクリックすると初期設定のテンプレートが表示されるはずです。

同時にGithubに自分が名付けたリポジトリが作成されています。
例えば私なら「mypage」と名付けたリポジトリが見えていますね。

このリポジトリをCloneすることでローカルで開発することもできます。

Hugo + Academic テーマを使ったブログの作り方
https://qiita.com/harumaxy/items/58e7e4273c61e7e260b3