Hugo + GitHub Pagesでブログを作る#2

May 18, 2015   #hugo  #github  #markdown  #dns 

Hugoでブログを作ってみる 第二部です。

第二部では、Github Pagesへファイルをアップロードし、公開する方法を紹介します。

GitHubへ未登録であれば、無料ですのでアカウント登録をお願いします。

必要なリポジトリを作る

GitHub Pagesで公開するリポジトリを作ります。

リポジトリ名は決められていて、<usrname>.github.ioです。 私の場合はリポジトリ名がtanksuzuki.github.ioとなり、公開URLはhttp://tanksuzuki.github.ioになります。

公開範囲はPublic、Initializeはしなくて良いです。

公開用ファイルを作成する

下記のコマンドで公開用ファイルを作成してください。

hugo -t angels-ladder

第一部でも書きましたが、ゴミファイルに注意です。

実行にあたって気を付けたいのは、hugo serverで作ったHTMLもhugoで作ったHTMLも同じpublicディレクトリに入る点です。 hugo serverで下書きも生成してからhugoで公開用ファイルを作成すると、本来不要な下書きのファイルはpublicに残ったままになります。 hugo実行前に、postディレクトリ内を整理することをおすすめします。
引用元:Hugo + GitHub Pagesでブログを作る#1

GitにPushする

下記のコマンドをpublicディレクトリ内で実行します。 Macの方は.DS_Storeもgitにpushされてしまうので、.gitignoreで指定してください。

git init
echo ".DS_Store" >> .gitignore
git add -A
git commit -m "Initial commit"
git remote add origin https://github.com/tanksuzuki/tanksuzuki.github.io.git
git push -u origin master

公開されていることを確認する

ブラウザから、http://<username>.github.ioにアクセスしてみましょう。 見慣れた画面が表示されたでしょうか?

今後更新していくには

今後、更新する場合の流れは下記の通りです。

  1. 記事を作成 or 記事を編集する。
  2. hugo serverで表示内容を確認する。
  3. public/postディレクトリ内をクリアする。
  4. hugoコマンドで公開用HTMLを作成する。
  5. git add -A, git commit, git pushを実行する。

私はコマンドを実行するのが面倒なので、3〜5をスクリプト化しています。 Mac専用で、あまりきれいなものではないですが、参考になれば。

上記のスクリプトは作業ディレクトリ直下で実行します。 普通にスクリプトを作るだけだと実行権限がないので、chmod a+x hugo-build.shしてください。

独自ドメインの使い方2パターン

独自ドメインを使う場合は2パターンに分かれます。

  • サブドメイン(例:blog.tanksuzuki.com)で公開するケース
    • こちらの方が簡単です。
    • レジストラのDNSでCNAMEレコードを追加します。
    • GitHubにCNAMEファイルを作成します。
  • Zone Apex(例:tanksuzuki.com)で公開するケース
    • こちらの方が手間がかかります。
    • Gehirn Infrastructure Serviceに登録して、Apex AliasのAレコードを登録します(今は無料ですが、今後有料化されます)。
    • レジストラのDNSからGehirnのDNSに権限委譲します。
    • GitHubにCNAMEレコードを追加します。

私はドメインをムームードメインで取得しました。 他のレジストラの方は参考になるかわかりませんが、所々でヘルプへのリンクを貼っておきます。

サブドメインで公開するケース

tanksuzuki.github.ioを、blog.tanksuzuki.comで公開するケースで説明します。

レジストラのDNSでCNAMEレコードを追加する

独自ドメインを登録しているレジストラにて提供されている、DNSの設定変更を行います。 ムームードメインの場合は、カスタム設定のセットアップ方法 | ムームードメインの通りです。

レコードを追加する画面にて、下記の内容で設定を追加します。

項目 設定値
サブドメイン blog
レコード種別 CNAME
レコード内容 tanksuzuki.github.io.

※レジストラによっては、レコード内容末尾の.が不要なケースがあります。

GitHubにCNAMEファイルを追加する

publicディレクトリ直下に、CNAMEファイルを追加します。 CNAMEファイルには、公開するドメイン名を書いておきます。

echo blog.tanksuzuki.com > CNAME
git add -A
git commit -m "Add CNAME"
git push

以上の手順で、公開が完了します。

Zone Apexで公開するケース

tanksuzuki.github.ioを、tanksuzuki.comで公開するケースで説明します。

既にご存知かもしれませんが、tanksuzuki.comのようなサブドメインが付かないドメインのことをZone Apex(=ゾーンの頂点)と言います。

普通に考えるとZone ApexのCNAMEでtanksuzuki.github.io.を指定したくなりますが、DNSの仕様上できません。 正確に言うとできるにはできるのですが、CNAME以外を応答しなくなるため、MX等を設定しているとメールが落ちます。

そんな問題を解決するのが、Gehirn Infrastructure Serviceで提供されているApex Aliasという機能です。

Gehirn Infrastructure Serviceに登録する

本記事執筆時点では、Public Preview中なので無料で使用できます。 Public Previewが終わると、1ゾーンあたり1日2円の利用料が発生します。

GIS - Gehirn Infrastructure Service ゲヒルンインフラストラクチャサービスにアクセスし、「新しいGehirn IDを取得する」から登録を行います。 登録が終わったら、管理画面にログインしてください。

※参考で画面を貼っておきます。既に設定が終わっているものですので、少し表示は異なります。

まずは支払情報を登録しないといけません。 支払いはクレジットカードとコンビニ払いが選べるようですが、初回に限ってはコンビニ払い限定のようです。

メニューの「ウォレット」を選択します。

「新しいウォレットを追加」を選択し、住所情報等を入力します。

次にDNSの設定を行います。 メニューの「サービス一覧」をクリックし、「GIS」を選択します。

メニューの「DNS」をクリックします。

「ゾーンを追加する」をクリックします。

「ドメイン設定へ移動」をクリックします。

「ドメインを認証する」をクリックします。

ドメイン名を入力し、「ドメインを認証する」をクリックします。

ドメインの所有権を確認するためのレコードが表示されます。 使っていないドメインであれば、「新規取得ドメインなど」の方を、稼働中で重要なレコードが入っているドメインであれば、「既存ドメインの移設など」を選択します。 本記事では、「新規取得ドメインなど」で進めます。

レジストラ側の設定に移ります。

レジストラのDNSからGehirnのDNSに権限委譲する

ドメイン所有権確認のレコードを、レジストラ側のDNSに設定します。 ムームードメインの場合は、ネームサーバのセットアップ方法(GMOペパボ以外のサービス) | ムームードメインに記載の手順で設定します。

Apex Aliasの設定を行う

Gehirn側に戻ります。

ドメイン一覧から、「未認証ドメインを今すぐ確認」をクリックします。

DNSの管理画面から「ゾーンを追加する」をクリックし、登録したドメインを選択の上「ゾーンを追加する」をクリックします。

以降は、下記の流れでレコード情報を編集できるようになります。

  1. 「アクティブバージョンをクローン」をクリックする。
  2. レコードを設定する。
  3. 「このバージョンをアクティブにする」をクリックする。

Apex Aliasは、下記のように設定します。

ドメインの認証が終われば、レジストラに登録した確認レコードの1行目は不要になります。 忘れない内に消してしまってください。

GitHubにCNAMEファイルを追加する

publicディレクトリ直下に、CNAMEファイルを追加します。 CNAMEファイルには、公開するドメイン名を書いておきます。

echo tanksuzuki.com > CNAME
git add -A
git commit -m "Add CNAME"
git push

以上の手順で、公開が完了します。

関連記事