This page looks best with JavaScript enabled

HUGOによる静的ウェブサイト環境構築

 ·   ·  ☕ 10 min read  ·  ✍️ Reeve
    🏷️

本ブログ初投稿の記事。
今回はこのサイト自体の環境構築の話をしたい。

この記事の内容

  • Markdownで書いた記事を簡単に投稿できるウェブサイトを(維持費無料で)構築できる

はじめに

ブログを書こうとする場合、WordPressを使うのが一般的だと思う。
今までもWordPressで作成したブログは持っていたが、更新が億劫になり、完全に放置している状況になってしまった。
さくらのレンタルサーバーを借りているため、安いとは言え運用にはお金がかかる。
正直放置しているのはもったいないと感じた。

久々にWordPressにログインして、プラグインなどの更新をしたところ、記事を作成するインターフェースが大きく変化してしまった。
ここで完全にやる気を失った…

私が感じているWordPressでのブログ環境の問題点を記述してみる。

  • サーバーをレンタルするため、金銭的な負担が発生する。
  • サーバーのスペックによっては、全体的にもっさりとした動作になる。
  • プラグインなどのアップデートにより、環境が定期的に変化してしまう。

「WordPress めんどくさい」というめちゃくちゃなワードでググってみたところ、同じことを感じている人の記事を発見。

