兼ねてより試してみたかった Gatsby.js + Vercel の組み合わせに着手してみました。
まずは 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
⠀
http://localhost:8000/___graphql
⠀
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 でリポジトリを作成して、このリポジトリに先ほどのプロジェクトを push 。ちなみにリポジトリは public である必要があります。
次に Vercel でアカウントを作ります。
Sign Up をクリック。
今回は GitHub を使用しているので「Continue with GitHub」を選択。
「Authorize Vercel」で Vercel のアクセスを認証します。
ログインできました。
一度中断してしまったのでダッシュボードから。ここからであれば「New Project」で次へ進みます。
Import Git Repository から「Add GitHub Org or Account」。
インポートするリポジトリを選択します。今回は1つのリポジトリだけに Vercel に連携させます。
リポジトリの確認です。使用しているフレームワークが自動判別されるのはありがたいですね。
次の画面でフローに沿って設定を進めていきます。最初に Vercel のチームを作成する画面が有効になっていますが、今回は個人なので「Skip」。
プロジェクトの設定。出力の設定や環境変数を設定できますが、今回はそのままで。
デプロイ中。
少し待つとデプロイが完了します。そこでURLから実際の画面を表示させると……きちんとデプロイされていました!
ここまでで Gatsby.js + Vercel でブログを作成することができました。
今後の課題としては以下の通り。
あとは折角なので GraphQL にも少しは触ってみたいところですね。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント