チュートリアルが終わったので,VuePressから乗り換えるべくいい感じのStarter(テンプレート)がないか試していきたいと思います。
条件としては,マークダウンで記事を書けること。
ただ,それだけ。
Gatsbyはマークダウン以外にもヘッドレスCMSやWordPressのデータを取得して使用できます。
WordPressでブログ書いてたことがほんの少しだけあったんですけど,エディタで書きたくなるんですよね。
ってなるとやっぱりマークダウンが早いし楽です。

StarterはこちらのStarterライブラリから導入方法とかデモサイトを見ることができます。

gatsby-starter-blog

公式のStarterです。
安心の公式。とりあえず一番スター数も多いしまずはこれを試してみるのがいいでしょう。

特徴としては,ブログとしての基本的な機能,RSS,GoogleAnalytics,画像最適化,コード構文強調etc 必要十分な機能が盛り込まれています。

• フル機能のブログの基本設定
• RSSフィードのサポート
• GoogleAnalyticsのサポート
• マークダウン投稿の画像の自動最適化
• コード構文の強調表示のサポート
• 簡単で美しいタイポグラフィ用のプラグインが含まれています
• サイトのメタタグを編集できるようにするReactヘルメットが含まれています
• すぐに使えるオフラインサポート用のプラグインが含まれています

(公式ページ参照)

早速,プロジェクトを作成していきます。

$ gatsby new test-gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

インストールが完了したら,開発サーバーを起動してローカルでアクセスしてみます。

$ cd test-gatsby-starter-blog
$ gatsby develop

localhost:8000にアクセスします。
まんま,デモサイトが構築されてますね。
Hello Worldのページを見るとマークダウンの記法とプレビューのような記事になっています。

ブログ記事はcontent/blog配下にフォルダーを作成して配置するようです。

フォルダ名がスラッグ(パス)になるみたいですね。

と,思ったけどマークダウンファイルがindex.mdの場合のみフォルダ名がスラッグになって, マークダウンにindex.md以外の名前がついてるとマークダウンの名前もスラッグになるみたいです。
↓画像はcontent/blog/hello-world/test/test.mdの場合

スタイルはsrc配下のstyle.cssにすべて書かれてるっぽい。
コンポーネント単位じゃないんですねー。意外です。
Reactのプロジェクトは基本的にコンポーネント単位で構成するのがベストプラクティスかと思ってました。
ケースバイケースですかね。

感想

やりたいことはできそうな感じですね。
まだ,隅々まで見れてはいないですけどそれは使いながらおいおいでも良さそうです。
もう1,2つくらい試してみてしっくり来るものがなければ公式を使ってカスタマイズしていくのが良いかなと思います。

それではまた明日。

GatsbyStarterを試してみる 記事一覧

• GatsbyStarterを試してみる①
• GatsbyStarterを試してみる②
• GatsbyStarterを試してみる③
• GatsbyStarterを試してみる④