【HUGO】爆速で静的Webページ作成してFirebaseにデプロイしてみた
社内でおすすめのWEBフレームワーク・ツールを教えてくださいとゆるく聞いたところこちらのツールを教えてもらったので触ってみました。
HUGOとは
HUGOは静的なWebサイトを爆速で作成できるツールで、Goで書かれています。
(Gopherかわいい)
The world’s fastest framework for building websites Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
公式ページ
訳：静的WEBサイトが楽しくカンタンに作れちゃう世界最速のフレームワークだぜ！
良さそうですね！早速使ってみましょう。
インストール
こちらの手順にそってプロジェクトを作成してみます。
brew install hugo
インストール＆バージョン確認。
~> hugo version Hugo Static Site Generator v0.57.0/extended darwin/amd64 BuildDate: unknown
無事にインストールできたようです。
WEBサイトを生成
hellohugoという名前でプロジェクトを作成します。
~> hugo new site hellohugo Congratulations! Your new Hugo site is created in /Users/hellohugo. 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を使う利点のひとつにThemeが充実しているというのがあります。
先ほど作成したプロジェクトディレクトリへ移動し、anankeThemeをダウンロードしてみましょう。
cd hellohugo # Download the theme git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke # Note for non-git users: # - If you do not have git installed, you can download the archive of the latest # version of this theme from: # https://github.com/budparr/gohugo-theme-ananke/archive/master.zip # - Extract that .zip file to get a "gohugo-theme-ananke-master" directory. # - Rename that directory to "ananke", and move it into the "themes/" directory. # End of note for non-git users.
ダウンロードしたテーマをプロジェクトに追加します。
# Edit your config.toml configuration file # and add the Ananke theme. echo 'theme = "ananke"' >> config.toml
コンテンツを追加
このままでは空っぽなので、コンテンツを追加してみましょう。
hugo new posts/my-first-post.md
my-first-post.mdがcontent/pasts配下に作成されました。
中身はデフォルトでこんな感じです。
--- title: "Test" date: 2019-08-23T18:32:55+09:00 draft: true ---
Front Matter
先ほどコンテンツを生成した際に自動的に生成された内容は
Front Matterと呼ばれるものでコンテンツファイルのメタデータです。
タイトルや日付などの属性情報は既に入っていますが、さらに色々なデータを追加することができます。
JSON、TOML、YAMLのいずれかで記述できますが、デフォルトではYAML記法で生成されます
ビルトインのFront Matterについては以下のドキュメントを参考にしてください。
どのようにサイトに表示されるのかみてみましょう。
localhostで確認
hugo server コマンドでローカルサーバーをたてることができます。
-Dオプションはドラフトを反映する為につけます。
hugo server -D
localhostにブラウザからアクセスしてみると、このように表示されます。
ananke themeもいい感じです。
先ほど作成したmy-first-post.mdがどのように反映されているかみてみましょう。
read moreをクリックしてみます。
デプロイしてみる
ビルドしてFirebaseにデプロイしてみます。
Amazon S3にデプロイする方法はこちらの記事を参考にしてみてください。
Firebase CLI Install
ドキュメントに沿ってインストールします。
1: Firebase CLIをインストール
npm install -g firebase-tools
2: Google アカウントへログイン
firebase login
3:ブラウザが開くのでログインを完了してください。
i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you. ? Allow Firebase to collect CLI usage and error reporting information? No Visit this URL on any device to log in:<URLが表示されます> Waiting for authentication... ✔ Success! Logged in as xxxxxxx@gmail.com
4: ログインできているか確認
~> firebase list This command is deprecated. Instead, use 'firebase projects:list' command to list your projects. No projects found.
これで前準備は完了です。
Firebase Projectの作成
プロジェクトルートからFirebaseプロジェクトを作成します。
firebase init
以下のステップに沿ってFirebaseプロジェクトを作成してください。
1. オプションリストから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
2. プロジェクトを選択
既存のFirebaseプロジェクトを選択、もしくは新規作成してください。
以下の例では既存のプロジェクト(hello-firebase-13bdb (hello-firebase))を選択しています。
? 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) ❯ hello-firebase-13bdb (hello-firebase)
3. デフォルトのPublishディレクトリに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)
4. URLの上書きオプションを設定
ここではNoを選択します。
? Configure as a single-page app (rewrite all urls to /index.html)? No
ビルド＆デプロイ
ビルド＆デプロイは一つのコマンドで完了します。
hugo && firebase deploy
hugo && firebase deploy
Building sites … WARN 2019/09/01 14:38:43 Page's .Hugo is deprecated and will be removed in a future release. Use the global hugo function.
WARN 2019/09/01 14:38:43 Page's .RSSLink is deprecated and will be removed in a future release. Use the Output Format's link, e.g. something like:
{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}.
| EN
+------------------+----+
Pages | 7
Paginator pages | 0
Non-page files | 0
Static files | 3
Processed images | 0
Aliases | 0
Sitemaps | 1
Cleaned | 0
Total in 19 ms
=== Deploying to 'hello-firebase-13bdb'...
i deploying hosting
i hosting[hello-firebase-13bdb]: beginning deploy...
i hosting[hello-firebase-13bdb]: found 11 files in public
✔ hosting[hello-firebase-13bdb]: file upload complete
i hosting[hello-firebase-13bdb]: finalizing version...
✔ hosting[hello-firebase-13bdb]: version finalized
i hosting[hello-firebase-13bdb]: releasing new version...
✔ hosting[hello-firebase-13bdb]: release complete
✔ Deploy complete!
ビルドからデプロイまで一瞬で完了しました。
最後に
いかがでしたでしょうか。本当に爆速でWebサイトの作成、デプロイができてしまいました。
CIの追加や、テンプレートの変更などもっと色々できるみたいですが、今回はここまでにしておきたいと思います。
まだまだ触り始めたばかりですが、シンプルで使いやすそうなのでこれからもっと使いこなせていけたらと思います。
