Tech Blog - Akihiro Suzuki

Gatsbyでブログをはじめる

November 22, 2021

ブログを始めるのに Gatsby を選ぶメリットは色々あると思いますが、私が思いつくメリットは以下。

  • markdown 記法で記事が書ける
  • 記事を GitHub で管理できる
  • Vercel を使えばデプロイが簡単
  • Plugin が豊富
  • React で書かれている(個人的趣味)

Gatsby で Blog を作る

Gatsby でブログをはじめるのは驚くほど簡単。以下をコマンドを叩くだけ。

npx gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

Gatsby の gatsby-starter-blog テンプレートの詳細は以下を参照。一緒にインストールされる Plugin 一覧などが載っている。

Gatsby - gatsby-starter-blog

インストールが完了したら、コマンドラインに表示されるままに作成されたディレクトリ下に移動してgatsby developするとブログが立ち上がる。

Your new Gatsby site has been successfully bootstrapped. Start developing it by running:

  cd gatsby-starter-blog
  gatsby develop

localhost:8000をブラウザで開くとブログが表示される。

Gatsby Starter Blog

Vercel にホスティング

Gatsby Cloud というのもありますが、私は Vercel を選びました。(ホスティングサービスのはその他にも色々選択肢があるので好みのものを選ぶと良いです。)

Vercel は Next.js の開発元ということもあり、Next.js で作ったアプリケーションをホスティングするのに使われることが多いですが、Next.js の他にも Gatsby や CRA、Nuxt.js など、その他色々なフレームワークに対応しています。

Deploy は公式の以下のページに書いてある手順の通りですが、Vercel の管理画面から GitHub のリポジトリと連携するだけです。これだけです。

How to Deploy a Gatsby Site with Vercel #Vercel for Git

新しく記事を追加するときも、GitHub に Push したら、自動でデプロイが走る。便利過ぎる。(語彙力)

以上、Gatsby でブログ作成 から デプロイまでの紹介でした。


profile

鈴木 章弘 (Suzuki Akihiro)
バックエンドエンジニア(TypeScript & マイクロサービス)
profile