Hugoを使ってBlogをはじめてみる

自分のWEBサイトをもつことや、ブログを運営することなどこれっぽっちも興味なかったのですが、新型コロナの影響で自宅にいる時間が増えたのではじめてみようかなと思いました。

内容・ジャンルは様々です。

最初の一発目はどのようにBlogを運営するかについてつらつらと書こうと思います。

たくさんホスティングサービスはあるわけですが、Hugoを選択しました。 理由は、

• 無料で始める
• コンテンツはMarkdownで記述したい
• オサレな感じなテーマ・テンプレートを簡単に選択・適用したい 自分で作るのはメンド
• 静的サイトジェネレータ(Static Site Generator)を使ってみたかった

11tyとも思いましたが、11thのHP見て速攻ないなと。HugoのHPのほうがすぐに何ができるのかがわかりやすくスマートな印象をもったからです。 golangでできているので生成は早いに決まってますし。

使い方はHugoのQuick Startをみるのが早いのですが、ざっと手順を紹介したいと思います。

尚、以降の手順はMacでの手順となります。

大まかな流れ

• goのインストール
• hugoのインストール
• サイト作成
• テーマの追加
• ローカルサーバーを起動してみる
• 設定を変更する

goのインストール

anyenv, goenvをインストールします。 anyenvは、anyenvのgithubを参照すれば問題なくインストールできると思います。僕はbrewではなく、Manualでインストールしました。anyenvのインストールに加えてanyenv-updateのインストールもしておきます。 anyenvをインストールしてシェルを再起動したら、goenvのインストールは簡単です。

$ anyenv install goenv
$ exec $SHELL -l

goのバージョンは最新のstableをインストールします。

$ anyenv update
$ goenv install -l # リリース可能なバージョンを確認する。
$ goenv install 1.14.2 # 執筆時点での最新バージョン

anyenvのインストールで、eval $(anyenv init - zsh)を.zshrcなりなんなりに追記していると思いますが、この実行により、GOPATH環境変数が設定されます。 が、PATHに$GOPATH/binが含まれていないので、eval $(anyenv init - zsh)の後に、PATHに$GOPATH/binを追加しておきましょう。

# ~/.zshrc
export PATH="~/.anyenv/bin:$PATH"
eval "$(anyenv init - zsh)"
export PATH="$GOPATH/bin:$PATH"

Hugoのインストール

HugoホームページのInstall Hugoを参照してインストールします。僕はbrewを使用せずにgithubからcloneしインストールしました。

$ mkdir ~/src/github.com/gohugoio
$ cd ~/src/github.com/gohutoio
$ git clone https://github.com/gohugoio/hugo.git
$ cd hugo
$ go install --tags extended

サイト作成

HugoのQuick Startを参照しサイトを作成します。

$ cd ~/src/github.com/<自分のアカウント>
$ hugo new site blog

テーマの追加

Hugoのテーマ一覧からお好きなものを選びます。 一覧をみておわかりの通り、本Blogは、Hugo Future Imperfect Slimを使用させてもらっています。そのうち自分で作ろうかなと思いますが、デザインセンスはないので。多分つくらない。

$ cd blog
$ git init
$ git submodule https://github.com/pacollins/hugo-future-imperfect-slim.git

さくっと、テーマを適用して動かしたいのでテーマで用意されているサンプルサイトをコピーして適用してしまいます。

$ cp -r themes/hugo-future-imperfect-slim/exampleSite/* ./

ローカルサーバーを起動してみる

試しに、ローカルサーバーを起動してどのような見た目になるか確認します。

$ hugo server

http://localhost:1313 にアクセスするとご自分が採用したテーマのサンプルサイトが閲覧できるはずです。

設定を変更する

コンテンツを整理したり投稿していくのですがそのまえに、config.tomlを修正して、自分のBlog用の設定にします。

あとは、投稿を増やして静的サイト生成してどこかサーバーにデプロイしていく流れになりますが、githubでコンテンツ管理、マスターにマージしたらNetlifyにデプロイという流れにしようかなと思います。 githubでのコンテンツ管理は、ちゃんと運用していないのでなんとも言えないですが、

posts/