Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

自サイトを Gatsby + Gatsby Cloud で置き換えようと思った話

はじめに

自サイトの構成が古く(生PHPによるお手製CMS!)なってきたので、新しい技術で置き換えようと思いました。

いろいろ調べてみると、Next.jsGatsbyというフレームワークが良さそうだったので、こちらはGatsbyを試してみた記事です。

Next.jsについて試してみた記事はこちらです。
https://qiita.com/naga3/items/1aaa8d58bf0e4bfa27b6

Gatsby & Gatsby Cloudについて

Next.jsは動的コンテンツと静的コンテンツの両方に対応していましたが、Gatsbyは静的コンテンツのみの対応みたいです。

Gatsby CloudでGatsbyで作成されたコンテンツのホスティングができます。

Gatsby Cloudは無料プランと有料プランがありますが、個人が普通に使うぶんには無料プランで十分そうです。
https://www.gatsbyjs.com/pricing/

Gatsby CloudはVercelとは違い、独自ドメインが使えません。他のホスティングサービスとの連携が容易にできるので、VercelやNetlifyなどと接続して独自ドメインを使うスタンスのようです。

また、Gatsby CloudではWordPressなどのCMSをデータソースとして接続できます。最近WordPressはAPI対応になったので、フロントとして使う感じでしょうか。

Gatsby Cloudプロジェクト作成

アカウントがなければサインアップしておきましょう。
https://www.gatsbyjs.com/dashboard/signup/

まず、ダッシュボードからAdd a siteを押します。

既存のリポジトリを使うImport from a Git repositoryと、テンプレートから作成するStart from a Templateがありますが、今回はゼロから作るのでStart from a Templateを選びます。

StarterはBlogを選びます。

次にリポジトリを選ぶのですが、GitHubにGatsby Cloudをインストールするか聞かれるのでインストールします。その後リポジトリ名を聞かれるので適当に付けます。

しばらくするとビルドが完了してサイトを見ることができるようになります。

ローカルでの開発

ここからはローカルでの開発になります。nodeyarnはインストールしておきます。

上で作成したリポジトリをcloneして、

yarn install
yarn develop

を実行するとサーバーが立ち上がって、http://localhost:8000で確認することができます。

予め3ページ作られているようです。

Screenshot from 2020-11-12 08-49-12.png

ページの編集

ページの編集はMarkdownファイルで簡単にできるようです。

content/blog/new-beginnings/index.mdを編集してみます。

new-beginnings/index.md
---
title: こんにちは
date: "2015-05-28T22:40:32.169Z"
description: ページの説明です。
---

こんにちは最初のページです。

保存するとリアルタイムで当該ページ・トップページ両方に変更が反映されました。

http://localhost:8000/new-beginnings/
Screenshot from 2020-11-12 08-56-45.png

http://localhost:8000
Screenshot from 2020-11-12 08-55-36.png

ページの追加は、/content/blogディレクトリに、そのままMarkdownファイルを置けば良さそうです。

content/blog/page2.md
---
title: あはああああああ
---

うほおおおおおおお

Screenshot from 2020-11-12 09-07-54.png

ローカルからのデプロイ

そのままmasterにpushすれば本番に反映されます。

naga3
最近はIT講師が多い似非プログラマです。 自サイトでいろんな言語の入門をやっています。
http://ponk.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away