面白いのあるよと教えていただいいた「Gatsby」というものを使ってみました。

ギャッツビーって頭につけるアレしか思いつかないですが。

Transform plain text into dynamic blogs and websites using the latest web technologies. A React.js static site generator.

Supports Markdown, HTML, and React.js pages out of the box. Easy to add support for additional files types.

GitHubのReadmeの冒頭でこのように書かれている通り、Reactで動いてる静的サイトジェネレーターです。マークダウンで記事を書いてビルドするというのは他の静的サイトジェネレーターと一緒です。

触ってみた感じ、差分更新をしているせいかページ遷移がめちゃ早いです。

サンプルサイトで体感してみてください。

gatsby-starter-default

導入

基本的にはReadmeの「Getting started」で書かれている通り進めればできます。

インストール

npm install -g gatsby

プロジェクト作成

gatsby new my-test-gatsby-site

ここがけっこう時間かかります…。

プロジェクトフォルダへ移動

cd my-test-gatsby-site

ローカルサーバー立ち上げ

gatsby develop

コマンドを打ちlocalhost:8000を開くとページが表示されます。

localhost:8000

Hot Loadが入ってるので変更すると自動で更新がかかります。

チュートリアル

GitHubのReadmeにはチュートリアルも書かれています。

Gatsbyはもうインストールしている前提で以下のコマンドを打ち、サンプルテーマをインストールします。

インストール

gatsby new docs-site gh:gatsbyjs/gatsby-starter-documentation

移動

cd docs-site

ローカルサーバ立ち上げ

gatsby develop

ページを開く

localhost:8000

config.tomlを編集してみる

インストールしたファイル一式の中に「config.toml」があると思うのでこの中の「siteTitle」を書き換えてみます。

siteTitle="テストサイト"
baseColor = "#884499"
linkPrefix = "/gatsby-starter-documentation"
docPages = [
  "/docs/",
  "/docs/getting-started/",
  "/docs/how-to-run/",
  "/docs/some-react-code/",
  "/docs/the-next-step/",
  "/docs/conclusion/",
]

すると、ページタイトルが変更されます。このconfig.tomlはサイトの設定ファイルのようなものです。

マークダウンファイルの修正

以下の階層にある「index.md」を適当に書き換えてみます。

「/pages/docs/getting-started/index.md」

getting-startedページを開くと内容が書き換わってると思います。

ページの追加

docディレクトリ内の「getting-started」を同じdocディクレクトリ内にコピペして名前を「some-additional-steps」にします。

そして中の「index.md」のタイトルを「some-additional-steps」に書き換えます。他にも適当に内容を変更してみましょう。

Ideally this new file would be hot reloaded like other changes but I haven’t figured out how to make this happen yet (help appreciated here).

英文なのでよく分からないですが、おそらく追加したらHot reloadで自動反映したいけどまだできてません的な感じかなと思います。

なので追加したファイルを反映するには一旦「Cntl + C」で終了したあとに再び以下コマンドで立ち上げます。

gatsby develop

するとページが追加され、「config.toml」ファイル内にも「”/docs/ome-additional-steps/”」が追加されていると思います。

ビルドする

ビルドするときは以下のコマンドを打ちます。

gatsby build

コマンドを打つと「/public」ディレクトリができます。

gatsby serve-build

このコマンドを打つとpublicディレクトリ内をローカルサーバで立ち上げることができます。

スターターテーマ

スターターテーマが5つ用意されてます。

• Kitchen sink default starter
• Simple blog
• Simple documentation site
• Lumen
• DrunkenBlog

DrunkenBlogを使いたい場合は以下のコマンドを打つとインストールされます。

gatsby new gatsby-blog

情報求む！

さいごになりますが、情報がまだドキュメント程度しかないです。オリジナルの使い方とかあったら教えてほしいです。

特徴としてページ遷移はめちゃ早いですが、ビルドとかは遅め。個人的にHugoを使ってますが乗り換えまではしないかなー（笑）。面白そうだから触ってみるぐらいになりそう。

このあたりもっと読み込みたい。

How Gatsby works