Skip to content

Amplifyを使って、Hugoで作成したWebページを公開する(1)

   

はじめに

数年前のことですが、このBlogを始める前にも少しの間だけBlogを公開していました(筆不精な性格のためほとんど更新してませんでした)。

以前のBlogは、StaticPressプラグインを導入したWordPressで静的ファイルを生成し、AWS S31にアップロードして、AWS S3のWebホスティング機能とAWS Route532のCNAMEを使って公開をしていました。

今回Blogを一から作るに当たって、コンテンツの作成はStatic Site GeneratorのHugoを利用し、公開にはAWS Amplify(以下、Amplifyとする)を利用することに決めました。

この記事では、一連の作業内容を自分用の備忘録も兼ねて整理したいと思います。

なぜHugoを採用したのか

先に書いてあるとおり、元々はWordPress+StaticPress+AWS S3+AWS Route 53の組み合わせでBlogを構築していました。今回Blogを再開するにあたりこの方法を検討しましたが、以下の課題があることから採用を見送りました。

  • WordPress導入の準備段階で、PHPの導入、Webサーバ構築、MySQLサーバ構築の作業が発生する
  • StaticPressプラグインの開発が止まっている
  • S3のWebホスティング機能がHTTPSに対応していない

上記の課題については、①LAMP環境を用意する、②StaticPressに変わるプラグインを利用する、③AWS CloudFrontを併せて利用する、という手段で解決可能ではありますが、環境整備や検証に時間を要するため、Hugo+Amplifyで構築することにしました。

Hugo採用によるメリット

Hugoを採用することで、WordPress+StaticPressの組み合わせと比べて、以下のメリットを得ることができました。

  • 余計なサーバ構築をする必要がなくなった
  • blogをソースコードで管理するため、GitHubのようなリポジトリサービスを使ったバージョン管理が導入できるようになった
  • テーマカスタマイズのトライ&エラーが容易に行えるようになった
  • AmplifyやNetlifyのようなデプロイサービスとの連携が容易に行える

得られるメリットが個人的にはとても大きいので、多少の勉強は必要ですがHugoを使って行こうと思いました。

実際にHugoでWebページを作る

ここでは、このBlogを構築するために実施した手順を整理したいと思います。

説明用に別途新しいWebページを作成していますが、説明を書き終えた段階で削除するので、ご注意ください。

想定要件

以下の要件を想定して、整理します。

項目名 要件
Hugoプロジェクト名 study-hugo
GitHubリポジトリ名 study-hugo
公開用のURL https://study.rkarsnk.jp 3
Hugo用テーマ inkblotty

Hugoの導入

macOSならhomebrew導入後に、以下を実行すればHugoが利用できます。

$ brew install hugo

インストール方法の詳細は公式ホームページのInstall Hugoを参照してください。

Hugo プロジェクトの作成

ローカル環境にHugoのプロジェクトを作成します。

ターミナルを起動し、任意のディレクトリで以下のコマンドを実行します。

$ hugo new site study-hugo

study-hugoというディレクトリができます。このディレクトリがHugoプロジェクトのルートディレクトリになります。

Hugo テーマの取得

今回はGitHubで公開されているinkblottyテーマを取得します。

テーマの取得方法はZIPファイルをthemesフォルダ以下に解凍する方法とGitコマンドを使って取得するという方法があります。個人的にはgit submoduleを使って取得する方法をオススメします。以下ではHugoプロジェクトをgitで管理できるようにした上で、submoduleとしてinkblottyテーマを取得しています。

$ cd study-hugo
$ git init
$ git submodule add https://github.com/tosi29/inkblotty.git themes/inkblotty

config.tomlの作成

Hugoの設定はconfig.tomlを使って行います。私はnasust dev blog Hugo入門を参考にして、config.tomlを作成しました。

config.tomlで設定できる項目については、Hugoのconfig.tomlの設定についてまとめてみた - DASHI LAB.が参考になると思います。

baseURL = "https://study.rkarsnk.jp/"
title = "Hugoのお勉強"
author = "rkarsnk"
defaultContentLanguage = "ja"
languageCode = "ja-JP"
disablePathToLower = true
hacCJKLanguage = true
pluralizeListTitles = false
pygmentsUseClasses = true
pygmentsCodefences = true
theme = "inkblotty"
paginate = 10

summaryLength = 150

[outputs]
	page = [ "HTML" ] 

[Params]
	readmore = true

[taxnomiese]
	tag = "tags"

[permalinks]
	post = "/:section/:year/:month/:day/:filename"

[filename]
	filename = "sitemap.xml"

[menu]
	[[menu.main]]
		identifier = "home"
		name = "Home"
		url = "/"
		weight = 1
	[[menu.main]]
		identifier = "blog"
		name = "投稿一覧"
		url = "/post"
		weight = 2

記事作成

最初に記事用のディレクトリを作成します。記事用のディレクトリはcontent以下に作成します。

$ mkdir content/post

次に記事を作成します。以下のコマンドを実行すると、content/post/helloworld.md が作成されます。

$ hugo new post/helloworld.md

作成されたMarkdownファイルを編集します。

簡単に以下のように編集しています。drafttrueからfalseに変更することで、公開用の記事になります。

---
title: "Helloworld"
date: 2020-12-31T16:25:48+09:00
draft: false
---
# Hello, Hugo!

Hugoサイトの動作確認

この段階でデプロイ前のサイトの動作を確認できます。 Hugoプロジェクトのルートディレクトリで以下のコマンドを実行します。

$ hugo server -D

http://localhost:1313/ にブラウザからアクセスすると、以下の図1のように作成したサイトの動作を確認できます。

図1 ブラウザ画面

(参考)静的ファイルの生成

Hugoプロジェクトのルートディレクトリで以下のコマンドを実行します。

$ hugo

publicディレクトリが作成され、静的Webページが出力されます。ここで出力されたファイルを任意のWebサーバのDocumentRootに配置すれば、Webページとして閲覧することができます。

Amplifyを利用する静的ファイル生成をAmplify側で実行することになります。記事作成の作業で、この操作は不要ですが参考までに記載しておきます。

おわりに

今回は、Hugoのインストールから始めて、Hugoプロジェクトの作成、記事作成、動作確認を行うところまで整理しました。次回以降の記事では、今回作成したプロジェクトをGitHubにアップロードし、Amplifyを利用して公開するところまで整理したいと思います。

最後まで読んでいただきありがとうございます。


  1. AWSが提供するストレージサービス ↩︎

  2. AWSが提供するDNSサービス ↩︎

  3. ドメインはRoute53サービスを使って取得済みとする。なお、私はVALUE DOMAINで取得したドメインをRoute53で管理しています。 ↩︎