Hugoで自分のブログを作る

2019-07-06 |
2019-11-02

The Hugo Gopher is designed by Renée French


Hugoとは

こちら が公式サイトになりますが、トップページにこう書いてあります。

The world’s fastest framework for building websites

直訳ですが、世界最速のウェブサイト構築フレームワークって書いてあると思います。
HugoはGo言語で書かれているオープンソースの静的サイトジェネレータです。

静的サイトジェネレータっていう聞き慣れない単語が出てきました。
ココらへんはハッキリと違いを説明できているか不安ですが、

動的サイトは、サーバ側で処理をして表示する内容をユーザや場面に合わせて変化させる仕組みを持ったWebサイトだと思っています。
(例えば、ログイン機能があるようなデータベースと連携しているようなWebサイトとかです。)

静的サイトは動的サイトとは対照的に、どのユーザが見に来ても同じ内容を表示するような、既にアップロードされているHTMLファイルなどを表示するだけのWebサイトと言うふうに思っています。

Hugoは静的サイトを出力してくれるフレームワークということです。しかも世界最速。

Hugoを選んだ理由

以前レンタルサーバを借りてWordPressでブログをやっていたことがありますが、毎月のサーバ代を地味に負担に感じていました。

熱心に更新しているときはそこまで気になりませんが、ちょっと他のことに夢中になったりして更新が疎かになると、余計なものにお金払ってる感がありました。

勉強も兼ねてWebサイトを自分で作ってみたいと思っていたので、ブログサービスは利用したくないし…

維持費をできるだけ安く済ませてブログやりたいなぁと思っていたところ、HugoとNetlifyというホスティングサービスの合わせ技で無料でブログ運営できそうということがわかりました。(Netlifyの無料枠に収まるうちは!)

私の

  1. 自分でWebサイト作ってみたい
  2. サーバ代は安くしたい

という目的がかなえられるので、もうこれしかない!とHugoで自分のブログを作ると決意しました。

Hugoの導入

以下の環境で試してみます、

PC: MacBook Air
OS: macOS Mojave 10.14.5

Win、Linuxの場合についても公式に記述がありますので、 こちら を参考にしてみてください。
インストール以降の操作は共通ですので、インストールを乗り越えれば大丈夫です。

それでは早速Hugoを導入してWebサイトを表示するところまでやってみようと思います。

Quick Start | Hugo

こちらのページにHugoを始めるためのイントロダクションがあります。
大体の流れは、

  1. Hugoのインストール
  2. Hugoを使って新しいサイトの作成
  3. テーマの追加
  4. 記事の追加
  5. Hugoサーバの起動

というものになっています。

早速Hugoを使って自分のサイトを構築してみたいと思います。

Hugoのインストール

まずは、Hugoをインストールします。

brew install hugo

インストールが成功していれば、次のコマンドでHugoのversionが表示されます。

hugo version

結果

Hugo Static Site Generator v0.55.6/extended darwin/amd64 BuildDate: unknown

サイトの作成

Hugoを使ってサイトを作成します。
サイトを作成したいディレクトリに移動して、your_site_nameの部分を自分の好きな文字列に置き換えて、以下のコマンドを入力してください。

hugo new site your_site_name

そうすると、your_site_nameで指定した名前のディレクトリが作成されて、その中にHugoに必要なファイルが入っています。

テーマの導入

この時点でサイトの原型はできていますが、このままHugoのサーバを起動してサイトを表示させようとするとエラーが発生します。
なぜなら、各ページを表示するもとになるテーマが設定されていないからです。

というわけで、テーマを導入していきます。

イントロダクションにあるように、Anankeというテーマを適用していきます。

まずは、先ほど作成したサイトのディレクトリに移動します。

cd your_site_name

gitを使える人は、

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

とすることで、テーマを導入できます。

gitを利用していない人は、 こちら からダウンロードして、解凍したものanankeにリネームしてthemesディレクトリに入れます。
これでgitを利用していない人もテーマを導入できました。

最後に設定ファイルにどのテーマを使うか記述します。

config.tomlファイルをテキストエディタなどで開いてもらって、

theme = "ananke"

を追加します。

記事を作成

テーマを導入した時点でサイトを表示してもエラーは生じなくなりますが、表示するコンテンツがないとどういう配置になるのかを確認できません。

というわけで、先にHugoで表示するコンテンツを作成します。

hugo new posts/my-first-post.md

と入力すると、contents/posts/my-first-post.mdが作成されています。

その中身を見てみると、

---
title: "My First Post"
date: (作成日時)
draft: true
---

このような形になっていると思います。

—で囲まれている中身をFront Matterといって、このmdファイルの設定なんかを記述します。

記事の内容自体は、Front Matter以降、下の—以降にMarkdown形式で書いていけばOKです。

サイトを表示する

最後にサイトを表示させます。

hugo server -D

と入力してください。
localhost:1313に接続することで、出力されたWebサイトを見に行けます。

これでHugoで自分のブログを作るための準備が終わりました。

これ以降は、自分でmdファイルを作成していけばOKです。

おわりに

Hugoを用いて自分のWebサイトを作る方法を、公式のイントロダクションに沿ってやってみました。

また、

hugo

と入力することで、public/以下にHugoが生成するhtmlファイルなどが出力されます。
ホスティングサービスなんかにそれをアップロードすれば、インターネットで公開することができます。

私はテーマを自作したい、いじってみたいと思ったので、次回以降はテーマの作成の仕方について解説していけたらと思います。

これからHugoで自分のサイト作ってみようかなって言う人の役に立てたら幸いです。

Please share, if you like this.