React.js製の静的サイトジェネレーターGatsbyを使ってみた
面白いのあるよと教えていただいいた「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