f:id:vtryo:20180716113723p:plain

はじめに

サーバレスでブログが建てられるHUGOの魅力に取り憑かれたので移行しました。
割りと簡単にできるので、気軽にはじめてみてください。

HUGOのよさみ

~~このブログはまだWordpressを使っていますが、そのうち全部HUGOにしてしまう予定ですｗ~~*1

「そんなにいいの？」って話ですが、個人的メリットはこちら

爆速（静的なサイトだからページは予め生成されている）
サーバレス構成（PHPなどの動的な処理が必要ない）
ローコスト（サーバレスということはVPS代などが浮く）
Githubなどで管理していればそれ自体がバックアップになる
SRE的観点でもメリットがある
耐障害性（サーバがそもそもない）
耐負荷（すでに生成されたページが見られるだけ）
耐脆弱性（動的処理がないためライブラリをつく脆弱性などもお構いなし）
CI/CDの習得
サーバレス技術の習得

環境

Macbook High Sierra

あると捗るサービス

github(バックアップ、履歴管理)

無料のプライベートリポジトリであればBitbucketがかなり有能です。
私はGithubに草を生やしたいので、あえてGithubを使っています。

前提

gitがインストールされていること

手順概要

HUGOの初期セットアップ
config.tomlを書き換える
HUGOを起動してみる

HUGOのセットアップ

HUGOのインストール

brew install hugo

任意のディレクトリでhugoを開始しましょう

hugo new site vtryo.me

上記のコマンドを叩くと、vtryo.meというディレクトリが作成されます。

% hugo new site vtryo.me
Congratulations! Your new Hugo site is created in /Users/ryo/blog-site/vtryo.me.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/, or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

HUGOのテンプレート構成ができあがる

% cd vtryo.me
% tree
.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

テーマを使う

テーマのインストール

はじめは何かしらのテーマを設置して、サイトを作ってみましょう。

私はtranquilpeakを使っていますのでコマンドは以下の通り。

% git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/tranquilpeak

themeディレクトリに配置されました。

テーマのconfig.tomlをトップにコピーする

themmeにはexampleSiteというディレクトリがあります。
この中にテーマで使用できるテンプレートが入ってますので、それをトップにコピーしてきましよう。

% cp -r themes/tranquilpeak/exampleSite/* .

config.tomlを書き換える

自身の好きなように値を書き換えていきましょう！
パラメータの補足を少し入れておきます。

% cat config.toml

baseURL = "https://ses.vtryo.me/"
languageCode = "en-us"
defaultContentLanguage = "en-us"
title = "Goodbye SES. WEB is fun"
theme = "tranquilpeak" #theme名を合わせて書く
disqusShortname = "ses-vtryo-me"
googleAnalytics = ""
paginate = 7
canonifyurls = true

[permalinks]
post = "/:slug/"

[taxonomies]
tag = "tags"
category = "categories"
archive = "archives"

[author]
name = "VTRyo"
bio = "このブログはSESからWEBインフラに転職した中の人が、ググっても出てこないような切ないエピソードや独自の転職論を話すブログです。"
job = "Site Reliability Engineering"
location = "Tokyo"
# Your Gravatar email. Overwrite `author.picture` everywhere in the blog
gravatarEmail = ""
# Your profile picture
# Overwritten by your gravatar image if `author.gravatarEmail` is filled
picture = "/img/top_icon.jpg"
# Your Twitter username without the @. E.g : thibaudlepretre
# twitter = "thibaudlepretre"
# Your google plus profile id. E.g : +ThibaudLepretre or 114625208755123718311
# googlePlus = "+ThibaudLepretre"