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

2020-01-02

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 であれば以下のコマンドでインストールできます。

bash

brew install hugo

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

bash

hugo new site quickstart

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

bash

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

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

bash

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

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

bash

hugo new posts/my-first-post.md

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

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

text

---
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でブログを確認する。

bash