Hugoでweblogを作成した

つまりはこのページのことなんだけど

はじめに

Hugoは静的サイトジェネレータという、マークダウンで書いたテキストをHTMLとして書き出してくれるツールだ。コマンドラインでの操作に抵抗がなければ簡単にマークダウンテキストをブログ形式のページに変換して公開することができる。今回はこのhugoについて紹介してみたい

なぜHugo？

  • CMSを利用するとセキュリティとかスパムとかの対策がめんどくさそう
  • Markdown記法で書いたテキストからHTMLにしたい
  • テーマがいっぱいあって選べたらいいな

ということで、静的サイトジェネレータを導入することにし、その中でも人気っぽいHugoを選んだ。

導入方法（Mac OS）

Homebrewを利用してインストールできる

$ brew update && upgrade
$ brew install hugo

うん、簡単。

設定

作業用のディレクトリに移動して、[適当な名前]でプロジェクトを作成する

$ cd /Users/xxx/Documents
$ hugo new site [適当な名前]

[適当な名前]のディレクトリができているのでそのフォルダ内のconfig.tomlファイルでサイト全体の設定を行う

baseURL = 'http://example.com/'
languageCode = 'ja'
title = "サイト名"

最低限この三つが埋まっていればいい、はず。

そしてHugo Themesから好きなテーマを選んで、ダウンロードと設定を行う。筆者はAwesome hugo blogというテーマを選んだ

$ cd /Users/xxx/Documents/[適当な名前]
$ git clone https://github.com/hugo-sid/hugo-blog-awesome.git themes/hugo-blog-awesome

config.tomlには theme = "hugo-blog-awesome" を追記してテーマを設定しておく（各テーマによって他の設定項目があることもあるのでテーマの紹介ページを読んでおくこと）

記事作成

[適当な名前]プロジェクトのディレクトリで新しい記事のファイルを作成する。

$ cd /Users/xxx/Documents/[適当な名前]
$ hugo new posts/HelloWorld.md

/Users/xxx/Documents/[適当な名前]/content/posts/にHelloWorld.mdが生成される。

生成直後は以下のような内容になっているが、draft=trueのままだと記事が公開されないので削除してしまえばよい（あるいはtrueをfalseに書き換える）。

---
title: "HelloWorld"
date: 2023-05-01T22:04:08+09:00
draft=true
---

あとはmarkdown記法で記事の内容を書くだけだ。

プレビューと書き出し

Hugoでは記事を書き出す前にローカルなWebサーバとなりサイト全体のプレビューが行える。いい感じだったらそのまま書き出せばいいし、誤字などを発見したら（記事の見え方が変わると誤字も見つけやすくなるものである）公開前に修正できる。

$ hugo server

上記のコマンドを打つと生成するファイルの数や説明文が表示される。好きなブラウザでhttp://localhost:1313/を開き確認しよう。確認が終わればTerminalに戻りCtrl+Cを押下してサーバを停止させる。

確認と修正が終わったら実際にHTMLファイルを生成させる。

$ hugo

生成はhugoという一語のみのコマンドである。実行すると/Users/xxx/Documents/[適当な名前]/publicディレクトリ以下に公開用のファイル群が生成される。あとはこのファイルをWebサーバにアップロードすれば自分のブログが公開できる。

おまけ　rsyncでのサーバへのアップロード

筆者はrsync+SSHを利用して公開用Webサーバにアップロードしている

~/.ssh/configに以下の設定がある前提で、

Host Webserver
	Hostname IPアドレス
	User ユーザ名
	Port 22
	IdentyFile 鍵ファイル名

次のコマンドを実行すると、簡単に差分アップロードが可能となる

rsync -ave ssh /Users/xxx/Documents/[適当な名前]/public/ Webserver:/[公開用ディレクトリ]

参考