プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

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

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

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

いろいろありますねー。

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

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

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

(参考) yoshidashingo.hatenablog.com

git リポジトリにコミット

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

準備1:下書きの解消

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

準備2:テーマのインストール方法の変更

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

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

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

Hugo | Host on Netlify

この記事に従って 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 を行っています。

準備3: .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 ..." to unstage)

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

Untracked files:
  (use "git add ..." 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

qiita.com

あっという間にビルドされました。表示されたURLを見ると、無事、公開されていました。

でも、よく見ると、一部の表示がローカルと異なっています。 原因はよくわかりませんが、netlify で使う hugo のバージョンが怪しそうです。

ということで、下記に従って、 Hugoのバージョンをローカルに合わせて 0.32.2 にして試します。

monaural.net

OK。問題なくなりましたね。 ということで、めでたしめでたし、無事にホスティングできました。

(参考)

まだ、試していないのですが、Netlify CMS を使って、CMSライクに作業するというのができるそうです。

qiita.com

これを試すのもありかなー。

最後は、自分のドメインでこのサイトにアクセスできるようにします。