📝

Hugo+GitHubPagesでブログ作成

2021/02/03に公開

Hugo

Hugo is one of the most popular open-source static site generators.
With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugoは人気のあるオープンソースの静的サイトジェネレータの1つ
Markdwonが使えてサイト構築が早いのが特徴です。

今回はgo getで入れました。
goからじゃなくてsnapから入れる方法が公式的に推奨っぽいですね

$ go get -u github.com/gohugoio/hugo

Macの方はbrew install hugoでいいと思います。

早速ブログを作ってみましょう。
ブログの作成はhugo new siteで作成できます。

$ hugo new site test-blo

ブログの雛形を完成を完成させたら、記事を追加しましょう。

$ hugo new context/hello.md

記事を追加するとcontext配下にhello.mdが作成されます。

---
title: "Hello"
date: YYYY-MM-DD
draft: true
---

ちなみに、dateはローカルの時間で変化します。

このままでは何も表示されないのでテーマを反映させてみましょう。
今回はAnankeを試してみましょう。

カレントディレクトリで以下のコマンドを叩いていきましょう。

$ git init
$ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
$ echo 'theme = "ananke"' >> config.toml

config.tomlは設定ファイルとなります。
twitterやfacebookなどのソーシャルアカウントやGoogleAdsenseなどもこちらから行えます。
テーマが反映されたことを hugo serverで確認しましょう。

ここでサイトができていたらgithub pageの準備です。

Github Pagesに公開する場合は、config.yamlを編集する必要があります。

publishDir = 'docs'

これを追加することによって、GithubPagesで公開できます。

次にhugoコマンドを叩きましょう。
カレントディレクトリにdocsディレクトリが作成されます。このディレクトリは公開用のディレクトリになります。

適当なリポジトリを作成して、pushします。
次にsettings > GitHub Pagesを編集します。

docsディレクトリを見てGitHub Pagesを作成してくれます。

今回はhugoで自動生成されたものまでpushしてしまったので、次回は公開用と分けて
pushできる仕組みを書きたいと思います。