Gatsby を使って React.js 製ブログを5分で作ってみた
前々から気になっていた React.js 製のサイトを立ち上げるジェネレータ、Gatsby (GatsbyJS) を試してみた。
公式サイトの Get Started に沿って試してみる。
# Gatsby CLI をグローバルインストールする
$ npm install -g gatsby-cli
# 雛形となる GitHub リポジトリを指定し、ブログアプリを構築する
$ gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
# yarn インストールも行われる
# 「gatsby new blog」と指定したので blog ディレクトリが生成されているので移動する
$ cd blog/
# yarn インストールが完了しているので、このままアプリを起動できる
$ npm run dev
ブラウザで http://localhost:8000/ を開くと、これでもうブログが出来上がっている。
src/ 配下に Markdown ファイルを置いていけば記事が追加できるし、デザインも変更可能だ。公開は生成された public/ ディレクトリを置けばよく、楽チン。
ただ、標準で色々な CSS が突っ込まれていて、コレが大変分かりにくい。TypeFace とかいうフォント提供するパッケージとかがあって、中々 React.js 初心者には難解。自分で既存のスタイルを全部取り除いてみたものの、初期設定がしんどい…。
そこでもう少し調べてみると、gatsby-starter-blog をベースに、スタイル定義を取り除いた gatsby-starter-blog-no-styles というモノがあったので、こっちで雛形を作り直すことにする。
$ gatsby new blog https://github.com/noahg/gatsby-starter-blog-no-styles
こっちの生成物の方がシンプル。ココから自分でアプリを作り込んでいく方がやりやすいだろう。