ブログはWordPressは辞めて、全て静的サイトジェネレーターに移行したい - Qiita
Qiita (https://qiita.com)

感じている問題点は私とほぼ同じものだった。
そして、どうやら 「静的サイトジェネレーター」 というものが解決策になりそうとの情報を得る。

必要な要素

今回の環境構築で必要となる要素を説明する。

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

私自身先ほど知ったので正しく認識できている自信はないが、特徴をまとめると以下のような感じかと。

  • Markdownで書いた記事をビルドしてサイトを構築する。
    • Gitのリポジトリですべて管理できる。
  • コンテンツを保管するデータベースが不要。
    • セキュリティの心配がほぼない。
    • デプロイ時にビルドし静的に動作するため、サイトの表示が早い。
  • データベースを用いた動的な動作は行えないため、コメント欄などの機能は基本的には不可。
    • GitHubのIssueなどと連携してコメント機能を実現するなど、方法はある。

Markdownでの記事の執筆はWordPressでもプラグインを利用することでできたが、テキストエディターで書いた内容をWordPressの投稿ページに移植する作業がかなり面倒だった。
データベースを持たないため、セキュリティの面でも安心できるのは心強い。

静的サイトジェネレーターは様々なものが開発されており、特徴も様々な模様。

Webホスティングサービス

静的サイトジェネレーターでサイトをビルドできることはわかったが、公開するためにはどこかのサーバーに載せる必要がある。
それには、Webホスティングサービスなるものが使われるらしい。
静的サイトのホスティングには以下の3つのサービスが主に使われているとのこと。

GitHubのリポジトリから自動でビルドすることもできるとか。
それはどう考えても便利そう。

環境構築

構築する環境の概要

選択肢が色々ありすぎて悩むが、とりあえず目についた情報と直感で選んでみた。

  • 静的サイトジェネレーター : HUGO
    • Go言語で作成されているらしく、最近Go言語の勉強を始めたからなんとなく
    • ビルドが早いのが特徴？
  • Webホスティングサービス : netlify
    • 無料枠が一番充実しているらしい
    • GitHubからの自動ビルドが簡単に設定できる、とか

構築したあとのワークフローは以下のようになる。

  • テキストエディターで記事を書く
    • vimやVisual Studio Codeなどのお気に入りのエディターでMarkdownで書ける
    • ローカルサーバーを立てることで、環境でのプレビューもリアルタイムに行える
  • 書き終わった記事をGitHubのリポジトリへPush
    • 同時にバックアップにもなる
  • netlifyがGitHubリポジトリの更新を検知して自動ビルド、公開サイトに反映
    • GitHubにpushするだけで更新される

環境構築の手順

基本的には以下の手順を踏むことになると思う。

  • HUGOのインストール
  • サイトの作成
  • GitHubへのpush
    • 登録していなければ、GitHubのユーザー登録
  • netlifyのユーザー登録
  • netlifyとGitHubの接続

HUGOのインストール

この手順のみ、使用しているPCの環境(OS)により異なる。
私はUbuntu18.04を利用しているので、それを中心に説明を進める。
それ以外のOSを利用している方は、以下のリンクなどを参考に進めれば問題ないと思う(丸投げ)。

最終的に以下のコマンドでHUGOのバージョンが表示される状態になればOK。

1
2

hugo version
> Hugo Static Site Generator v0.63.0-DEV/extended linux/amd64 BuildDate: unknown

では、Ubuntu 18.04でのインストール方法を説明する。
インストール方法は何パターンかあるみたい。
ちなみに私はソースからビルドした。

  • snapを利用した方法
  • go getを利用した方法
  • ソースからビルドする方法
snapを利用した方法

一番手軽なのはsnapを利用した方法らしい。
ちなみにaptでもインストールはできるが、バージョンが古いらしい。
ターミナルを立ち上げて、以下のコマンドを打ち込む。

1

sudo snap install hugo --channel=extended
go getを利用した方法

Go言語の環境を整えているのであれば、go getを利用することも可能。

1

go get hugo

Go言語の環境を整えていない方は以下を参照。

プログラミング環境構築【Go言語編】
Freaky Engineer Notes (http://fe-notes.work)

ソースからビルドする方法

以下のリポジトリからソースコードを取得し、ビルドする方法。
この場合もGo言語の環境が必要になる。

GitHub - gohugoio/hugo: The world’s fastest framework for building websites.
GitHub (https://github.com)

以下のコマンドを実行して、ソースコードからビルドする。
--tags extendedをつけることで、Sass/SCSSなどを使えるバージョンをビルドすることができるらしい。

1
2
3

git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended

しばらくするとインストールが完了する。
完了したら、前述のバージョン確認のコマンドを実行して、動作確認。
無事バージョンが確認できたら、この手順は完了。

サイトの作成

新しいサイトの立ち上げ

続いて、実際にサイトを作成していく。
作業ディレクトリを作成したい場所まで移動して、以下のコマンドを実行する。

1

hugo new site (作業ディレクトリ名)

これでサイト用の作業ディレクトリが作成される。

次に、サイトに利用するテーマを選択する。
このページにアクセスし、好みのテーマを探す。

テーマが決定したら、該当テーマのページのGetting stertedを参考にインストールする。
基本的には以下のコマンドを実行することになるかと。

1
2

cd (作業ディレクトリ名)  
git submodule add (該当テーマのGitHub URL) themes/(テーマ名)

使いたいテーマのページを参考に、作業を進めれば良いが、
おそらくは設定ファイルを何個か修正することになるかと思う。
大半のテーマでは、themes/(テーマ名)以下にexampleSiteというディレクトリがあり、
これを作業ディレクトリのルートにコピーすることで、サンプルの環境を構築することができる。
このサンプルを修正して、自分用の設定にしていくのが一番手っ取り早いと思う。

現在はこのサイトはzzoというテーマを使用している。
モダンな機能をかなり実装されており、開発も継続的に行われている模様。
とてもよいテーマだと感じている。

ここまで完了したら、以下のコマンドを実行してローカル環境でサイトをビルド。

1

hugo server -D

-Dオプションはドラフト記事もプレビューするモードらしい。
ドラフト記事については後ほど説明する。

サーバーが無事立ち上がると以下のテキストが表示される。

1
2

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)  
Press Ctrl+C to stop

言われた通り、ブラウザを立ち上げてhttp://localhost:1313/にアクセスしてみる。
自分が選択したテーマのWebページが表示されたら、サイトの構築は完了。

ちなみにHUGOはビルド時にキャッシュを利用することで短時間でのビルドを可能としている。
しかし、たまにそのせいで画像が更新されないなどの現象が発生する。
その場合はキャッシュを無効にすることで再度画像を読み込むことができる。

1

hugo server --ignoreCache
新しい記事の作成

次に、新しい記事の作成方法について説明する。
作成するときは作業ディレクトリのルートで以下のコマンドを実行する。

1

hugo new posts/(ファイル名).md

ファイル名は自由に設定してOK。
ここで設定したファイル名はそのままこの記事のURLになるので、あまり頻繁に変更しないほうが良い。

では、作成した.mdファイルを開いてみる。
どのようなテキストエディタを使用しても良いが、私はNeovimを使用している。
テーマによって若干異なるが、以下のような文字が初めから入っているはず。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

---
author: "Reeve"
title: "Test"
date: 2020-03-17T23:00:05+09:00
description:
featured_image: "thumbnail/sample.png"
image: "logo/Freaky_rectangle.png"
tags:
-
series:
-
categories:
-
draft: True
---

ちなみに新規作成時のこのテンプレートはarchtypes/default.mdというファイルを修正すると変更できる。
自分好みに変更しておくと楽。

テーマによって異なるとは思うが、各パラメータの意味は以下の通り。

  • author
    • 著者名
  • title
    • 記事のタイトル
    • デフォルトはファイル名になっている
  • date
    • 記事の作成日時
  • description
    • 記事の概要
  • featured_image
    • 記事のサムネイルとして設定する画像
    • 画像はstatic/imagesの下に配置する
  • image
    • OGPタグに設定される画像(TwitterなどにURLを貼ったときに表示される)
    • 画像はstaticの下に配置する
  • tags
    • 記事のタグを設定
  • series
    • 記事のシリーズを設定
  • categories
    • 記事のカテゴリーを設定
  • draft
    • trueだとドラフト記事扱いとなり、本番環境には表示されない
    • ローカルでのビルド時に-Dオプションをつけるとプレビューできる

本文はこれらの設定の下からMarkdownで書いていく。
記事を新たに更新する度に、即座にリビルドされて、Webページに反映される。
画面の左側にテキストエディタ、右側にブラウザを配置して作業すると、打ち込んだ内容のプレビューがすぐに見れて実にスムーズ。

記事が完成したら、いよいよ公開に向けて準備を進める。

GitHubへのpush

記事ができたら、GitHubにリポジトリを作成し、pushする。
ここでは、GitHubの詳細な使い方は紹介しない。
ネットで調べると参考になる記事はたくさん出てくるかと思う。

補足としては、リポジトリはprivateでも大丈夫。
むしろ、作成中のドラフト記事などがあることも考えると、publicにはしない方が良いかと思う。

netlifyのユーザー登録

いよいよnetlifyの設定を進めていく。
その前にアカウントを持っていない方はユーザー登録が必要。
以下のサイトにアクセスして、ユーザー登録を行う。

Netlify: Develop & deploy the best web experiences in record time
Netlify (https://www.netlify.com)

手順は以下の通り。

  • 「Get started for free」をクリック
  • ユーザー登録に使用するアカウントを選択
    • どのサービスを選んでも問題はないが、私はGitHubのアカウントで登録した。
  • 連携の設定を進める
    • メールアドレスに届くリンクにアクセスして、アカウントを有効化する。

以上でアカウントの作成が完了する。

netlifyとGitHubの接続

netlifyとGitHubの接続を行い、自動ビルドの環境を構築する。

  • netlifyにログイン
  • 「New site from Git」をクリック
  • 連携するサービスとして「GitHub」を選択
  • GitHubのアカウントにログイン
  • HUGOのサイトのリポジトリを選択
  • 「Deploy site」をクリック
    • サイトがデプロイされる。
  • デプロイしたサイトのURLを編集
    • 「Site settings」の「Change site name」を編集する。
  • 編集後のURLをコピーし、HUGOの「config.toml」内の「baseURL」に貼り付ける
  • GitHubに再度push
  • URLにアクセスして、問題なくサイトが表示されることを確認

以上でサイトの構築が一通り完了。

まとめ

これで簡単に記事を更新できる環境が完成した。
今後はWordPressで作成していたサイトの記事をこちらに移植していくつもり。

Share on
Reeve
WRITTEN BY
Reeve
Researcher/Engineer