Webサイトを静的サイトにしました : Netlify でホスティング（2/3）

さて、前の記事で hugo による静的サイトが（一応）できたので、次はこのサイトをホスティングします。

静的サイトホスティング先の選定

いろいろありますねー。

Amazon S3, GitHub Pages, Bitbucket, etc 今回はそんななかでも、 Netlify というホスティングサービスを利用することにしました。

当初は、S3 で考えていたのですが、自分の場合のアクセス数から考えると Netlify の無料版で十分かなというのと、 github や bitbucket と連動して、コミット -> デプロイを自動でやってくれるというのが魅力的です。

無料プランの範囲でも結構いろいろなことができるようなので、とりあえずはこれで十分かと思います。

（参考） yoshidashingo.hatenablog.com

git リポジトリにコミット

Netlify は GitHub や Bitbucket のアカウントがあれば、すぐに使い始めることができます。でも、その前に git リポジトリにコミットしておきます。

準備１：下書きの解消

hugo で記事を作成した際に

mor@DESKTOP-RLA4CF1:~/tmp/mor$ hugo new news/test.md

のようにすると、ドラフト状態になっているかもしれません。念のため content/news/test.md のフロントマターを見ると

---
title: "Test"
date: 2018-01-11T14:45:14+09:00
draft: true
---

のように draft が true になっていました。

そこで、リポジトリにコミットする前にドラフト状態にある記事を公開状態に変更しておきます。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ for post in `hugo list drafts`;do hugo undraft content/$post; done

準備２：テーマのインストール方法の変更

hugo のテーマをダウンロードする際は git clone で使っていたと思いますが、このままサイト全体をアップしようとすると themes/hugo-universal-theme/.git ディレクトリを削除する必要があります。

でも、これって、テーマ自体が git で管理されているのに、自分のローカルリポジトリに clone したものを再度コミットする形になって、ちょっと気持ち悪いですよね？

これって、hugo のサイトに解決方法が書いてありました。 git submodule を使えばよいとのことですs。

Host on Netlify | Hugo

この記事に従って submodule に変更してみます。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ cd themes
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ rm -rf hugo-universal-theme/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ cd ..
mor@DESKTOP-RLA4CF1:~/tmp/mor$
mor@DESKTOP-RLA4CF1:~/tmp/mor$ git init
Initialized empty Git repository in /home/mor/tmp/mor/.git/
mor@DESKTOP-RLA4CF1:~/tmp/mor$ cd themes/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ git submodule add https://github.com/devcows/hugo-universal-theme
Cloning into 'themes/hugo-universal-theme'...
remote: Counting objects: 1004, done.
remote: Compressing objects: 100% (2/2), done.
remote: Total 1004 (delta 0), reused 0 (delta 0), pack-reused 1002
Receiving objects: 100% (1004/1004), 9.17 MiB | 3.12 MiB/s, done.
Resolving deltas: 100% (529/529), done.
Checking connectivity... done.
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$

途中で今回 git リポジトリにアップするサイト全体に対して git init を行っています。

準備３： .gitignore の作成

.gitignore を作成しておきます。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ touch .gitignore
mor@DESKTOP-RLA4CF1:~/tmp/mor$ echo /public >> .gitignore

ローカルリポジトリの状態を確認して、

mor@DESKTOP-RLA4CF1:~/tmp/mor$ git status
On branch master

最初のコミット

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

        new file:   .gitmodules
        new file:   themes/hugo-universal-theme

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        archetypes/
        config.toml
        content/
        data/
        i18n/
        layouts/
        static/

mor@DESKTOP-RLA4CF1:~/tmp/mor$ git add .
mor@DESKTOP-RLA4CF1:~/tmp/mor$ git commit -m 'initial commit'

Bitbucket 上にリポジトリを作成して、その後コミットします。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ git remote add origin https://xxxxx@bitbucket.org/xxxxx/yyyyy.git
mor@DESKTOP-RLA4CF1:~/tmp/mor$ git push origin master