2018-01-12

Webサイトを静的サイトにしました : ドメイン設定（3/3）

サイト管理さくらインターネット netlify DNS

最後は Netlify で公開したサイトを自分のドメインでアクセスできるようにします。https も無料で使えるので有効にします。

基本的な方針としては、

Webサイトへのアクセスは https://www.mori-soft.com で行う（当面は http://www.mori-soft.com も活かしておく）
メールはさくらインターネットで運用する

とします。なお、ウェブサイトを apexドメイン（wwwなしのドメイン）にしないのは、自分の好みに加えて、後述する理由のためです。

設定方法について

最初は、 www.mori-soft.com を Netlify のサーバーに向けるだけなので、DNS の www の CNAME レコードを設定すればよいだけかと思いました。

でも、Netlify の推奨設定方法を調べてみると、 apexドメインと www サブドメインのどちらかをカスタムドメインとして設定する場合は、両方を Netlify のサーバーに向けるのが推奨（必須？）とのことでした。

www はともかく、apexドメインはどうしようか？以前の記事

blog.mori-soft.com

でやったように Route53 ならそちらでゾーン情報をホストして Alias レコードを使って apex ドメインでアクセスする、という形が取れます。Netlify にも DNS ゾーン情報をホストする機能があるようですが、使いませんでした（実は設定が完了するまで気づいてなかったので検討していなかった）。

でも、さくらインターネットのDNSだと、Alias レコードに相当するものがありません（もしあったらごめんなさい）。

で、Netlify のドキュメントを見ると、解決策が書いてありました。要は Apex ドメインの A レコードに Netlify のロードバランサーのIPアドレスを割り当てるというものです。

これを具体的にする方法としては、さくらインターネットの下記の記事を参考にして、

knowledge.sakura.ad.jp

ゾーン情報はそのままさくらインターネットで管理して、 mori-soft.com のIPアドレスを Netlify のロードバランサーに振り向けることにしました。

さくらインターネット側の設定

まずは、さくらインターネット側の設定です。上記の記事を参考に、ドメインメニューから、

@ A Netlify のロードバランサーのIPアドレス
@ MX 10 xxx.sakura.ne.jp.

とします（xxx.sakura.ne.jp はレンタルサーバーの初期ドメインです）。

さらに、 Netlify の推奨設定に従って、

www CNAME xxxxx.netlify.com.

としておきます。ここで、 xxxxx.netlify.com はデプロイしたサイトを表示するurlです。FQDN 表現の末尾の . （ピリオド）をお忘れなく。

Netlify 側の設定

Netlify にログインして、ホストしているサイトの選択画面を開いて、Domain Settings を選びます。

f:id:junichim:20180112094708p:plain

Add Custom Domain をクリックして、 www.mori-soft.com を追加します。

f:id:junichim:20180112094816p:plain

これは、Primary Domain として www.mori-soft.com を使うためです。

Netlify ではカスタムドメインを追加して、それが apex ドメインまたは www サブドメインの場合は両方を登録する必要があるとのことです。で、最初に入れたほうが Primary ドメインとして追加され、他方のドメインも自動的に追加されます。カスタムドメインへのアクセスは自動的に Primary ドメインのほうへリダイレクトされます。

詳しくはドキュメントのこのあたりに載っています。

このため、両方のドメイン名（今回の場合だと www.mori-soft.com と mori-soft.com）が Netlify を指している必要があります。もし、この設定がうまくいっていなくて問題があれば、注意マークが表示されて、DNS設定を確認するように表示されます。

f:id:junichim:20180112094512p:plain

ここで、一度ブラウザから表示させてみて、問題なく表示できるか確認します。（手元の環境では、さくらインターネット側のDNS設定変更後、１時間程度かかりました）

https の有効化

ここまでできれば、あとは https を有効にするだけです。 Netlify の設定画面の HTTPS の箇所に書いてあるように　ボタンをクリックするだけで設定できます。

