エンジニアブログを自作しました【その２】

HUGOを利用した静的サイト作成

 Posted on June 18, 2023  |  4 minutes  |  Mame

こんにちは！

このブログは自分でサイトを作成して配信してます。 サイトを構成するHTMLなどの作成方法について紹介します。

に分けて記載してます。 (2023年6月時点での情報になります。古くなってしまっている場合もありますのでご了承下さい。)

ツール

  • 使用しているツールは「HUGO」になります。

  • SSG (Static Site Generation)という仕組みでサイトを生成するツールになります。WordPressのようにリクエストごとにHTMLを構成する形とは異なり、固定のHTMLをホストサーバに配置しておくイメージです。下記の点でSSGの方がメリットが有りそうだったことと、使用目的が個人ブログに限定されていたので、今回はSSGを採用しました。

    • レスポンス速度が速い
    • 運用コストが低い

  • HUGOと同様の仕組みのツールとして下記があります。今後他のツールと比較して、HUGOより良さそうなら移行することも視野に入れてます。

環境構築

下記のようにしてHUGOの環境構築をしてます。


  • dockerをローカルPCにインストールし、下記の内容でDockerfileを作成、ビルドします。
FROM klakegg/hugo:0.101.0-ext-ubuntu

RUN apt-get update && \
    apt-get install -y curl && \
    curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" && \
    unzip awscliv2.zip  && \
    ./aws/install
  • 下記コマンドで先ほど作成したDocker Imageを起動します。
docker run --rm -it \
  -v $(pwd):/src \
  -p 1313:1313 \
  [イメージ名] \
  shell

テーマ

  • HUGOにはテーマという仕組みが有り、他の人が作ったテンプレートからサイトを作れます。
    • このサイトはbeautifulhugoというテーマを使用させて貰ってます。
    • テーマ選びの際はHUGO THEME STAR RANKINGを使用しました。
    • テーマの導入方法は各々のサイトに記載されていますが、基本的にはgit submoduleコマンドでサブモジュールとしてソースコードをダウンロードしてくる形式のようです。

設定ファイル

  • HUGOでは.toml拡張子のファイルが設定ファイルになってます。設定を変更することでテーマをさらにカスタマイズすることができます。
  • 例えばbeautifulhugoテーマの場合だと下記の他色々設定できました。
    • baseurlでサイト自身のURLが設定できます。リリースする際はリリース先のURLに変更してあげます。
    • themeで使用するテーマを設定できます。
    • DefaultContentLanguageでテンプレートの言語を選べます。
    • [Params]faviconでサイト上側中央にあるアイコンの画像を変更できます。(画像ファイル自体はstatic/imgディレクトリ内に置きます。)
    • [Author]部分でサイトフッタにあるSNSアイコンの種類やリンク先を変更できます。(特定のアイコンを非表示にしたい場合はtoml内でコメントアウトしてあげればOKです。)
  • 今回はAWSのS3に配置しCloudFrontで配信したいため、下記のように設定してます。
    • デプロイした際、自動でCloudFrontのキャッシュ削除もしてくれるので便利です。
[[deployment.targets]]
name = "[名前(なんでも)]"
URL = "s3://[バケット名]?region=[リージョン]"
cloudFrontDistributionID = "[ディストリビューションID]"

コマンド使い方

  • サイト作成
    • 新しく[サイト名]のディレクトリが作成され、その中にサイトのテンプレートが入ってます。
hugo new site [サイト名]
  • 新しいページの土台を追加
hugo new [ページのパス]
  • ローカルサーバ起動
    • http://localhost:1313 (tomlのbaseurlで設定したURL)でアクセスできます。
hugo server
  • ビルド
    • markdownを元にHTML作成することなどをやってくれます。
hugo
  • デプロイ
    • tomlファイルの[deployment][deployment.targets]の設定に従ってデプロイする。
hugo deploy
HUGO  blog 

See also