Plans and Pricing | Netlify
静的サイトのホスティングサービスで、個人で利用する分には、アクセス数が多くなければ無料プランで問題なさそうです。

環境

移行前

  • さくらインターネットのレンタルサーバ
  • さくらインターネットで取得して使用していた独自ドメイン
  • WordPress

移行先

  • Netliyfy
  • GitHubのプライベートリポジトリ
  • さくらインターネットで取得して使用していた独自ドメイン
  • Hexo

ここまで設定した

WordPressからローカル環境のHexoを作成した後、テーマ選びやカスタマイズ後に、GUIでGit操作できる、SourcetreeでGitHubと連携して、Hexoのデータをアップしました。

Welcome to Netlify | Netlifyでアカウントを取得します。
GitHubのアカウントで作っておきました。

Netlifyでデブロイまで

ややうろ覚えです。

ログイン > Sites > New site from Git > Continuous Deployment > GitHub > Authoize Neflify by Netlify

Install Netlify > All repositories > Only select repositories
Select repositories > 使用するリポジトリを選ぶ > install > 少し待ってリポジトリを選択

項目に自動でHexo用の設定が入っている。
Base directoruは設定されていない。

Deploy site > サイト展開が始まる > ランダムなURLがつきますが後で変えられます

これで、GitHubのリポジトリに変更が合ったときは、自動でデブロイしてくれます。
楽ですね。

Site settings

Change site name
ここでランダムなURLを変更出来ます。

ランダムなURL > fewlight

ドメイン管理

Domain management > ドメインを入力
Check DNS configurationと注意されるので…クリック > Set up Netlify DNS

ドメインは、wwwありの方が機能的にお得みたいですが、10年以上wwwなしで使用してきたので、wwwなしで設定していきます。

さくらインターネットでネームサーバ変更

ネームサーバ情報の変更 – さくらのサポート情報

さくらインターネット会員メニュー > 契約ドメインの管理 > ドメインメニュー
管理ドメインとネームサーバの一覧

登録情報 > WHOIS情報 > ネームサーバーの右の変更

前に使用していた設定

ネームサーバ1 > NS1.DNS.NE.JP
ネームサーバ2 > NS2.DNS.NE.JP

下記へ

ネームサーバ1 > dns1.p05.nsone.net
ネームサーバ2 > dns2.p05.nsone.net
ネームサーバ3 > dns3.p05.nsone.net
ネームサーバ4 > dns4.p05.nsone.net

ネームサーバの3と4は追加します。

反映されるまでに数時間から最大で2日ぐらいかかるらしいので、とりあえず1日待ちましょう。
Netlifyの設定画面で設定内容が表示されたらOKです。

Aレコード変更

ドメインのゾーン編集 – さくらのサポート情報

登録情報 > ゾーン編集 > 変更

前に使用していた設定

エントリ名 > @
種別 > IPアドレス(A)
値 > 59.106.19.174
DNSチェック > する

一部変更

値 > 104.198.14.52

CNAMEは前のまま

よく分からないのでとりあえずそのまま

前に使用していた設定

エントリ名 > www
種別 > 別名 (CNAME)
値 > @
DNSチェック > する

Netlify その他の設定

Settings

Build & deploy

Environment

Environment variables

Node.jsのバージョンと日本時間を指定しておきます。
ローカルと合わせておいたほうが無難だと思います。

Edit variables

KeyValue
NODE_VERSION10.15.3
TZAsia/Tokyo

Save

時間指定はどこかのサイトで環境設定でした、というのを見たので気づいたのですが、サイトを忘れてしまった…

Netlifyでサイト公開して、投稿日が1日ずれる問題はこれで直ります。
また、更新日を日付だけで時間を書いていなかったのですが、一部の投稿で更新日が投稿日よりも1日古くなっていたのも直りました。
念の為、Hexoの_config.ymlでtimezone: Asia/Tokyoに設定しているか確認したほうがいいかもしれない。

1週間ほど気づかないで1日ずれていましたが…

Post processing

Snippet injection

head前とbodyの前にscriptを挿入できます

Google Analyticsなどを挿入するのに使えます。

Add snippet

1
2
3
before > <head>
Script name > Google Analytics
HTML > Google Analyticsのコードを貼る

Save

Asset optimization

サーバ側で圧縮指定

Edit settings > Asset optimization off

onにする

  • Bundle CSS
  • Minify CSS
  • Bundle JS
  • Minify JS

サーバ側で設定できるのはいいですね。

Pretty URLsは、URLからindex.htmlなどの表記を削除して書き換える機能ですが、テーマのテンプレートで消すように記載したので設定していないです。

Deploy notifications
Outgoing notifications

デブロイに成功したときにメール送信

Add notification > Email notifications
Event to listen for > Deploy succeeded
下の項目 > 通知するメールアドレス入力

Save

デプロイに失敗したときにメール送信

Add notification > Email notifications
Event to listem for > Deploy failed
下の項目 > 通知するメールアドレスを入力

Save

とりあえず、成功したときのメールは受信できました。

netlify.toml

色々な設定を纏められるファイルで、Gitリポジトリのルートディレクトリに置くと反映されます。
自分の場合は、C:\tools\hexo\netlify.toml

netlify.toml

1
2
3
4
5
[[redirects]]
  from = "https://fewlight.netlify.com/*"
  to = "https://fewlight.net/:splat"
  status = 301
  force = true

独自ドメインへリダイレクトの設定をしておきました。
_redirectsというファイルでもできるのですが、Hexoは_付きファイルは無視してしまうので。

Hexoの投稿記事のリダイレクトは、Hexoプラグインのhexojs/hexo-generator-aliasで記事ごとに設定しておきました。

Hexo の 投稿記事 URL を 変更する | 験なきものを思はずは

まとめ

Netlifyでの設定は色々と試行錯誤した覚えがあります。
公式の説明を読むのが一番だと思いました。
Docs | Netlify

これで、サーバ代は無料の範囲で収まりそうなので、かかる費用は独自ドメイン代だけになりそうで助かります。
無料で使用できるのは凄いですね。

追記

2019-05-08

  • Netlifyの表記名を修正
  • 各説明に追加

2019-05-10

  • Deploy notificationsに、デブロイに成功したときにメール送信を追加