SIS Lab
>
Blog
>
Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

更新日:2023.05.05 作成日:2017.03.19

現在（2017/3月）、Hugoで生成した静的サイトをホストするためにさくらVPSを利用しています。さくらVPSは2年近く使ってきましたが、そろそろ更新時期した（1年まとめて契約しているため）。自分が契約したタイプはデイスクがHDDのままSSDに変更できないタイプだったので、新規契約し直すか、Conoha VPSに切り替えるか、それともVPS自体を契約しないとするか迷っています。

良い機会であるため、静的サイトのホスティングをVPSではなくクラウドサービスを利用しようと検討しました。

移行先検討

GitHub Pages
Netlify

自分の中ではGitHub PagesかNetlifyの2択でした。静的サイトのコンテンツはGitHubにコミットしているため、最初は、GitHub Pagesにしようとしていました。しかし、現状HTTP/2に対応していないことからあまり気乗りしませんでした。もともとVPSを利用していたときには、 Lets’s Encryptでブログの常時SSL化にチャレンジのように、常時SSLに対応したり、h2oをインストールしてなんとかHTTP/2に対応した経緯もあり、せっかくなら対応できると嬉しいです。

その点、Netlifyを試してみたら「これで決まり！」と思うぐらい良かったのでまずはNetlifyで運用してみます。

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する

Netlify: All-in-one platform for automating modern web projects

Netlifyを気に入ったポイントは以下の点です。

簡単に、独自ドメイン（Custom Domain）が設定できる
簡単に、SSL対応できる
簡単に、グローバルCDNを導入できる
HTTP/2サポート
Hugoビルドまで面倒みてくる
CIツールからの連携も可能

Netlifyとは

Write frontend code. Push it. We handle the rest.

Netlifyとは、「フロントエンドのコードを書いたら、Pushすれば後はお任せ」という通り、フロントエンドのデプロイ・ビルド・ホスティングを全て面倒をみてくれるプラットフォームです。

Deploy modern static websites with our automated platform. Add best practices like SSL, CDN distribution, caching and continuous deployment with a single click.

カスタムドメインの設定方法

Netlifyにデプロイ後のURLmeganii.netlify.comをwww.meganii.comで運用したい場合の例です。

www.meganii.comにCNAMEを設定して、meganii.netlify.comに向けます。

お名前.comでの設定

Hugoで生成した静的サイトのホスト先をさくらVPSからNetlifyに変更する https://i.gyazo.com/eaf25edb2d5651e71390d1628ba251e7.png

app.netlify.comでの設定

Custom domainを設定して、その後、HTTPSを有効にします。

リダイレクト処理

カスタムドメインを設定しても、元々の*.netlify.comにはアクセスできてしまうので、Google的には重複コンテンツと見なされるのではないか？とちょっと心配になったので、以下の通りリダイレクトを_redirectsファイルに設定しました。

注意点は、publicフォルダ直下に配置しないといけない点です。(最初、rootに置けばよいだけど思っていましたが、よくよく考えればその通りですね）

_redirectsファイルにRedirect処理を書くことができます。

Go Static Without Losing Your Server | Netlify

However, if you’re 100% sure that you’ll always want to redirect, even when the URL matches a static file, you can append an exclamation mark to the rule:

/app/*  /app/index.html  200!

https://meganii.netlify.com/* https://www.meganii.com/:splat 301!
http://meganii.netlify.com/* https://www.meganii.com/:splat 301!

:splatは、ワイルドカードのように使うみたいです。

/news/*  /blog/:splat

上記の設定だと、以下の通りリダイレクトされます。

/news/2004/01/10/my-story to /blog/2004/01/10/my-story

NetlifyでHugoを使うときの注意点

デフォルトだと、HugoのVersionは1.7ですが、hugo_0.19というbuild commandを利用することで、1.9のバージョンを利用できます。

_headers

~~_headersは、無料プランでは利用できないみたいです。~~

2017/07/23　追記

HTTP/2 Server Push on Netlify | Netlify の提供によって、無料プランでもheadersが利用できるようになりました。

ビルドにNetlify以外のCIツールを利用する場合

NetlifyのAPIを利用することで、Manual Deployが可能なため、CIツールからデプロイ可能です。 CircleCIの場合は、以下の通りcircle.ymlに記載します。

deployment:
  master:
    branch: master
    commands:
      - npm install netlify-cli
      - hugo -t hugo-zen
      - node_modules/.bin/netlify deploy -t "$netlify_token"