【10分で実装！】HugoとFirebaseで静的なWebサイトをつくる

今回つくるもの

今回作るのは静的な Web サイトです。

まさにこのサイトのようなブログのような複数のユーザーから動的な更新を想定しないサイトの場合は、静的なページで実装することで高速に読み込むことができるサイトを開発することができます。

ここでは、Firebase と Hugo をつかってさくっと実装していきます。

Hugo とは？

HUGO とは、一体何でしょうか。

HUGO の公式によると、

Hugo is one of the most popular open-source static site generators.

With its amazing speed and flexibility,

Hugo makes building websites fun again.

つまり、HUGO とは静的な html を生成する事ができる静的サイトを生成するフレームワークです。

HUGO のメリット

• 静的なページなので高速
• セキュリティ面でのリスクを減らすことができる
• Markdown 形式で記事を書くことができる
• 既存のテーマを使えばサイトの実装がかんたん

静的なページにすることでサイトの表示速度は高速になり、サーバサイドの処理が無い分セキュリティ的にもリスクを減らすことができます。

なんといってもこのフレームワークの魅力は Markdown 形式で書いた記事がそのまま公開できるという点です。

これは全エンジニアにとってはとてもありがたい利点ではないでしょうか！？

逆に Markdown 記法になれていない方にとっては WordPress のような GUI 的にマークダウンできるフレームワークのほうが便利かもしれませんね。

HUGO のデメリット

• 記述が独特で学習コストがかかるところがある
• 既存のテーマを使用するとカスタマイズが面倒
• 動的に title タグや description を組み立てるのが面倒

基本的には、標準機能が充実しているのでプラグインを追加してなにかするといったことはほとんどありません。

そのため、自分にあったサイトにカスタマイズをしたい！と思ったときには最低限の JavaScript の知識は実装に必要になってしまいます。

Hugo でローカルに静的なサイトを作るまで

まずは HUGO でローカル環境で静的なサイトを作るところまでさくっと行っていきましょう。

実際に動かすだけならほんの数回のコマンドで Web サイトを作ることができてしまうのが HUGO のすごいところです。

それでは、行ってみましょう。

Hugo のインストール

今回は mac の環境で開発を行っていきます。

brew を使って HUGO をインストールしましょう。

brew install hugo

実際にインストールが済んだかどうかは

hugo version

バージョン確認のコマンドが通るかどうかで確認しましょう。

ちなみに Lunix や Windows 環境の方は公式からインストールの方法を確認することができますのでコチラを読んでみてください。

Web サイトの作成

次に Web サイトを作っていきます。

hugo new site jojo-hack(好きな名前をつけてください)

このようなコマンドを叩いてもらうと、以下のようなコメントが返ってくるはずです。

Congratulations! Your new Hugo site is created in (サイト作成に指定したPATH).

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

これで土台となる部分が作成完了しました。

次にこのコメントでも述べているように HUGO のサイトテーマを追加してみましょう。

テーマの追加

テーマはHugo Themesで探すことができます。

ここでは、JOJO HACK のテーマに使用しているhugo-coder-portfolioを使います。

cd jojo-hack // 対象のプロジェクトに移動
$ git init
$ git submodule add https://github.com/naro143/hugo-coder-portfolio.git themes/hugo-coder-portfolio

これでテーマを追加することができたので、あとは設定ファイルである config.toml の記入を修正しましょう。

echo 'theme = "hugo-coder-portfolio"' >> config.toml

これで hugo-coder-portfolio をテーマとして使用することを明示的に設定することができました。

テスト記事の作成

最後に Hello World 的な記事を追加してみましょう。

hugo new posts/hello-world.md

これで新しく記事を作成することができました。

このファイルに Hello World と追加して、下書きモード（draft: false、または削除）を外しておきましょう。

---
title: "Hello World"
date: 2019-11-10T18:29:02+09:00
---

Hello World

さあこれですべての準備が整いました。最後に localhost で表示を確認してみましょう。

localhost で動作を確認する

ローカル環境で表示を確認するには、

hugo server -D

このコマンドで OK です。これで Web サーバがローカルに構築されました。

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

早速アクセスしてみましょう。

静的ページの生成（ビルド）

hugo

Firebase Tools のインストール

npm i npm
$ npm install -g firebase-tools

firebase の初期設定

hugo を選択するだけ

firebase login
$ cd your-firebase-project
$ firebase init
$ firebase use --add

firebase deploy

firebase deploy

まとめ

Hugo と firebase でクイックに自分のブログを作ることができました。ぜひ。