macOS Catalinaで静的サイトジェネレータHugoを使えるようにした

6037 ワード
macos homebrew Hugo homebrew テキストリンク

静的サイトジェネレータHugoを使えるようにする

はじめに

macOS CatalinaにStatic Site Generator(静的サイトジェネレータ) Hugoを導入し、使えるようにする。

Hugoとは

Hugoはオープンソースで開発されているStatic Site Generatorである。

一般的に、Webサイト構築ではWordpressのようなCMS（コンテンツ管理システム）が使用されることが多い。が、個人で運用してるようなblogなどのWebサイトでは静的サイトジェネレータを用いて構築したほうが、システム管理・保守の面でメリットがある。

ほかにも、WebページのコンテンツをGitのようなバージョン管理システムを用いて管理できるようになる利点などもある。

macOS Catalina にセットアップする

インストール

Hugoの公式サイトに記載の内容に基づいて、macOSにインストールする。

$ brew install hugo
$ hugo version
Hugo Static Site Generator v0.71.1/extended darwin/amd64 BuildDate: unknown

サンプルプロジェクトを作成する

Hugoの公式サイトには、以下の例が記載されている。

$ hugo new site quickstart

このコマンドは、カレントディレクトリのquickstartディレクトリが作成される。ユーザーのhomeディレクトリで実行した場合、/home/{user}/quickstartが作成される。

ここでは~/Sitesディレクトリ以下にsamplesiteプロジェクトを作成する。

$ mkdir Sites
$ cd Sites
$ hugo new site samplesite
$ ls samplesite
archetypes/  config.toml  content/     data/        layouts/     static/      themes/

テーマを導入する

Hugoでは、公式サイトから様々なCSSテーマを入手できる。

ここではTwenty Fourteenというテーマを入手する。テーマの入手方法はzipアーカイブで取得する方法もあるが、ここではGitを使って取得する。

$ cd samplesite
$ git init
$ git submodule add https://github.com/jaden/twentyfourteen.git themes/twentyfourteen

config.tomlにテーマの設定を追記する。

echo 'theme = "twentyfourteen"' >> config.toml

コンテンツを用意する

記事を追加する。

$ hugo new posts/my-fast-post.md
/Users/{user}/Sites/samplesite/content/posts/my-first-post.md created

Hugoではsamplesite/content以下にコンテンツを格納する。

$ tree ./samplesite
./samplesite
├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── posts
│       └── my-first-post.md  //作成したコンテンツ
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── twentyfourteen
        ├── LICENSE.md
        ├── README.md

my-first-post.mdの内容は適当に記入する。これで記事の用意が完了。

サンプルサイトを立ち上げる

Hugoでは静的サイト出力する前にローカルサーバを起動して、内容を確認することができる。

$ pwd
/Users/{user}/Sites/samplesite
$ hugo server -D
( ローカルサーバは http://localhost:1313/ で起動する。Ctrl+C で終了)

サイトの設定をする

構築するWebサイトのURLや言語コードなどを設定する。

config.toml
baseURL = "http://example.org/"  //適時URLは修正する。
languageCode = "ja-JP"
title = "My New Hugo Site"
theme = "twentyfourteen"

静的サイトを出力する

$hugo -D

samplesite/public以下に静的サイトのファイルが出力される。

おわりに

作成されたファイルをドメイン付与したAmazon S3などにアップロードすれば、静的Webサイトとして公開できる。

テーマCSSなども自由に編集できるので、自分の好みに合わせてカスタマイズすることもできる。