ただし、例えば、カスタムドメインとして www.mori-soft.com を追加しているが、 mori-soft.com がNetlifyに向いていない場合は、

f:id:junichim:20180112095146p:plain

のように、エラーが出て https を有効にすることができません。

Netlify で https を有効にする場合も example.com と www.example.com の両方を Netlify に向ける必要があるようです。

https が無事に有効になったら、再度ブラウザでアクセスしてみます。正しく表示されればOKです。

後始末

さて、これで問題なく設定できたと思いきや、いくつか修正がありました。

baseurl の修正

まず、hugo の config.toml の baseurl ですが、これを設定しておかないと検索機能などが正しく呼ばれません。

baseurl = "https://www.mori-soft.com/"

のようにして、再度 git push すると自動的にデプロイされます（いいですねー）。

フォームからの送信の再確認

universal テーマでは formspree というサービスを使って、フォームからの送信を実現しています。

formspree を有効にするためには config.toml にフォームを受け取るメールアドレスを設定しておき、サイトをアップロード後、フォームから送信を行います。すると、確認メールが来るので、メール内のリンクをクリックすると受け取りが有効になります。

このフォームの有効化ですが、ドメイン名毎に確認する必要があります。

最初 Netlify でデプロイしたデフォルトのドメイン名（xxxxx.netlify.comのやつ）でフォームの確認をしていても、独自ドメインを設定したら、もう一度フォームから送信を行って、再度確認しておく必要があります。

404 エラーページの確認と修正

独自ドメインを設定したからというわけではないのですが、hugo のローカルサーバーでは 404エラーページ（404.html）の確認ができないようです。なので、これは netlify にホスティング後、存在しないURLを入れて、確認・修正を行っておきます。

メーラー設定の修正

直接的には Netlify のカスタムドメイン設定とは関係ないのですが、実はこの設定後メールの送受信ができなくなりました。

というのも、POP・SMTPサーバーの設定として、初期ドメインではなく独自ドメインを使って設定していたためです。要するに、DNSの設定が変わったため、POP・SMTPサーバーとして Netlify のサイトを見にいくことになり、送受信ができなくなったというものです（ウェブメールを見ると問題なく受信できていましたよ）。

ということで、メーラーの設定を変更して、正しいメールサーバーを指すようにしました（さらくインターネットの場合、初期ドメインを指定すればOKです）。

Netlify でのカスタムドメイン設定について

上記の一連の設定から、Netlify でカスタムドメインを設定する際の注意点についてまとめておきます。

apex ドメインは netlify に向けずに www サブドメインだけ netlify に向ける

ウェブサイトを表示するだけならできました（最初設定が間違っていて、この状態になっていました）。

www CNAME xxxxx.netlify.com.

のように www に対して CNAME レコードを設定してやればOKです。

でも、https を有効にしようとすると、apexドメインがnetlifyに向いていないといって怒られます。

不可能ではなくても、Netlify が推奨していないんで、やめといたほうが無難かと思います。

常に apex ドメインでウェブサイトを表示する

DNSサーバーで CNAME flatting, alias, aname など、apexドメインで別名を扱うサービスがある場合は問題ないようです。一方、これらのサービスがない場合は、推奨されていないようです。

詳しくは下記の記事

www.netlify.com

に解説があるのですが、ざっと読んだ印象では

Netlify の CDN を有効に使うには CNAME レコードを使ってね
CNAME レコードは netlify でホストしているサーバー名に向けてね（デプロイした時に決まる xxxxx.netlify.com）
でも、 apex ドメインには CNAME レコードは設定できないでしょう
なので、 www サブドメインを使って CNAME を設定したほうがいいよ

とのことでした（理解が間違っていたらごめんなさい）。

最後に

一応、これで静的ウェブサイトでホストすることができました。少なくとも元のサイトのバックアップサーバーは不要になったので、コスト的にはありがたいです。

