静的サイトジェネレーターでWEBサイトを構築してみた

こんにちは、アイシーティーリンクの藤井です。

前回（Amazon Cloud Front・Route53・ACMを使って静的ウェブサイトを独自ドメイン・HTTPS化してみた）の続きになります。

前回は下記のようなイメージで、静的なウェブサイトを構築しましたが、WEBの内容についてはテストページの状態でしたので、ちゃんとしたページにしたいと考えておりました。

ただ、カッコいいWEBページを作る知識は、私にはありません。。。

そこで今回は、静的サイトジェネレーターというソフトウェアを使ってデザイン性のあるWEBページを作成し、S3に公開してみようと思います。

静的サイトジェネレータとは

静的サイトジェネレーター（Static Site Generator）とは、静的なWEBサイトをビルド処理によって生成することができるソフトウェアの事です。詳しくは下記URLをご参照ください。

【2021注目】フロントエンド開発「静的サイトジェネレータ」
https://fastcoding.jp/blog/all/info/ssg/

今回は、Hugo（ヒューゴ）というソフトウェアを使ってWEBページを作ってみようと思います。

Hugoのダウンロード

まずは自分のWindows PCにHugoをダウンロードします。
・GithubのHugoダウンロードページ
https://github.com/gohugoio/hugo/releases
今回は最新バージョンの hugo_extended_0.88.1_Windows-64bit.zip をダウンロードして展開します。３つのファイルが展開されました。

Hugoの配置

次に、下記のように配置用のフォルダを用意します。
① Cドライブ直下に hugo というフォルダを作成
② hugo の下に bin と sites というフォルダを作成

先ほど展開した３つのファイルを bin の下に配置します。

環境変数PATHにパスを追加

次に環境変数PATHに C:\hugo\bin を追加します。

コマンドプロンプトを開いて、hugo version を実行します。下記のようにバージョンが表示されれば、配置完了です。

サイトの作成

コマンドプロンプトで siteフォルダに移動し、testpage というサイトを作成します。

cd C:\hugo\sites
hugo new site testpage 

sitesフォルダの下に testpage が作成されました。

テーマファイルのコピー

hugoに多くのテーマファイル（デザインテンプレート）が用意されており、好きなデザインを選べます。
https://themes.gohugo.io/themes

今回は、hugo-clarity というテーマをダウンロードします。
https://github.com/chipzoller/hugo-clarity

ダウンロードしたzipを、C:\hugo\sites\testpage\themes に展開します。
※フォルダ名 hugo-clarity-master は hugo-clarity にリネームします。

exampleSiteフォルダにある contentフォルダと staticフォルダをコピーして、

testpage の content と static にフォルダごと上書きします。

続いて、exampleSite → config → _defaultフォルダにある config.tomlファイルをコピーして、

testpage の config.tomlファイルに上書きします。

これでテーマファイルのコピーが完了です。

config.tomlの編集

config.toml の上部にある baseurl を 実際のサイトのURLのトップページに書き換えます。

baseurl = "https://www.nanjakorya.net/"

ローカル環境での動作確認

testpageフォルダに移動してから hugo server コマンドを実行し、ローカル環境で動作できるかを確認します。

cd C:\hugo\sites\testpage
hugo server -w -D

ブラウザで http://localhost:1313 にアクセスし、ページが表示されればOKです。

テスト記事を追加

コマンドプロンプトをもう１個開き、testpageフォルダに移動してから hugo newコマンドを実行します。testpage → content → postフォルダの下に my-first-post.md が作成されます。

cd C:\hugo\sites\testpage
hugo new post/my-first-post.md

ブラウザで再度 http://localhost:1313 にアクセスすると、記事が追加されたことが確認できます。

ファイル拡張子が .md とあるように、Markdown で記述されています。
◆ my-first-post.md

---
title: "My First Post" # Title of the blog post.
date: 2021-10-14T16:28:12+09:00 # Date of post creation.
description: "Article description." # Description used for search engine.
featured: true # Sets if post is a featured post, making it appear on the sidebar. A featured post won't be listed on the sidebar if it's the current page
draft: true # Sets whether to render this page. Draft of true will not be rendered.
toc: false # Controls if a table of contents should be generated for first-level links automatically.
# menu: main
featureImage: "/images/path/file.jpg" # Sets featured image on blog post.
thumbnail: "/images/path/thumbnail.png" # Sets thumbnail image appearing inside card on homepage.
shareImage: "/images/path/share.png" # Designate a separate image for social media sharing.
codeMaxLines: 10 # Override global value for how many lines within a code block before auto-collapsing.
codeLineNumbers: false # Override global value for showing of line numbers within code block.
figurePositionShow: true # Override global value for showing the figure label.
categories:
 - Technology
tags:
 - Tag_name1
 - Tag_name2
---
**Insert Lead paragraph here.**

サイトのビルド

ようやくビルドです。 testpageフォルダに移動し、ビルドを実行します。これにより、testpage → publicフォルダ配下にサイト公開用のHTMLファイル等が生成されます。

cd C:\hugo\sites\testpage
hugo -D

あとは、これらをS3にアップロードするだけです。

WEBサイトのアップロード

S3にアップロードします。

ブラウザでアクセスすると、問題なく表示できました。

さいごに

いろいろなネット記事を参考にしつつ、何とかWEBサイトを公開できました。サーバーレス構成のため、運用・メンテナンスコストが抑えられ、動的サイトに比べセキュリティ面のリスクも低減できるので、オススメしやすいですね。ほかにもGitHubリポジトリにPushして公開するやり方もあるようなので、色々勉強したいと思います。

それではまた会いましょう。