このブログの作り方(Gatsby.js + Netlify) Part1/3:サイトを作成する

magmaslime Blog / このブログの作り方 Part1/3:サイトを作成する

趣味で作っている Web サービスの記録を残そうと思い、ブログを開設しました。 この記事では、ブログを作ったやり方について書こうと思います。
ちなみに筆者はプログラムは書いていますが、Web サービス開発は初心者なので、同じような状況の方を想定して書きます。

利用したサービス・ツールについて

このブログは、Gatsby.jsによってブログを生成し、Netlifyを利用して Web 上に公開しています。
簡単に書くと以下の図のような感じです。

architecture

Gatsby.jsで生成したブログラムでブログを更新し、GitHubにプッシュすると、Netlifyが検知して Web 上のブログが更新される仕組みになっています。
これらのツール・サービスを利用した大きな理由は「無料である」「(ブログサービスと比べて)自由度が高い」「独自ドメインを利用できる」ことです。ちょうどフロントエンドの勉強がしたかったのもあり、カスタマイズできる点が魅力的でした。

ゼロからブログを公開するまでのやり方

以下に簡単に流れを書きます。

  1. Netlifyに登録して、Gatsby.jsで生成したサイトを作成する
  2. (オプション)ドメインを取得する
  3. GitHubからプログラムをローカルにダウンロードしてくる
  4. ローカルで雛形のプログラムを修正してブログを作成して、GitHubにプッシュする
  5. Web 上のサイトが更新されていることを確認する

ドメインを取得するかしないかは自由ですが、今回はせっかくなので取得しました。
(「magmasli.me」というドメインが気に入ったのもあります。)

1. Netlifyに登録して、Gatsby.jsで生成したサイトを作成する

Netlifyに登録すると、その場でGatsby.jsで生成した雛形のブログが作成されます。作成された時点でNetlifyで生成された URL で Web 上に公開されています。 さらに、プログラムは登録時に設定したGitHubのリポジトリに保存されています。 登録は 1 分くらいでできるくらい簡単です。

まず、この URLにアクセスして、「Connect to GitHub」を押します。

netlify-01

次に、設定したいGitHubのリポジトリ名を記入して、「Save & Deploy」を押します。

netlify-02

以上の作業で登録は完了し、ブログが作成されます。

netlify-03

画像の例では、「https://optimistic-cori-744e46.netlify.com/」という URL で作成されています。 このページが表示されてからブログが作成されるまでに少し時間がかかりますが、そのうちアクセスできるようになります。

ちょっと長くなってしまったので、手順 2 以降は別の記事にまとめたいと思います。

Part2/3:ドメインを取得する」へ