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 が使われるようです
今回は１から練習がてら作り上げたかったので
gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2とプレーンなものかつ、Gatsby v.2 を使うものにしてみました
参考) Gatsby Starters | GatsbyJS
GatsbyではTypograpyが公式サイトで紹介されてるので入れてみます
yarn add --dev gatsby-plugin-typography react-typography typographyTypographyのための設定ファイルを用意
$ 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