さて、前の記事で hugo による静的サイトが（一応）できたので、次はこのサイトをホスティングします。
- Webサイトを静的サイトにしました : hugo による静的サイトの作成 (1/3) - プログラマーのメモ書き
- Webサイトを静的サイトにしました : Netlify でホスティング（2/3） - プログラマーのメモ書き
- Webサイトを静的サイトにしました : ドメイン設定（3/3） - プログラマーのメモ書き
静的サイトホスティング先の選定
いろいろありますねー。
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。
この記事に従って 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
Netlify でホスティング
Netlify のアカウントを作成する際は、GitHub や BitbucketのアカウントでログインすればOKです。
Netlify でサイトをパブリッシュします。リンク先のように操作すればOK
あっという間にビルドされました。表示されたURLを見ると、無事、公開されていました。
でも、よく見ると、一部の表示がローカルと異なっています。 原因はよくわかりませんが、netlify で使う hugo のバージョンが怪しそうです。
ということで、下記に従って、 Hugoのバージョンをローカルに合わせて 0.32.2 にして試します。
OK。問題なくなりましたね。 ということで、めでたしめでたし、無事にホスティングできました。
（参考）
まだ、試していないのですが、Netlify CMS を使って、CMSライクに作業するというのができるそうです。
これを試すのもありかなー。
最後は、自分のドメインでこのサイトにアクセスできるようにします。
