freks blog

Gatsbyでブログを作った

Gatsbyでブログを作ってみました

公式ドキュメント Docs | GatsbyJS のQuick Startを参考に

npm install --global gatsby-cli

これでどこでも gatsby コマンドが使えます

gatsby new (ディレクトリ名) (使うテーマのrepositoryのパス)

で始めるのですが、テーマのrepositoryを省略して

gatsby new blog
# info Creating new site from git: https://github.com/gatsbyjs/gatsby-starter-default.git

とすると gatsbyjs/gatsby-starter-default が使われるようです

今回は1から練習がてら作り上げたかったので

gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2

とプレーンなものかつ、Gatsby v.2 を使うものにしてみました

参考) Gatsby Starters | GatsbyJS

Typograpyプラグインを入れる

GatsbyではTypograpyが公式サイトで紹介されてるので入れてみます

yarn add --dev gatsby-plugin-typography react-typography typography

Typographyのための設定ファイルを用意

$ vim src/utils/typograph.js

import Typography from "typography"
const typography = new Typography({ baseFontSize: "24px" })
export default typography

$ vim gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography.js`,
      },
    },
  ],
}

これで gatsby develop を立ち上げ直せば、Typographyの設定が反映されます

rhythm() ってなに?とコードを見てみると

typography.js/client.js at master · KyleAMathews/typography.js

import verticalRhythm from 'compass-vertical-rhythm'
// skip
const vs = verticalRhythm(options)
vs.rhythm(1)

のことらしい つまりは、縦方向の幅を決まった間隔で並べることができるようです(縦方向のリズムを整える)

Vertical Rhythmはこの記事がわかりやすかったです

CSS Rhythmic Sizing で Vertical Rhythm | blog.jxck.io

レイアウトを整えていくのが大変なので、Typographyのテーマを使いました
Typography.js で見た目が確認できるので、気に入ったテーマがあったら

yarn add typography-theme-ocean-beach

$ vim src/utils/typograph.js

import Typography from "typography"
import theme from "typography-theme-ocean-beach"
const typography = new Typography(theme)
export default typography

としてあげるといい感じになります
日本語がきれいでないので

Customizing themes を参考に

import Typography from 'typography'
import theme from 'typography-theme-ocean-beach'
theme.googleFonts.push(
  {
    name: 'Noto+Sans+JP',
    styles: ['400'],
  }
)
theme.bodyFontFamily = ['Noto Sans JP', 'Roboto', 'serif']
const typography = new Typography(theme)
export default typography

Noto Sans JP - Google Fonts を入れました

ここまでで、なんとかサイトっぽくなりました

ブログにする

あとは、 Data in Gatsby | GatsbyJS
以降のチュートリアルを参考に、マークダウンでブログが表示されるようにしていきました

できたコードは以下にあげています
ちょこちょこアップデートしていこうと思います
shoji-k/freks-blog - GitHub