HugoをAmazonS3で運用する方法

Hugoの公式サイトやらブログなどをググることが面倒なので、まとめておきます。

使うもの。

  • Mac
  • Atom(エディタ)
  • Hugo
  • AmazonS3(サーバー)
  • Amazon Route 53(ドメイン取得)

インストール

brew install hugo

サイトを作る

作りたいサイト名をhugo new siteのあとに記述

hugo new site quickstart(サイトの名前)

テーマの適用(公式サイト通りの場合)

先ほど作ったquickstartのフォルダまで移動したあとgit initとします。 git submodule add (適用したいテーマ) themes/テーマの名前とします。

適用したいテーマはHugoで見つけてきます。このブログのテーマは、Hugo Nowですので、DownloadかHomepageのボタンを押すとgithugのページに飛ぶと思います。

追記ー>evenに変更しました。

hugo-now ここまできたら右端にあるclone or downloadと書かれている緑のボタンを押してください。

ボタンを押したらこんなふうになるはずです。 hugo-now-clone

ここにあるリンクを全てコピーしてください。これがテーマのリンクになります。

$ cd quickstart
quickstart$ git init
git submodule add https://github.com/mikeblum/hugo-now.git themes/hugo-now

# Edit your config.toml configuration file
# and add the hugo-now theme.
echo 'theme = "hugo-now"' >> config.toml

テーマのインストールが終わったらAtomを使ってconfig.tomlに使用するテーマを記述します。

theme = "hugo-now"

テーマの適用(個別にダウロードする場合)

themesに移動してgit cloneで適用します。

quickstart$ cd themes
themes$ git clone https://github.com/mikeblum/hugo-now

config.tomlの編集

config.tomlとは、サイト全体に対する設定なります。エディタを使ってフォルダを開きまます。config.tomlファイルが下の方にあるかと思います。とりあえず、Hugo Nowのconfig.tomlをコピペしておきます。あとは、自分の設定に合わせて変えて行きます。

baseurl = "http://example.org/" <=自分のサイトのアドレスを記述します。
languageCode = "en-us"
title = "My New Hugo Site"
# theme
theme = "hugo-now"
# Comment the themesDir option if you use this theme in production
themesDir = "../.."
# google analytics
GoogleAnalytics = "UA-XXXXXX"

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

[params]
  description = "Hugo port of Jekyll Now"
  author = "Hugo Now"
  keywords = ["hugo-now", "hugo"]
  avatar = "/images/hugo.jpg"
  displayauthor = false
  # pygments
  PygmentsUseClasses = true
  PygmentsCodeFences = true
  # pagination
  paginate = 10
  paginatePath = "page"

試しに記事を投稿してみる

記事を投稿するには、content/postを開いみてください。サンプルの記事がいくつかあると思いますので、それを複製して内容を書き変えてみましょう。welcome.mdのファイルがあるはずです。welcome2.mdとでもしておきましょう。

hugo-now-post-min

サーバーを起動する

サーバーを起動するにはhugo server -t テーマ -wとします。hugo-nowの場合はしたのようになります。以下をターミナルで実行します。こうすることでローカル環境でサイトの状態を確認することができます。 もしくは単純にhugoとスレだけもok。

quickstart$ hugo server -D

実行するとターミナルに下のような表示が出てきますので探してください。このhttp://localhost:1313/がローカル環境でのアドレスになります。ChromeやSafariなどでこのリンクを打ち込んでみてください。問題なければサイトが表示されるはずです。

Web Server is available at http://localhost:1313/

記事を生成する

hugoはpublicフォルダに全てのファイルが生成されますので、サーバーにアップロードする前に記事を生成する必要があります。記事を生成するためには下のコマンドを実行します。hugoです。

hugo

以上hugoの設定は終わりです。あとは、postに記事を書いて、publicないのファイルを全てサーバーにアップロードすればokです。

ドメインを取得

今回は、Amazon Route 53を使ってドメインを取得しました。ここは、対して詰まることもないので飛ばします。

s3の設定

s3の設定は公式サイトに日本語で丁寧に解説されているので、こちらを参考にして作ります。唯一、気をつけることといえば、バケット名を運用したいドメイン名と一緒にすることくらいです。例えば、このサイトのドメイン名は、bokunonikki.netですので、バケット名もbokunonikki.netとしなければいけません。

Amazon Route 53で取得したドメインをs3に適用する

正直、ここが一番詰まりました。

Hosted zonesに移動してcreate Hosted zoneを作成します。Domain Nameのところにドメイン名を今回はsample.comとでもしておきます。commentは空欄でも大丈です。TypeはPublic Hosted zoneを選択します。あとは、createをクリックするだけです。 route53-min

次にcreate Recode Setをクリックします。Nameは空欄、TypeはA -IPv4 addressを選択してください。Aliasを選択するとAlias Target: が出てきますので、そこでs3 website endpoints を選択してください。s3だと自動で表示されます。あとは、デフォルトでcreateします。

ここまで終わったら、sample.com. NSのvalueをコピーします。

sample.com. NS  ns-1
                 ns-2
                 ns-3
                 ns-4

次に、Route53>Domains>Registered domains>登録してあるドメインに移動します。Name serversのAdd or edit name serversをクリックし、先ほどコピーしたものに置き換えます。作業が終了するとアマゾンからメールが届きます。確かメールが届いたらドメインが適用されていたと思います。僕の場合は、5分くらいで変わりました。

s3にアップロード

僕は、Transmitを使ってアップロードしてますが、webからでもアップロードできます。やり方は簡単。s3に移動して作成したバケットからアップロードするだけです。この時に気をつけて欲しいのがpublicフォルダを丸ごとあげるのではなくpublicフォルダの中身だけをアップロードします。アップロードするとこんな感じなると思います。 s3-min

以上で全ての設定が終わりました。あとは、content/postフォルダでマークダウンの記事を作り、記事を生成、アップロードというのを繰り返していけばいいだけ。