Rの技術メモ

Gatsby+GitHub Pages+Cloudflareで静的Webサイト構築

Gatsbyを使って静的WebサイトをMarkdownで作成し、CircleCI経由でGitHub Pagesにデプロイ。GitHub Pagesはカスタムドメインを設定し、Cloudflare経由でSSLアクセスを可能にする。

手順

Gatsbyの導入

インストール

Terminal window
npm install -g gatsby

config.toml設定

config.tomlはgatsbyの設定ファイル

config.toml
blogTitle = "技術忘備録"
authorName = "r-tamura"
authorDetail = "Web関連多めのソフトウェアエンジニアです。"
linkPrefix = ""
googleAnalyticsId = ""
syntaxTheme = "ocean"
twitterId = "r_tamura30"
facebookId = ""
githubId = "r-tamura"

カスタムドメインの取得

お名前.comにて取得

  • ドメイン名: rtam.xyz
  • WHOIS情報: お名前.comに委譲

CircleCI経由でのデプロイ

CircleCIの設定ファイルcircle.ymlにデプロイ用設定を入力

circle.yml
machine:
  node:
    version: 7.9.0
dependencies:
  override:
    - yarn install
test:
  override:
    - echo "skip test..."
deployment:
  production:
    branch: source # sourceブランチでビルドされた場合のみdeployを行う
    commands:
      - git config --global user.name "CircleCI"
      - git config --global user.email "[email protected]"
      - npm run clean
      - npm run build:prefix
      - npm run deploy
general:
  branches:
    ignore:
      - master # masterレポジトリpush時はcheckoutしない

デプロイ先のレポジトリへのDeploy keyがないので、作成してGitHub側に公開鍵, CircleCI側に秘密鍵を登録する

鍵の作成

rd_rsa, rd_rsa.pubを生成する

Terminal window
// RSA / 2048bit / コメントなし / パスフレーズもなし
$ ssh-keygen -t rsa -b 2048 -C ''
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

秘密鍵をCircleへ登録

Circle CIダッシュボード > PROJECTS > [ブログプロジェクト] > 右上の歯車マークの設定ボタン > SSH Permissions > Add SSH Key

Hostname: github.com
Private Key: id_rsaのテキスト

上記内容を入力して、Add SSH Keyを選択

公開鍵をGitHubへ登録

[デプロイ先プロジェクト] > Settings > Deploy keys > Add deploy key

Title: 任意
Key: id_rsa.pubのテキスト
Allow write access: チェックする

上記内容で設定し、Add keyを選択

Cloudflare設定

Cloudflareアカウント登録

Cloudflare > Sign up > アカウント情報入力 > Create Account

DNS設定

ドメイン名スキャン

rtam.xyzをテキストボックスに入力して[Scan DNS Records]でスキャンを開始する(1分弱かかる)

DNS設定

設定属性設定値
TypeA
Namertam.xyz
Value192.30.252.153, 192.30.252.154
TTLAutomatic

Follow your DNS provider’s instructions to create two A records that point your custom domain to the following IP addresses:

192.30.252.153 192.30.252.154

Configuring A records with your DNS providerに記載されているIPを登録する

上記設定後、Continueを選択

※GitHubのレポジトリ設定画面でCustom domainにカスタムドメインが設定されていることを確認する

custom-domain

Cloudflareプラン設定

無料のFree Websiteを設定 > Continueを選択

ネームサーバの確認

Cloudflareが用意するネームサーバが2つあることを確認し、メモする(次に、DNSレジストラ側でそのDNSサーバを設定するため) > Continueを選択

ドメインレジストラのDNSサーバ設定をCloudflareのDNSに設定

お名前.comへアクセス > ログイン > 取得したドメインのネームサーバ > 他のネームサーバを利用 > Cloudflareで確認したネームサーバを登録

CloudflareでSSL設定

SSL

SSL: Frexible

これによりClient <=> Cloudflare 間はHTTPS, Cloudflare <=> GitHub 間はHTTPとなる GitHubにカスタムドメインの証明書を登録できないためa

HTTP Strict Transport Security (HSTS)

設定属性設定値
StatusOn
Max-Age6 months (recommended)
Include subdomainsOn
PreloadOn
No-sniffOn

Automatic HTTPS Rewrites

ONに設定する

参考