gatsbyjsブログ開設方法

February 10, 2020

1. ブログ開設

gatsbyjsの公式サイトがブログのテンプレートを提供してくれているので、そこから自分が気に入ったものを選んでローカルに落とします。

テンプレート一覧はこちらから

1-1. gatsbyインストール

npm install -g gatsby-cli

1-2. ブログテンプレートインストール

ここではこちらのテンプレートをインストールします。[respository name]を適当なディレクトリー名に変えて実行します。

gatsby new [repository name] https://github.com/gatsbyjs/gatsby-starter-blog

1-3. ローカルで実行

cd [repository name]
gatsby develop

http://localhost:8000/ から接続できるはず。

2. 基本的なカスタム

2-1. Blog title等を変更

gatsby-config.jsを修正

   siteMetadata: {
+    title: `Tesshu's Blog`,
+    author: `Tesshu Ohkura`,
+    description: `Tesshu's Blog`,
+    siteUrl: `https://tesshus-blog.netlify.com/`,
     social: {
+       twitter: `ito1002jp`,
     },

2-2. プロフィール修正

src/components/bio.jsを修正します。

2-2-1. プロフィール画像修正

使用したいプロフィール画像をcontent/assetsに入れる。ファイル名をprofile-pic.jpgにすれば、ソースの修正は不要。違う名前のファイルを使う場合は下記コードの[file name]を適当なファイル名に変更。

+     avatar: file(absolutePath: { regex: "/[file name]/" }) {
        childImageSharp {
          fixed(width: 50, height: 50) {
            ...GatsbyImageSharpFixed
          }
        }
      }

2-2-2. プロフィール文章修正

      <p>
+        Written by <strong>{author}</strong> who lives and works in Tokyo building useful things.
        {` `}
        <a href={`https://twitter.com/${social.twitter}`}>
          You should follow him on Twitter
        </a>
      </p>

2-3. 記事の整理

デフォルトの記事が三つ入っているので、不要な記事を削除します。記事はcontent/blog内で管理されています。 hello-world以外の記事を消します。

3. デプロイ

Netlifyという静的ウェブサイトを無料でデプロイできるサービスを利用します。

3-1. githubのレポジトリにコミット

事前にgithubのレポジトリーに上記作業で生成したファイルをコミットしてください。コミットの仕方は割愛します。

3-2. Netlifyにデプロイ

会員登録後、下記画像の “New Site from Git”ボタンをクリック。
“GitHub”をクリック。
2-1で作成したrepositoryを選択。
設定変更なしで “Deploy Site”ボタンをクリック。

3-3. ドメイン変更

任意ですが、デフォルトのドメインをカスタムできるので、デフォルトのドメインを変更します。

Domain settingsボタン押下。
Custom domains/・・・/Edit site nameを選択し、変更したい名前に変更。

3-4. 確認

設定したURLに接続します。僕の場合は、https://tesshus-blog.netlify.com/

イェイいい感じ