※これは自作ブログに投稿したものと同じ記事です。
Hugoで自作ブログサイトを作ってみる

はじめに

最近、Twitter の有名なすごい人たちがみんな Hugo を使って自作ブログを作っていて、ほげーーやってみたいーー、ってなったので試してみた。
また、Go 製のツールということで、勉強したかった Go を使えるかも！という思いもあった。（結果、Go は 1 ミリも使わずに終わった）

さんぽしさん
Hugoでさくっと自作ブログを作った – さんぽしの散歩記

コミさん
Hello My New Blog

Hugo とは？

Hugo は Golang 製の静的サイトジェネレーター。HTML とか CSS みたいなものを自動生成してくれるやつ。
The world’s fastest framework for building websites | Hugo
そういえば昔、reveal.js っていう HTML/CSS で Web スライドが書けるやつを拡張した reveal-ck っていう Ruby 製のツールを使ったことがあった。
これもMarkdownでスライドを作れるっていうお手軽でいい感じだった。（途中からデザインを凝り始めて朝日が昇ってしまったが…）

話は戻って Hugo だが、めちゃくちゃ早いらしい。（他と比べたことがないからわからん）

何はともあれ構築していく。

雛形作成まで

Hugo にはたくさんの Thema があって、自由に選び放題。（ライセンスとかの確認は注意）
ここから好きに選べる。ブログサイト以外でも使えそうなものがたくさんだから、ちょっとしたハッカソンでのテンプレ作りに良さそう。（Hugo じゃなくてもいいけど）
Complete List | Hugo Themes

テンプレ作成

というわけで、まずは Hugo をインストールしていく。

$ brew install hugo

他の OS は本家を参照してください。

Install Hugo | Hugo

入ったら、次のコマンドで雛形が生成される

$ hugo new site blog && cd blog

$ hugo new site {好きな名前}で作られる

そうすると次のようなものたちが生成される

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

現時点だと、全部空のディレクトリがあるだけ。

テンプレートテーマを適用していく

先ほどのサイトからテーマを選ぶ。
今回は、Timer Hugoというものを選んだ。レスポンシブに対応してるし、結構いろいろカスタムできそうだったから。

Timer Hugo | Hugo Themes

さっき生成した themas に submodule としてテーマを入れる

$ git init && git submodule add https://github.com/themefisher/timer-hugo.git themes/timer-hugo

このthemasには複数テンプレを入れてもいいが、そうなってくるとどれを適用するのかわからなくなるので、config.tomlで明示的に宣言しておく。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "timer-hugo"

と、書いたが、実はこの config.toml も各テーマごとに固有の書き方がある。（カスタムされている）

ゆえにthemes/timer-hugo/exampleSite/config.tomlの内容をコピーした方がいい。

baseURL = "http://example.org/"
languageCode = "en-us"
title = "Timer | Responsive Multipurpose Bootstrap Hugo Template"
theme = "timer-hugo"

# We Used Ionicons Icon font for Icon, for more details check this link - https://ionicons.com/

# Navbar Menus
[[menu.main]]
name    = "About"
url     = "about"
weight  = 2
[[menu.main]]
name    = "Service"
url     = "service"
weight  = 3
[[menu.main]]
name    = "Gallery"
url     = "gallery"
weight  = 4
[[menu.main]]
name    = "Blog"
url     = "blog"
weight  = 5
[[menu.main]]
name    = "Contact"
url     = "contact"
weight  = 6

# Site Params
[params]
home = "Home"
logo = "images/logo.png"
dateFormat = "6 January 2006"
# Meta data
description = "Airspace Hugo theme"
author = "Themefisher"
# Google Analitycs
googleAnalitycsID = "Your ID"
# contact form action
contactFormAction = "#" # contact form works with https://formspree.io

# Banner Section
[params.banner]
enable  = true
bgImage = "images/slider.jpg"
heading = "HI, MY NAME IS JONATHON & I AM A"
description = "WITH 10 YEARS EXPERIENCE, I'VE OCCUPIED MANY ROLES INCLUDING DIGITAL DESIGN DIRECTOR, WEB DESIGNER AND DEVELOPER. THIS SITE SHOWCASES SOME OF MY WORK."
# button
btn     = true
btnText = "Download More"
btnURL  = "https://themefisher.com/"

# flip text
[[params.banner.flipText]]
title   = "DESIGNER"
[[params.banner.flipText]]
title   = "DEVELOPER"
[[params.banner.flipText]]
title   = "FATHER"

# Homepage About Section
[params.about]
enable  = true
title   = "ABOUT ME"
content = "Hello, I’m a UI/UX Designer & Front End Developer from Victoria, Australia. I hold a master degree of Web Design from the World University.And scrambled it to make a type specimen book. It has survived not only five centuries. <br> <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, adipisci voluptatum repudiandae, natus impedit repellat aut officia illum at assumenda iusto reiciendis placeat. Temporibus, vero."
image   = "images/about/about.jpg"

