Gatsbyjsでblogをさくっと構築する

March 17, 2020 — 2 Min Read

導入手順

https://www.gatsbyjs.org/docs/quick-start/

これだけの手順で構築出来ちゃった

npm install -g gatsby-cli
gatsby new gatsby-starter-markdown https://github.com/cvluca/gatsby-starter-markdown
cd gatsby-starter-markdown
npm install
npm audit fix
gatsby build
gatsby serve

タイトルとか設定を変更する

vi data/SiteConfig.js

# bioを変更する
vi ./src/components/Bio.js

# aboutを変更する
vi ./src/components/About.js

# contactを変更する
vi ./src/pages/contact.js

github pagesへのデプロイ

npm install gh-pages --save-dev
npm audit fix

# パスを修正しておく
vi data/SiteConfig.js
# pathPrefix: "/blog"

vi package.json
# {
#   "scripts": {
#     "deploy": "gatsby build --prefix-paths && gh-pages -d public -b gh-pages"
#   }
# }

npm run deploy

文字化け

URLに日本語が入ってしまい、URLをコピペして記事に貼ってもうまくURLが表示できない。

2020/03/20 追記

titleを元にslugというパスを生成するように作られていたので、node idをパスにする修正をした。
titleでパス生成しちゃうと同じtitleにしたときに動かない気が。。

//vi gatsby-node.js
    if (
      Object.prototype.hasOwnProperty.call(node, "frontmatter") &&
      Object.prototype.hasOwnProperty.call(node.frontmatter, "title")
    ) {
      slug = `/${node.id}`; //ここを修正した
    } else if (parsedFilePath.name !== "index" && parsedFilePath.dir !== "") {
      slug = `/${parsedFilePath.dir}/${parsedFilePath.name}/`;
    } else if (parsedFilePath.dir === "") {
      slug = `/${parsedFilePath.name}/`;
    } else {
      slug = `/${parsedFilePath.dir}/`;
    }

graphiql便利！！

ちょっと特殊な記法だけど、jsonで出すときの形と同じなので書きやすい。
そして、Explorerがあるので見るのが楽ちん！

hoge

gatsbyjs

Written by littlem.