Hugoを使ったブログ運営方法の紹介

Hugo を使ったブログ運営も 1 年ほど経過したので、Hugo の使い方や自分の行っている Hugo を使ったブログ運営方法を紹介します。

Hugo を使ったブログ運営方法

Hugo の始め方などは、ネット上にいくつかありますが、その先の使いやすい運営方法はあまりでてきません。

私も最初の頃は、Nginx を使った VPS 上の Web サーバに Hugo で作った public フォルダを置くということをしていました。しかしこの方法だと、デプロイ後にミスが見つかるたびに public フォルダを置き直す作業をコマンドを打ち込んで行うのでかなりめんどくさかったです。あとは、証明書の更新がやっかいでしたね。

現在の運営方法は、Hugo を Docker コンテナ上で動かして、ブログフォルダは GitHub で管理しています。ブログのホストは Netrify で行っており、GitHub に push すると Netrify でビルドを行い、デプロイされる仕組みになっています。なんと証明書の更新も Netrify が自動でやってくれます！しかも無料（制限はある）！

この方法だと、Docker と Git がインストールされている PC ならすぐに作業環境を構築し、デプロイまで行うことができます。さらに、デプロイも GitHub に push するだけなので、Hugo のビルドコマンドを入力したり、public をフォルダを移したりする作業がなくて楽です。

準備するもの

• Docker
• Git
• GitHub アカウント
• AWS アカウント
• 独自ドメイン

作業 PC が変わらないという方は、Docker はなくてもいいです。Docker を使わない場合はローカルに Hugo の準備を行ってください。Docker を使った Hugo 環境構築については、以前まとめたのでこちらをご覧ください。

Git と GitHub や AWS アカウントについてはたくさんわかりやすい情報がネットにあるので大丈夫でしょう。

AWS アカウントは DNS の管理のために Route 53 を利用するために必要です。

ドメイン取得

すでに独自ドメインを取得済みの方はここをとばしてもらって大丈夫です。

ドメインを持っていない方は、AWS の Route 53 にアクセスし、ドメインを取得しましょう。もちろん Route 53 以外の DNS サービスを使っていただいても大丈夫です。

ドメインの取得は有料なので注意しましょう。また、取得が完了するのに数日かかる可能性があるので時間にも注意です。

Route 53 を使ったドメイン取得方法はこちらのサイトに詳しく書いてあります。

コンテンツ、レイアウト準備

Hugo を使ったブログ準備です。

公式の手順に従って準備します。

まずは Hugo のインストールを行います。 Mac であれば以下のコマンドでインストールできます。

brew install hugo

インストールができたら新しいサイトを作成します。

hugo new site quickstart

次にテーマを追加します。

cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

これでquickstart/themes/にanankeというテーマが配置されます。quickstart/config.tomlにこのテーマを使うことを明記します。

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

次にコンテンツをてきとうに追加します。

hugo new posts/my-first-post.md

追加したコンテンツはquickstart/content/post/my-first-post.mdにあるはず。

my-first-post.mdの中身にちょっと言葉を加えて以下のようにする。

---
title: Hugoを使ったブログ運営方法の紹介
createdAt: '2020-01-02'
updatedAt: '2020-01-02'
tags: ['Hugo']
draft: false
description:  'Hugoをブログ作成は非常に使いやすくて便利ですよね。私が1年ほどHugoを使ったブログ運営を行ってみて、いろいろ改良した現在のHugoブログ運営環境をご紹介します。'
thumbnail: '/img/twitter-card.png'
---
# Hugoを使ったブログ運営方法の紹介


Hello world!!

最後に以下のコマンドを入力し、localhost:1313でブログを確認する。

hugo server -D

以下のように表示されるはず。

これで Netrify にデプロイするものの準備ができました。

デプロイする前に config.toml の baseURL を取得したドメインに書き換えておくのをお忘れなく。

Netrify

まずはアカウントを作成します。GitHub のアカウントがあればそれでログインできるはずです。

やり方についてはHugo の公式に詳しく記載されています。

やることはブログコンテンツが入った GitHub レポジトリの指定、ビルドコマンドの指定、Publish ディレクトリの指定、使用している Hugo のバージョン指定などです。

Hugo のバージョンは 使用しているものが Netrify で対応しているか確認を行ってください。

あとは、Custom Domain の設定を行います。設定はこちらのサイトが参考になります。

Route 53 側の設定もいじる必要があります。Netlify では www ありドメインを推奨しているのでリダイレクト等の設定も行います（参考）。あとはここが参考になります。

設定が完了すると、GitHub に push するとビルド → デプロイまでやってくれるようになります。

感想

移行してすぐにまとめておけばよかったと後悔してます。

もともとはさくらインターネットで DNS の管理をしていて、そこから Route 53 に移行するのに苦労した記憶があります。 あとは、Hugo のビルド部分ですね。フォルダの指定やバージョンの指定がうまくいかず何度もやり直しました。

まあ、とにかくいろいろな苦労の末に現在のやり方に落ち着いてます。 今のところ不満なく快適にブログの執筆ができてます

他にもっといいやり方があったら教えてください！