HUGO で静的なWebページを作成し Firebase Hosting にデプロイする

gohugo.io

こちらの公式ドキュメントの Quick Start に従ってやってみる。

HUGO インストール

$ brew install hugo

インストール確認

$ hugo version
Hugo Static Site Generator v0.58.1/extended darwin/amd64 BuildDate: unknown

WEBサイトを生成

新しいWEBサイトを作成する。
これで quickstart ディレクトリが作成される。

$ hugo new site quickstart

$ tree -L 2 quickstart
quickstart
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── posts
├── data
├── layouts
├── public
│   ├── 404.html
│   ├── categories
│   ├── dist
│   ├── images
│   ├── index.html
│   ├── index.xml
│   ├── sitemap.xml
│   └── tags
├── resources
│   └── _gen
├── static
└── themes

テーマの追加

次にテーマの設定を行う。
テーマ一覧はこちら
今回は Ananke theme を利用する。
まず git の設定を行い、themes ディレクトリ内に submodule で追加する。

$ cd quickstart
$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

そして設定ファイル config.toml にテーマを追加。

$ echo 'theme = "ananke"' >> config.toml

コンテンツの追加

とりあえず適当に最初のコンテンツを追加してみる。

$ hugo new posts/my-first-post.md

これで content ディレクトリに Markdown のファイルが作成される。
中身はデフォルトでこんなかんじ。

$ cat content/posts/my-first-post.md created
---
title: "My First Post"
date: 2019-09-13T16:52:17+09:00
draft: true
---

ここにある draft が true だと下書き状態となる。
下書き状態だと静的ファイルとして書き出す時に対象にならない。

draft: falseに変更し、コンテンツの中身はその下に書いていく。

---
title: "My First Post"
date: 2019-09-13T16:52:17+09:00
draft: false
---

## Hello

こんにちは。

ちなみにデフォルトでdraft: falseにしたい場合は、archetypes/default.md から設定できる。

$ cat archetypes/default.md
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

ローカルサーバを起動して動作確認

ローカル環境でサーバを起動し、動作確認する。
-D で下書き状態の記事も表示することができる。

$ hugo server -D

                   | EN
+------------------+----+
  Pages            |  4
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0
---

Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

http://localhost:1313/
で確認。

f:id:xyk:20190913172955p:plain

サイトの全体設定

サイトのURLやタイトルなどの設定は config.toml で行う。

静的ファイルの書き出し

hugoコマンドを実行することで、public ディレクトリに 静的ファイルが作成される。
コンテンツファイルでdraft: falseになっていると書き出し対象にならず、何も出力されないので注意。

$ hugo

                   | EN
+------------------+----+
  Pages            |  4
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  0
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Firebase Hosting にデプロイする

Firebase CLI はインストール済み。
そして Firebase Console からプロジェクトも作成済み。

Firebaseプロジェクトを作成。

$ firebase init

Hosting を選択

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, t
hen Enter to confirm your choices.
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

既存プロジェクトを選択

? Please select an option: (Use arrow keys)
❯ Use an existing project
  Create a new project
  Add Firebase to an existing Google Cloud Platform project
  Don't set up a default project

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ myProject (myProject)

Publish ディレクトリにデフォルトの public を選択。
Firebase Hosting は HUGO と同じ public ディレクトリを対象とするので、ここはそのまま Enter で進む。

=== Hosting Setup
 
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
 
? What do you want to use as your public directory? public

シングルページかと聞かれるので No にする。
すると、public/index.html が上書きされてしまう。

? Configure as a single-page app (rewrite all urls to /index.html)? No
✔  Wrote public/404.html
✔  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

✔  Firebase initialization complete!

再度hugo コマンドで書き出す。

$ hugo

そしてデプロイする。

$ firebase deploy