Netlify+Github(Private)+Hugoで個人ブログをサブドメインで公開する

5406 ワード
xserver Hugo xdomain Netlify xserver テキストリンク

想定読者

  • ブログやポートフォリオサイトを公開しておきたいが、無料が良い
  • コンテンツをGithubで管理したいがPublicリポジトリはなんか嫌
  • 独自ドメインで運用したい
  • 管理に極力手間をかけたくない(寝たい)
  • 学習したくない(寝たい)

サービス概要

  • Netlify
    • 静的コンテンツのホスティングサービスのすごいやつ
    • Github Pages、S3と比べると、CI/CD、DBとの連携もアドオン出来たり多機能だがデフォルトは超シンプル
    • Firebaseがバックエンドを楽に作ろう、に対しNetlifyは静的コンテンツを爆速でしかも便利に公開しようという分類らしい(よく知らないけどそんなようなことが書いてあった)
  • Hugo
  • XServer(XDomain)
    • ドメインの販売やレンタルサーバーなどをやっている有名どころです
    • おまけの内容ですが、今回.comドメインを購入して、XServerのDNSにサブドメインを登録したのでその手順も書きます
    • UI/UXがアレなので、ここの設定でハマりました
    • Netlifyもドメインを販売しているのですが、(お名前.comとも)比べたらXServerのほうが安かった
    • NetlifyもDNSを提供しているんですが、Apex domain(サブドメではないトップレベルドメイン)しか設定出来なそうなのでパスした

流れ

  • GithubにPrivateリポジトリを作成し、HugoのコードをまるごとPushしておく
  • Netlifyでアカウントを作りGithubと連携
  • デプロイするとNetlifyのランダムなURLでアクセス可能になる
  • XServerでドメイン取得→XServerのDNSにサブドメでCNAME設定
  • NetlifyでそのサブドメとSSL(Let's encryptの証明書)のVerify
  • おしまい

GithubにPrivateリポジトリを作成し、HugoのコードをまるごとPushしておく

  • Hogoの公開用ディレクトリだけではなく、Hogo本体ごとリポジトリに置いておけます
  • やり方は省略

Netlifyでアカウントを作りGithubと連携

  • Host on Netlifyがすべてです
  • 正直読まなくてもわかるほど、数回ボタンポチるだけで行けるので素晴らしいUI/UXです

デプロイするとNetlifyのランダムなURLでアクセス可能になる

  • https://upbeat-elion-1111111.netlify.app/ のようなURLが発行された。正直upbeat-elionって響きも悪くない

XServerでドメイン取得→XServerのDNSにサブドメでCNAME設定

  • .com でWHOISの代行オプションを付けると5年だとNetlify:$70、お名前:7000円、XServer:6000円くらいだった
    • それ以上は調べてません。キャンペーンとかでもっと安いのあるのかも
  • 無料がいい人はトケラウ諸島の.tkとか良いかも
  • ドメイン取得手順は、特に迷うところはないので、購入します
  • このあと以下のようにCNAMEレコードを追加して、NetlifyのランダムURLと合わせて設定します

  • ただし、この時私の画面では このドメインには、エックスドメインのネームサーバーが設定されていないため、ドメインパネルからDNSレコードの確認・設定を行うことができません。 と表示されるのみで、特に指示がなく完全に「????」状態でしたが、「ドメイン詳細」タブで使用するネームサーバーをXDomainのものにすると、レコードの追加ボタン出てきました。こちらの記事に救われました。

↓設定変更→Xdomainで利用するのラジオボタンを選択する

  • digで確認

大丈夫そう。

$ dig portfolio.ドメイン名.com

;; ANSWER SECTION:
portfolio.ドメイン名.com.  3100    IN  CNAME   upbeat-elion-111111.netlify.app.
upbeat-elion-111111.netlify.app. 20 IN  A   xxx.xxx.xxx.xxx
  • ドメイン周りは雰囲気エンジニアリングなので、不正確/別のやり方あったらすみません

NetlifyでそのサブドメとSSL(Let's encryptの証明書)のVerify

  • 作成したサイトからたどってDomain Settings>Domain Management>Custom domains から先程の portfolio.ドメイン名.comを追加
  • 同ページ内HTTPS>SSL/TLS certificateからLet's Encryptの証明書を提供してもらってください
    • DNSレコードの存在/妥当チェックが行われているはずなので、digの結果も参考にしつつしばし待つ
    • チェックして実際にProvisionすると “missing certificate”というエラーメッセージ出て「は?」ってなるけど、こちらも少し時間を置いてやるとうまくいく。キャッシュかなぁと思って見に行ったら、XDomainではTTLは変更出来ないっぽいです。

所感

  • いいところ
    • 今回の用途であれば、めちゃくちゃ楽だった
    • Build Plugins、Functions、GraphQLでのFaunaDBとの連携なども色々ありそう
    • 無料プランでそこそこ遊べる
  • いまいちなところ
    • 体感的に遅い
      • 静的コンテンツだからもう少し早いかと
      • Github pagesよりか遅く感じる
      • 阿部寛のサイトには到底かなわない

「試しました」記事なので正確性は大目に見てください。
以上です。