初投稿

January 29, 2021

google analyticsやgoogle search consoleの勉強をするためにブログを立ち上げました。せっかくなので、勉強のために使ったことないフレームワークで作ることに。しばらくはgatsby + Netlifyを試してみます。

まずはこちらの記事を参考にベースを作成

$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
$ cd blog
$ git init .
$ git add -m 'first commit'
$ git commit

githubにリポジトリを作成し、pushします。

$ git remote add origin https://github.com/xxx/blog.git
$ git push origin master

githubのアカウントでNetlifyのアカウントを作成し、New site from gitからブログ用に作成したリポジトリを選択。
Deploy siteを押してしばらく待つとサイトが更改されました。すごく簡単。

ブログのタイトルが「Gatsby Starter Blog」のままなのと著者が別人になってるので変更します。

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `おはようからおやすみまで`,
    author: {
      name: `Staring Lion`,
      summary: `who lives and works in Sapporo, the city of love.`,
    },

gatsby developで表示確認すると、コードブロックにファイル名が表示されていない。追加でパッケージをインストールします。

$  yarn add gatsby-remark-prismjs prismjs gatsby-remark-code-titles

gatsby-transformer-remarkのpluginsにgatsby-remark-prismjsとgatsby-remark-code-titlesを追加します。

gatsby-config.js

      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-code-titles',
          },
          {
            resolve: `gatsby-remark-prismjs`,
          },

diff表記にしたいけど後回し。いったんここまででコミット。
ここを参考に独自ドメインを設定します。
で、https://www.staring-lion.com/ついに公開できました。