Gridsomeとは
JamstackフレームワークのGridsomeはあらゆるデータをGraphQLでアクセスできるSSG (Static Site Generator) です。静的ファイルを生成するので、Amazon S3やGoogle Cloud Strageなどのクラウドストレージに置くだけで高速でリッチなWebページを公開することができます。もちろんCDNでの配信もOKです。
参考：Qiita - Jamstackって何なの？何がいいの？
スターターテンプレートがいろいろ選べる
Gridsomeの公式サイトではプラットフォームごとに多数のスターターテンプレートが提供されています。
その中から今回はMarkdownを使ってコンテンツを作成できるJamdocsというテンプレートを使っていきたいと思います。
開発環境をインストールする
まずはGridsomeのCLIをインストールします。筆者はyarnを使っていますがnpmでも大丈夫です。既にGridsome CLIがインストールされている場合はこの工程はスキップしてください。
$ yarn global add @gridsome/cli
次にJamdocsのガイドに従ってコマンドを実行します。
$ git clone https://github.com/samuelhorn/jamdocs my-cool-guide
$ cd my-cool-guide
$ yarn
$ gridsome develop
Gridsomeのdevelopモードが起動したら、ブラウザーで http://localhost:8080/ へアクセスしてみましょう。
↓Jamdocsが表示されました！（スクリーンショットが映えるようにダークモードにしています）
ちなみにJamdocsのディレクトリ構造は以下のようになっています。
メニューを変更してみる
メニュー構成は data/settings.json で定義されています。実際のメニューとjsonの内容を並べてみました。メニューの大・中項目が定義されていて、ドキュメントファイルとはslugをキーに関連付けられています。
data/settings.json を少し書き換えてみます。
ファイルを保存してgridsomeを再起動すると、変更した内容が反映されました。
コンテンツを変更してみる
メニュー項目とドキュメントの関連性は以下のようになっています。Markdownの見出し2（＃＃）で記載された箇所がメニュータイトルとなります。
Markdownファイルの先頭ではページのタイトルやスラグを定義することができます。
では早速、docs/getting-started.md を改変してみましょう。ドキュメントファイルを修正した際はGridsomeが自動的にビルドしてブラウザーをリロードしてくれます。
ワードの選定が機械翻訳っぽくなってしまいましたが、とりあえず意図したとおりにガイドが更新されました。
ドキュメントはMarkdownで記述されているのでコードも記入できます。その際にGitHubのように言語を指定することもできます。
bashとjavascriptでそれぞれ配色が施されました。
まとめ
Gridsomeを使ったJamdocsを使えばかっこいいガイドページを簡単に作ることができそうです。Markdownでドキュメントが作れるので、GitHubのReadmeを移植するのも簡単です。
GridsomeはヘッドレスCMSなど様々なプラットフォームに対応していますので、企業のWebサイトやポートフォリオなどで活用してみてはいかがでしょうか。
以上