Gridsomeでよくあるかっこいいオンラインドキュメントを作る

## Gridsomeとは
[Jamstack](https://jamstack.org/)フレームワークの[Gridsome](https://gridsome.org/)はあらゆるデータをGraphQLでアクセスできるSSG (Static Site Generator) です。静的ファイルを生成するので、Amazon S3やGoogle Cloud Strageなどのクラウドストレージに置くだけで高速でリッチなWebページを公開することができます。もちろんCDNでの配信もOKです。
> 参考：Qiita - [Jamstackって何なの？何がいいの？](https://qiita.com/ozaki25/items/4075d03278d1fb51cc37)

## スターターテンプレートがいろいろ選べる
Gridsomeの公式サイトではプラットフォームごとに多数の[スターターテンプレート](https://gridsome.org/starters/)が提供されています。
その中から今回はMarkdownを使ってコンテンツを作成できる[Jamdocs](https://gridsome.org/starters/jamdocs/)というテンプレートを使っていきたいと思います。

## 開発環境をインストールする
まずはGridsomeのCLIをインストールします。筆者はyarnを使っていますがnpmでも大丈夫です。既にGridsome CLIがインストールされている場合はこの工程はスキップしてください。

```bash
$ yarn global add @gridsome/cli
```
次にJamdocsのガイドに従ってコマンドを実行します。

```bash
$ git clone https://github.com/samuelhorn/jamdocs my-cool-guide
$ cd my-cool-guide
$ yarn
$ gridsome develop
```
Gridsomeのdevelopモードが起動したら、ブラウザーで http://localhost:8080/ へアクセスしてみましょう。

↓Jamdocsが表示されました！（スクリーンショットが映えるようにダークモードにしています）
![スクリーンショット_2021-10-20_9.44.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/77f2acb4-9cd1-e819-98db-16f123e6e50b.png)
ちなみにJamdocsのディレクトリ構造は以下のようになっています。
![スクリーンショット_2021-10-20_18.08.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/131d3e42-c5ae-b9c6-2cbb-ad0855b1fc61.png)
## メニューを変更してみる
メニュー構成は data/settings.json で定義されています。実際のメニューとjsonの内容を並べてみました。メニューの大・中項目が定義されていて、ドキュメントファイルとはslugをキーに関連付けられています。
![スクリーンショット_2021-10-20_11_08_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/39c26ab4-ebe3-64e9-ff8f-fe4342e388b2.png)
data/settings.json を少し書き換えてみます。
![スクリーンショット_2021-10-20_11.13.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/ea62639a-25fd-e6a4-21f9-0eb6a4e8d3d3.png)
ファイルを保存してgridsomeを再起動すると、変更した内容が反映されました。
![スクリーンショット_2021-10-20_11.15.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/ae388179-0308-1af6-58c5-db1998c501e6.png)
## コンテンツを変更してみる
メニュー項目とドキュメントの関連性は以下のようになっています。Markdownの見出し2（＃＃）で記載された箇所がメニュータイトルとなります。

![スクリーンショット_2021-10-20_11_17_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/ec4a872a-a3f5-4bc3-8760-f44e4bfcde49.png)
Markdownファイルの先頭ではページのタイトルやスラグを定義することができます。
![スクリーンショット_2021-10-20_11.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/87a9c5a8-83e1-c796-0264-dfe15c48d1a9.png)
では早速、docs/getting-started.md を改変してみましょう。ドキュメントファイルを修正した際はGridsomeが自動的にビルドしてブラウザーをリロードしてくれます。
![スクリーンショット_2021-10-20_11.27.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/97bc0d42-a734-2ef6-6946-9e5395b0f2c1.png)
ワードの選定が機械翻訳っぽくなってしまいましたが、とりあえず意図したとおりにガイドが更新されました。
![スクリーンショット_2021-10-20_11.27.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/904d1219-cf20-47a7-df56-3ef94f3f4a0c.png)
ドキュメントはMarkdownで記述されているのでコードも記入できます。その際にGitHubのように言語を指定することもできます。
![スクリーンショット_2021-10-20_11.59.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/0c80b233-0e29-a643-67ad-70bd72fbb0e5.png)
bashとjavascriptでそれぞれ配色が施されました。
![スクリーンショット_2021-10-20_11.59.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2221418/5018f8aa-dca8-c18d-639a-c118c1526b15.png)
## まとめ
Gridsomeを使ったJamdocsを使えばかっこいいガイドページを簡単に作ることができそうです。Markdownでドキュメントが作れるので、GitHubのReadmeを移植するのも簡単です。

GridsomeはヘッドレスCMSなど様々なプラットフォームに対応していますので、企業のWebサイトやポートフォリオなどで活用してみてはいかがでしょうか。

以上