medium + Route53 から gatsby cloud + Route53 に変更した。

medium + Route53 から gatsby-starter-blog , gatsby cloud, Route53 に変更した。

やったこと

• gatsby-starter-blogを clone して編集
• github に push
• gatsby-cloud でホスティング
• DNS 反映

gatsby-cloud でのホスティング方法は公式ドキュメントや gatsby-starter-blog の REAMDE にも書かれているのでそれに沿って進める。

gatsby-starter-blog

• gatsby-starter-blogをローカルに clone
• gatsby-config.js を編集
• CSS をお気持ち程度に変更

medium からの Export

medium の記事は幸い（？）たいした量ではなかったので、settingsの 「Download your information」からダウンロードした。 実行してしばらくすると「Medium download request」という件名のメールが送られてくるので、記載されたリンクから 24h 以内にダウンロードすれば良い。

medium の記事を markdown に変換する

medium-2-md を利用して markdown に変換した。

Twitter のカード UI

Twitter のカード UI に対応するため、@weknow/gatsby-remark-twitterを入れた。 gatsby-config.js に 1 行追加するだけで良い。

plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["@weknow/gatsby-remark-twitter"], // Add
    },
  },
];

DNS 設定

ほぼ Adding a Custom Domainの通り。

In the Please enter a domain field, add one of the following:

• your apex or root domain (this is your custom domain without the www. part, e.g. mysite.com)
• your subdomain (e.g., www.mysite.com or store.mysite.com)

と書かれている通り、apex または root ドメインであれば A レコード, サブドメインであれば CNAME として設定する。

今回は apex ドメインではなくて、サブドメインなので CNAME レコードを設定している。

やりたいこと

画像は別の場所にアップロードし、url で参照するようにしたい（リポジトリにバイナリを push したくない）。