LINEで送る
Pocket

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

HUGOのよさみ

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

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

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

環境

  • Macbook High Sierra

あると捗るサービス

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

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

前提

手順概要

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

HUGOのセットアップ

HUGOのインストール

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

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

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

テーマを使う

  • テーマのインストール

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

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

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

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

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

config.tomlを書き換える

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

HUGOを起動する

ローカルでHUGOを見ることが出来ます。
config.tomlがある場所で以下のコマンドを叩きます。
-Dは下書きも含めて表示させます。

叩いたら、http://localhost:1313 で確認してみましょう。
HUGOはローカルで構築状況をみれるので、Wordpressのプレビュー慣れしている人も安心です。

さいごに

ちなみにHUGOで作ったブログが実は何個かあります。

Goodbye, SES. WEB is fun

こちらのサイトはAWS+Github+HUGOで作成しました。

AWSのS3で静的ホスティングさせ、ドメインはRoute53で管理し、Cloudfrontで配信する構成です。

こうするとかなりコストが安く収まります。

こちらのWordpressも完全にHUGOに移行して、Tech専用のブログを公開する予定です。

参考

HUGO/Quickstart

Share on FacebookTweet about this on TwitterShare on Google+