兼ねてより試してみたかった Gatsby.js + Vercel の組み合わせに着手してみました。
Gatsby.js のインストールと Gitリポジトリ の準備
まずは Gatsby.js のプロジェクトを作って Gitホスティングサービス に push します。
> yarn init
## 略
success Saved package.json
Done in 2.33s.
適当なディレクトリで package.json
を生成。
> yarn add gatsby-cli
## 略
Done in 26.05s.
続いて gatsby-cli
をインストールします。一応グローバルではなくローカルで。
今回のテーマはこれにします。
> gatsby new mptotkb https://github.com/renyuanz/leonids
╔════════════════════════════════════════════════════════════════════════╗
║ ║
║ Gatsby collects anonymous usage analytics ║
║ to help improve Gatsby for all users. ║
║ ║
║ If you'd like to opt-out, you can use `gatsby telemetry --disable` ║
║ To learn more, checkout https://gatsby.dev/telemetry ║
║ ║
╚════════════════════════════════════════════════════════════════════════╝
info Creating new site from git: https://github.com/renyuanz/leonids.git
Cloning into 'mptotkb'...
remote: Enumerating objects: 60, done.
remote: Counting objects: 100% (60/60), done.
remote: Compressing objects: 100% (44/44), done.
Receiving objects: 100% (60/60), 542.69 KiB | 5.32 MiB/s, done.eceiving objects: 100% (60/60)
success Created starter directory layout
info Installing packages...
info Preferred package manager set to "npm"
## 略
Your new Gatsby site has been successfully bootstrapped. Start developing it by running:
cd mptotkb
gatsby develop
プロジェクト作成完了。
> cd mptotkb
> gatsby develop
## 略
info
Hi from the Gatsby maintainers! Based on what we see in your site, these coming
features may help you. All of these can be enabled within gatsby-config.js via
flags (samples below)
Preserve webpack's Cache (https://github.com/gatsbyjs/gatsby/discussions/28331), which changes Gatsby's cache clearing behavior to not clear webpack's
cache unless you run "gatsby clean" or delete the .cache folder manually.
Here's how to try it:
module.exports = {
flags: { PRESERVE_WEBPACK_CACHE: true },
plugins: [...]
}
⠀
You can now view gatsby-starter-leonids in the browser.
⠀
http://localhost:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
⠀
Note that the development build is not optimized.
To create a production build, use gatsby build
⠀
success Building development bundle - 48.261s
OK。完了しました。
最初は手始めということでこの状態でいったん push しておきたいと思います。 Gitリポジトリ に登録するのは親ディレクトリではなく作成したプロジェクト (今回は mptotkb
下) です。
![GitHub でリポジトリを作成](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_0-1024x1003.jpg)
GitHub でリポジトリを作成して、このリポジトリに先ほどのプロジェクトを push 。ちなみにリポジトリは public である必要があります。
Vercel と Gitホスティングサービス の連携
次に Vercel でアカウントを作ります。
![Vercel で Sign Up をクリック](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_1-1024x56.jpg)
Sign Up をクリック。
![GitHub と連携](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_2.jpg)
今回は GitHub を使用しているので「Continue with GitHub」を選択。
![Vercel のアクセスを認証して権限を付与](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_3-968x1024.jpg)
「Authorize Vercel」で Vercel のアクセスを認証します。
![Vercel にログイン成功](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_4-1024x737.jpg)
ログインできました。
リポジトリのインポート
![ダッシュボードから「New Project」](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_6.jpg)
一度中断してしまったのでダッシュボードから。ここからであれば「New Project」で次へ進みます。
![Import Git Repository から「Add GitHub Org or Account」](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_7.jpg)
Import Git Repository から「Add GitHub Org or Account」。
![インポートするリポジトリを選択](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_8.jpg)
インポートするリポジトリを選択します。今回は1つのリポジトリだけに Vercel に連携させます。
![リポジトリの確認](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_9.jpg)
リポジトリの確認です。使用しているフレームワークが自動判別されるのはありがたいですね。
![チームの作成は「Skip」](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_10-1024x366.jpg)
次の画面でフローに沿って設定を進めていきます。最初に Vercel のチームを作成する画面が有効になっていますが、今回は個人なので「Skip」。
![Configure Project](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_11.jpg)
プロジェクトの設定。出力の設定や環境変数を設定できますが、今回はそのままで。
![デプロイ中](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_12.jpg)
デプロイ中。
![デプロイされた画面を実際に確認](https://labor.ewigleere.net/wp-content/uploads/2021/08/publish-blog-by-gatsvyjs-vercel-20210824_13-1024x545.jpg)
少し待つとデプロイが完了します。そこでURLから実際の画面を表示させると……きちんとデプロイされていました!
ここまでで Gatsby.js + Vercel でブログを作成することができました。
今後の課題としては以下の通り。
- サイト名や著者情報といった基本情報のカスタマイズ
- どうやらブログ記事の Markdown ファイルを生成する CLI やユーティリティはなさそうで、手作業で記事をちまちま作っていくのは手間なので記事リソースを別の場所 (Headless CMS とか) で管理して JAMStack にする
あとは折角なので GraphQL にも少しは触ってみたいところですね。
参考
Gatsby.js + Vercel
- 【ZEIT Now】Gatsbyサイトを無料サーバーVercelで公開する方法を徹底解説 | WebCraftLog
- Gatsby + microcms + Vercel でブログを作って公開したい
- Vercel – Git – Vercel Documentation
- 参考記事とは画面構成が変わっていたため、最終的には Vercel のドキュメントが頼りでした