# Call to Action
[params.cta]
enable  = true
title   = "SO WHAT YOU THINK ?"
content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis,<br>possimus commodi, fugiat magnam temporibus vero magni recusandae? Dolore, maxime praesentium."
btnText = "Contact with me"
btnURL  = "/contact"

# Portfolio Section On Homepage
[params.portfolio]
enable  = true
title   = "Latest Works"
subtitle= "Aliquam lobortis. Maecenas vestibulum mollis diam. Pellentesque auctor neque nec urna. Nulla sit amet est. Aenean posuere tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus."

# social icon
[[params.socialIcon]]
icon = "ion-social-facebook"
url = "#"

[[params.socialIcon]]
icon = "ion-social-instagram"
url = "#"

[[params.socialIcon]]
icon = "ion-social-linkedin"
url = "#"

そのほかも、このテーマのいろいろなテンプレに従った方がいいので、themes/timer-hugo/exampleSiteにあるものを、雛形ホームのディレクトリに上書きコピーする。

加えて、themes/timer-hugoの

archetypes
layouts
static

もコピーする。（自分はやらなかったが、assetes もコピーした方がいいかも）

これでサーバーを立ててみる。次のコマンドでできる。

$ hugo server

http://localhost:1313/blog にアクセスする。

demo と同じものが表示されているはず！万歳！
blog のところも見ると、テンプレで用意されている記事が見れる。

記事を書いてみる

次のコマンドで記事を作成する

$ hugo new blog/{記事のタイトルとか}.md

これでcontent/blog/{記事のタイトルとか}.mdに markdown が作られる。

この時作られるものは、archetypes/default.mdに設定されているものが自動生成される。ちなみに自分のdefault.mdはこのように設定している。

---
title: "{{ replace .Name "-" " " | title }}"
description : "This is meta description"
date: {{ .Date }}
draft: true # 反映させる時はfalseに変えるかコメントアウト
comments: true
adsense: false
archives: ["{{ dateFormat "2006" .Date }}", "{{ dateFormat "2006-01" .Date }}"]

# Twitter card gen用設定"]
author: ["いわし"]
categories: ["Test"]
tags: ["motivation", "inspiration"] # tag
ogimage: "images/og/{{ .Name }}.png" # tcardgenで生成した画像をOGP画像に設定する
url: "/{{ .Type }}/{{ .Name }}/" # tcardgenでの自動生成スクリプト用のパスを設定

# Blog用---------------------------------------------------
type: post
image: "images/og/{{ .Name }}.png" # ブログバナーの画像

# Portfolio用----------------------------------------------
caption: Product Mockup
image: images/portfolio/item-2.jpg
liveLink: link # ??
# 右側の情報説明
client: Julia Robertson
submitDate: November 20, 2017
category: ["mockup","design"] # tag
location: 1201 park street, Avenue, Dhaka

---

細かい設定等は次の記事とかで書いていきたいので今回は省く。
demo で入れられている markdown ファイルを参考にカスタマイズしていく。

基本はこんな感じ

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

気にするのはdraft: trueの部分。これをfalseに変えるかコメントアウトすると記事として適用される。このままだと表示されない。

変えたら次のコマンドを実行。

$ hugo

これでpublicディレクトリが作成されるはず。ヤッタネ。

github pages 公開する

これで markdown で記事を書いてから静的ファイルを生成するまでの流れはできた。

さて、ここからは今ローカルホストで表示しているものを github pages で公開したい。そのための準備をしていく。

ディレクトリ名を変更する

github pages はその仕様として、ホームディレクトリかdocsディレクトリを公開ディレクトリとして設定できる。

今のデフォルトだと、生成されるのはpublicなので、これをdocsに変える。

見るのはconfig.toml

baseURL = "https://biwashi.github.io/blog/" ####### 追加: {user_name}.github.io/{repository_name}/ を指定する
languageCode = "ja"
title = "MY NEW GEAR | IWASHI BLOG" # Homeのタイトル
theme = "timer-hugo"
publishDir = "docs"  ######################### 追加
canonifyurls = true  ######################## 追加(相対URLを絶対URLに変換できるようにする)

またこの時、baseURL を公開する github pages のリンクに設定する。

https://{githubのアカウント名}.github.io/{リポジトリ名}/

baseURL は、よくあるクローンするときの https のリンクじゃないので注意
実際に github pages で公開するときのリンク（これのせいで詰まった）
よく考えたら当たり前

また canonifyurls = true は相対パスに変更するために設定。

これで準備は完了。あとは push して公開ディレクトリをdocsに設定する。

master branch docs/ folder

しばらくすると公開される。やったね！

まとめ

これでサクッと雛形が作れました。テーマもお洒落なのがたくさんあるので見てるだけで楽しい！

次回はブログをカスタマイズしていくところを書きたい。（これが地獄の始まりだった…）

追記：
その後、OGPを自動作成した記事です
Go製のtcardgenでHugoで作ったブログのOGPを自動生成してみた - Qiita

参考

参考させていただいた素晴らしい記事たちです

HugoとGithub Pagesで自作ブログサイトを作ってみる #1