HUGO で静的なWebページを作成し Firebase Hosting にデプロイする
こちらの公式ドキュメントの 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
サイトの全体設定
サイトの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
