https://www.yewton.net/tags/github-pages/GitHub PagesHugo Blox Builder (https://hugoblox.com)jaMon, 13 Jan 2020 00:00:00 +0000https://www.yewton.net/media/sharing.pnghttps://www.yewton.net/tags/github-pages/https://www.yewton.net/2020/01/13/hugo-netlify/Mon, 13 Jan 2020 00:00:00 +0000https://www.yewton.net/2020/01/13/hugo-netlify/<p><a href="https://www.yewton.net/2016/02/02/blog-with-hugo/">この記事にあるとおり</a> 、当初このサイトは <a href="https://pages.github.com/" target="_blank" rel="noopener">GitHub Pages</a> でホストされ、 <a href="https://www.cloudflare.com/" target="_blank" rel="noopener">Cloudflare CDN</a> を利用して配信していた。</p> <p>だが先日 <a href="https://www.yewton.net/2020/01/06/made-with-academic/">テーマを変えた</a> ときに、既に使われていないリソースがそのまま残ってしまっていることに気がついた。 単純に <code>/public</code> 以下を <code>git add -a</code> しているだけなので、明示的に消さなければ反映されなくて当然だった。</p> <p>デプロイスクリプトを見直してもよかったが、 <a href="https://gohugo.io/" target="_blank" rel="noopener">Hugo</a> 自体が <a href="https://www.netlify.com/" target="_blank" rel="noopener">Netlify</a> でホストされているし、 <a href="https://gohugo.io/hosting-and-deployment/hosting-on-netlify/" target="_blank" rel="noopener">Netlify でホストするときの公式ドキュメントも用意されている</a> し、 <a href="https://docs.netlify.com/site-deploys/post-processing/#post-processing-features" target="_blank" rel="noopener">アセットの最適化機能</a> とかもついてくるし、何より <a href="https://www.netlify.com/pricing/" target="_blank" rel="noopener">無料だし</a> 、 ということで、移行することを決めた。</p> <div class="ox-hugo-toc toc"> <div></div> <div class="heading">&#30446;&#27425;</div> <ul> <li><a href="#%e3%83%87%e3%83%97%e3%83%ad%e3%82%a4%e6%89%8b%e9%a0%86">デプロイ手順</a></li> <li><a href="#%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e7%a7%bb%e8%a1%8c%e6%89%8b%e9%a0%86">ドメイン移行手順</a></li> <li><a href="#github-pages-%e3%81%a7%e6%8f%90%e4%be%9b%e3%81%97%e3%81%a6%e3%81%84%e3%81%9f%e3%81%9d%e3%81%ae%e4%bb%96%e3%81%ae%e3%83%aa%e3%83%9d%e3%82%b8%e3%83%88%e3%83%aa%e3%81%ae%e3%83%aa%e3%83%80%e3%82%a4%e3%83%ac%e3%82%af%e3%83%88%e8%a8%ad%e5%ae%9a%e6%89%8b%e9%a0%86">GitHub Pages で提供していたその他のリポジトリのリダイレクト設定手順</a></li> <li><a href="#%e3%81%9d%e3%81%ae%e5%be%8c">その後</a></li> </ul> </div> <!--endtoc--> <h2 id="デプロイ手順">デプロイ手順</h2> <p><a href="https://gohugo.io/hosting-and-deployment/hosting-on-netlify/" target="_blank" rel="noopener">公式ドキュメント</a> を超ざっくり要約すると、</p> <ol> <li><a href="https://app.netlify.com/" target="_blank" rel="noopener">Netlify でアカウント作成</a></li> <li><a href="https://gohugo.io/hosting-and-deployment/hosting-on-netlify/#configure-hugo-version-in-netlify" target="_blank" rel="noopener"><code>netlify.toml</code></a> をドキュメントを参考に配置</li> <li>連携する GitHub リポジトリを選択</li> <li><code>Deploy site</code> ボタンをポチる</li> </ol> <p><strong>以上。</strong></p> <p>これだけで <code>hoge.netlify.com</code> でアクセス出来るようになる。いい時代になった。</p> <h2 id="ドメイン移行手順">ドメイン移行手順</h2> <p>ただドメインも移行する場合はもう一手間必要で、<a href="https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/" target="_blank" rel="noopener">Netlify の公式ドキュメント</a> に従って DNS レコードの設定をする必要がある。</p> <p><a href="https://www.cloudflare.com/" target="_blank" rel="noopener">Cloudflare</a> の場合は、以下のように Cloudflare のダッシュボードで、 各ドメインが Netlify への <code>CNAME</code> となるように設定する。</p> <figure><img src="https://www.yewton.net/2020/01/13/hugo-netlify/2020-01-13_15-37-38_cloudflare.png"> </figure> <p>このとき、 <strong><code>Proxy status</code> が <code>DNS only</code> となるように</strong> (雲のアイコンがオレンジではなくグレーになるように) 設定する必要がある。</p> <p>さもないと、 Cloudflare の CDN 機能が間に挟まってしまい、 Netlify 側から認識されない。</p> <p>なお、 <strong><code>DNS only</code> にした時点で Cloudflare が発行した SSL 証明書は無効になる</strong> 。 そのため、ここからなるべく早く <a href="https://docs.netlify.com/domains-https/https-ssl/#certificate-service-types" target="_blank" rel="noopener">Netlify 側の SSL 証明書の設定</a> をした方がいい。</p> <p>当サイトの場合は設定してから1時間もしない内に SSL 証明書が有効になっていた。</p> <h2 id="github-pages-で提供していたその他のリポジトリのリダイレクト設定手順">GitHub Pages で提供していたその他のリポジトリのリダイレクト設定手順</h2> <p>サイトだけなら以上で万事完了なのだけれど、 GitHub Pages を利用していた場合の注意点として、 <code>github.io</code> リポジトリで <code>CNAME</code> を設定していた場合、それ以外で Pages 機能を利用しているリポジトリも同様のドメインでアクセスされるようになっている。 つまり、 <code>github.io</code> を Netlify へ向けた時点で、 <strong>それ以外のリポジトリが全てリンク切れとなる。</strong></p> <p>そのため、適切にリダイレクトするようにしなければならない。</p> <p><a href="https://docs.netlify.com/routing/redirects/" target="_blank" rel="noopener">Netlify の公式ドキュメント</a> に従ってやればいい…と思ったのだけれど、 原因は不明だが <strong><code>netlify.toml</code> で設定しようとしても反映されなかった</strong> 。</p> <p>最終的な <code>_redirects</code> ファイルの内容は以下のようになった:</p> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">https://yewton-net.netlify.com/* https://www.yewton.net/:splat 301! </span></span><span class="line"><span class="cl"> </span></span><span class="line"><span class="cl">/swagger-top-down-playground/* https://yewton.github.io/swagger-top-down-playground/:splat 301! </span></span><span class="line"><span class="cl">/dockerfiles/* https://yewton.github.io/dockerfiles/:splat 301! </span></span><span class="line"><span class="cl">/kafka-doc-ja/* https://yewton.github.io/kafka-doc-ja/:splat 301! </span></span></code></pre></div><h2 id="その後">その後</h2> <p>移行ついでに <a href="https://developer.okta.com/blog/2019/04/11/site-security-cloudflare-netlify" target="_blank" rel="noopener">How to Configure Better Web Site Security with Cloudflare and Netlify | Okta Developer</a> を参考に <a href="https://securityheaders.com/" target="_blank" rel="noopener">Security Headers</a> や <a href="https://www.ssllabs.com/ssltest/index.html" target="_blank" rel="noopener">SSL Server Test</a> で高評価になるように設定を見直したりなどした。</p> <p>ただこれはあんまり理解しないで書かれてる通りやっただけなところがあるので、いつか改めて記事にしたい。</p> <figure><img src="https://www.yewton.net/2020/01/13/hugo-netlify/2020-01-13_15-12-54_securityheaders.png"> </figure> <figure><img src="https://www.yewton.net/2020/01/13/hugo-netlify/2020-01-13_15-15-03_qualys.png"> </figure>