当面、これで様子を見ていきたいと思います。

2018-01-11

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

hugo netlify サイト管理

さて、前の記事で 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

Netlify でホスティング

Netlify のアカウントを作成する際は、GitHub や BitbucketのアカウントでログインすればOKです。

Netlify でサイトをパブリッシュします。リンク先のように操作すればOK

qiita.com

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

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

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

monaural.net

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

（参考）

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

qiita.com

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

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

2018-01-11

Webサイトを静的サイトにしました : hugo による静的サイトの作成 (1/3)

hugo サイト管理

個人事業主としての森ソフトのサイトは、さくらインターネットのレンタルサーバー上で Joomla! を使って動かしていました。当初は、ブログ代わりの技術メモとしていろんなものを載せるために使っていました。ちなみに、Wordpressを選ばなかったのは、当時のさくらのレンサバのDBのバージョンがWordpressのサポート対象外だったためなのと、知り合いがJoomla!使っていたのが理由でした。

ちなみに、あれこれやってた時の記事がまだ残ってました (^^; 思い出にリンク張っときます。

でも、一昨年から技術メモの部分はブログとして、はてなブログに移行したので、そんなに大そうな頻度で更新することもなくなりました。となってくると気になってくるのがサーバー代です（サイト分だけでなくバックアップサーバーも立ち上げているので２台の料金がかかっています）。

昨今、あれこれ見てると静的サイトホスティングでサイトを公開するというのが流行っているようです。先祖返りな気もしますが、gitなどと連携できればそんなに悪くないかな？という印象です。ということで、今回思い切って、自分のサイトを静的サイトホスティングに切り替えてみましたので、備忘録としてメモっときます。

ツールの選定

静的サイト作成に使えるツールですが、調べ始めたら、山のようにあって困りました。例えば、下記サイトなどでは、どのようなツールがあるのか、いろいろとガイドしてくれていますが、数が多すぎてる正直よくわかりません。

上記以外にもあれこれと比較記事を探して読んでみたのですが、なかなかこれだ！という風には見つかりませんでした。

まあ、その中でも、 hugo が静的サイトのビルドが早いということで、どうも良さそうです。

これ以上は、実際に試したほうが早そうだということで、今回は hugo を使うことにしました。

全体の構成

ツールの選定と合わせてあれこれ調べると、静的サイトのホスティングをやってくれるサービスもあることが分かりました。そんなのを受けて、今回は次のような構成で作業を行いました。

ホスティング : Netlify (当然、無料プランです）
gitリポジトリ : Bitbucket
静的サイトジェネレータ : Hugo, 0.32.2
開発環境 : Windows 10 build 1709 上 Bash on Ubuntu On Windows (16.04.3 LTS相当)
移行元 : Joomla! 3.6.5

hugo のインストール

まずは hugo のインストールから始めます。 Bash on Ubuntu on Windows 上から

sudo apt-get install hugo

とするだけでインストールできました。が、しかし、これだとバージョンが 0.15 相当になり、ちょっと古めです（この記事を書いている時点で 0.32.2）。なので、

wget https://github.com/gohugoio/hugo/releases/download/v0.32.2/hugo_0.32.2_Linux-64bit.deb
sudo dpkg -i hugo_0.32.2_Linux-64bit.deb

として作業時の最新版をインストールしました。

なお、バイナリ（パッケージ版はバイナリです）を使う場合は、GOの開発環境は不要だそうです。

（参考）下記のインストール手順を参考にしました

hawksnowlog: Ubuntu 16.04 で hugo を試してみた

hugo の試用

インストールが成功したら、さっそく hugo のサイトにあるQuick Start を試してみます。

Quick Start | Hugo

一通り作業をしてみると、問題なくローカルサイトでサイトを見ることができました。

移行するコンテンツの選定

さて、既存サイトのコンテンツを移動する前に改めてコンテンツを確認してみました。技術メモ部分はなくなっているのでよいとして、それ以外でも内容が結構古くなっているものが多々あります。こういう古いものも含めて移行するかは、ちょっと悩ましいところです。いろいろ考えたのですが、次の理由からとりあえず現時点では移行しないことにしました。

今更、内容的に更新するつもりがない
自分自身でも参考にすることがすくない（というかここ数年、見てもいなかった）
既存サイトは非公開にするけど、削除はしない（プライベートでは閲覧可能にしておく）

もし、必要がありそう or 需要がありそうなら、追って追加することにします。

そうなると、移行するべきコンテンツは自分自身の紹介など、ごく最小限のものとなり、わざわざ移行ツールなどを使わなくても簡単にできそうです。

（参考）

今回は使いませんでしたが、もし、Joomla! のコンテンツが山ほどあり、手作業で移行するのが大変そうな場合は、Joomla! -> hugo の移行をサポートしてくれるツールがあります。

Migrate to Hugo | Hugo

一度試してみるといいかもしれません。

hugo でのサイト構築

ということで、サイトに載せるコンテンツとしては、一から作り直すことにします。

ただ、Webサイトですので、デザインまで自分で作るのは厳しいものがあります。ということで、デザインに関しては、既存のhugoのテーマを選んで、それをベースに載せるべき内容を作り、必要があれば見た目もカスタマイズする方法を取ります。

hugoのテーマは、

Complete List | Hugo Themes

ここから選べます。タグがあるので、それを手掛かりにしてみていきます。あと、多くのテーマには、デモサイトへのリンクもあるので、それで実際に動作を確認しながら選びます。今回は、 universal というテーマを選びました。

themes.gohugo.io

まずはサイトを作ります（サイト名は mor としてます）。

mor@DESKTOP-RLA4CF1:~/tmp$ hugo new site mor

テーマを適用

universal テーマのサイトの説明に従って、

mor@DESKTOP-RLA4CF1:~/tmp/mor$ cd themes/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ git clone https://github.com/devcows/hugo-universal-theme
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes$ cd hugo-universal-theme/exampleSite/
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/exampleSite$
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/exampleSite$ cp config.toml ../../../config.toml

とします。このまま、hugo server で確認するとエラーがでたので、何点か修正します。

config.toml の themesDir が設定されていますが、これがうまく動いていませんので、コメントアウトしておきます
carousel（カルーセル、サイトのトップとかで画像が複数スライドしていくやつ）, Features, Testimonials（いわゆるお客様の声かな？）, Clients は data ディレクトリ以下に所定のyamlファイルが一つもないとエラーになります。なので、それぞれ config.toml の params.carousel, params.features, params.testimonials, params.client の enable を false にしておきます。

修正が終わったら、ローカルサーバーを起動します。

mor@DESKTOP-RLA4CF1:~/tmp/mor$ hugo server -D

これで一応表示されました。

カスタマイズ

ここからカスタマイズです。だいたい次の順にカスタマイズしました。

このテーマの内容に沿って、 config.toml を変更します
先ほどの carousel, features, testimonials, client については必要に応じてyamlファイルを作成します（必要のないところは enabled = false のままです）
サイトのディレクトリ直下に i18n ディレクトリを作り、 cp themes/hugo-universal-theme/i18n/en.yaml i18n/ja.yaml として、必要に応じて日本語訳を入れておきます

この辺の変更方法は universal のテーマのページに載っています。

テンプレートの修正

次に、表示している各部分の細かいところでデザインを変更したい箇所を修正します。

サイトの作成にあたって、最初にテーマを使うところから始めましたが、hugo に関する記事などを読むと、サイトのディレクトリ（ここでは ~/tmp/mor）以下にある layouts 以下のファイルがテンプレートとして表示を制御しているようです。で、テーマはそれをまとめて配布可能にしたもので、 themes ディレクトリに配置されるものになります。

両者は共通の構造をとっていて、サイトのディレクトリ以下にある layouts が優先されます（テーマから見ると、オーバーライドすることができます）。

この構成がわかれば、あとは、自分が修正したい箇所がどこにあるかを調べて、その html ファイルをサイトのディレクトリ/layouts にコピーして、変更を行います。

例えば、サイトで表示されるトップページのレイアウトを変更するのであれば、

mor@DESKTOP-RLA4CF1:~/tmp/mor$ cp themes/hugo-universal-theme/layouts/index.html layouts/index.html

として、サイトディレクトリ/layouts/index.html に記載されている各パーツの表示順などを見直します。

一覧ページのタイトル

univesal テーマの場合『ブログ』を選択すると、ブログの一覧が表示されるようになっています。この時、デフォルトのままだと、ブログ記事が入れてある contents/blog のディレクトリ名をセクション名として扱い、このセクション名が表示されます。ついでに書いておくと、英文の場合、セクション名が自動的に複数形で表示されるとのことです。

この表示を変更したかったので、 contents/blog の下に _index.md を追加して、そこに title を設定することで、自分でタイトルを決めることができるようになります。

詳しくは hugo の該当ドキュメントを見てください。

記事を入れるフォルダ名の変更

ちなみに、記事に入れるフォルダ名を contents/blog から contents/news に変更しています。残念ながら、これは config.toml では変更できませんでした。

参考までにこれを行った方法を書いておきます。

mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/layouts$ grep -r -i -n blog ./*
./_default/list.html:23:                    <div class="col-md-9" id="blog-listing-medium">
./_default/list.html:25:                        {{ $paginator := .Paginate (where .Data.Pages "Type" "blog") }}
./_default/single.html:25:                    <div class="col-md-9" id="blog-post">
./_default/single.html:40:                    <!-- /#blog-post -->
./partials/footer.html:21:            <div class="blog-entries">
./partials/footer.html:22:                {{ range first 3 (where .Site.Pages "Type" "blog") }}
./partials/recent_posts.html:15:            <!-- *** BLOG HOMEPAGE *** -->
./partials/recent_posts.html:19:                {{ $posts := .Paginate (where .Data.Pages "Type" "blog") }}
./partials/recent_posts.html:22:                    <div class="box-image-text blog">
./partials/recent_posts.html:61:            <!-- *** BLOG HOMEPAGE END *** -->
mor@DESKTOP-RLA4CF1:~/tmp/mor/themes/hugo-universal-theme/layouts$

としてテーマを調べると、Paginate 関数の引数に blog というセクション名がハードコードされています。なので、これを news に変更しました。具体的には _default/list.html, partials/footer.html, partials/recent_post.html になります。

ご参考までに。

robots.txt

あと、表示だけでなく robots.txt も正しく生成されるようにしておきます（ここなどを参照）。config.toml に

enableRobotsTXT = true

を追加します。デフォルトの robots.txt から変更したい場合は、 layouts にひな型になる robots.txt を置いておきます。こんな感じです。

mor@DESKTOP-RLA4CF1:~/tmp/mor/layouts$ cat robots.txt

User-agent: *

Sitemap: {{ .Site.BaseURL }}sitemap.xml

sitemap.xml は何もしなくても生成してくれるようです。

細かいところはよくわかっていませんが、こんな感じで進めると、とりあえずカスタマイズもある程度できました。

（参考） hugo テーマのカスタマイズについてはいろんな方が記事を書かれているので、そちらを参考にしてください

https://www-he.scphys.kyoto-u.ac.jp/member/shotakaha/dokuwiki/doku.php?id=toolbox:hugo:start

動作確認

カスタマイズが終わったら、動作確認をしておきます。とりあえずローカルサーバーで正しく表示されれば、OKです。

次は、 netlify を使ってホスティングします。

プログラマーのメモ書き

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