Kimuson.dev

Gatsby.jsで, 構築した技術ブログです.

kimuson.dev にデプロイされています

開発サーバーを建てる

$ yarn dev

記事を書くときも, ブログ自体を更新すろときもこちらの開発サーバーを使う

記事を書き始める

Frontmatter

(work, about はまた別だが)ブログ記事のマークダウンファイルでは, 以下の形式をサポートする

---
title: マークダウンチートシート
description: マークダウンのチートシートです。
category: Blog
tags:
  - Markdown
  - Blog
date: "2015-05-28T22:40:32.169Z"
thumbnail: "thumbnails/blog.png"
draft: true
---

このブログでは, マークダウンで記事を書くことができます.

category: ディレクトリ構造と同期する
draft: 記事の公開/非公開 (開発環境では, 非公開ラベル付きで表示されるが本番環境では表示されない)

サムネイル画像については,

frontmatter	ファイルのパス
thumbails/*.png	content/assets/thumbails/*.png
/blog/article-name/*.png	content/blog/article-name/*.png

のように, サムネ用フォルダに置く場合と, 記事のディレクトリに置く場合の 2 種類がある.

一般にサムネ画像を準備するのはめんどうなので, カテゴリ毎に用意したサムネ画像を thumbnails から引っ張ってくる.

記事特有のサムネイル画像を適用する場合には, 後者の方法を使う

記事ファイルを生成する

記事ファイルの Frontmatter を毎回書くのは大変なのでスクリプトを用意してある

$ yarn post:new
yarn run v1.22.4
$ git rev-parse --show-toplevel && ./bin/create.sh
/path/to/blog-name
記事タイトルを入力してください >> テスト記事
ファイル名を入力してください >> test.md
カテゴリを入力してください
既存のカテゴリは以下です

tutorial        Django          Gatsby

カテゴリ名 >> tutorial
content/blog/tutorial/test.mdに記事ファイルを作成しました
✨  Done in 10.85s.

GraphQL スキーマに応じて TypeScript 型定義ファイルを生成する

GraphQL スキーマに変更があるたびに, 以下のコマンドで型定義ファイルを生成します.

$ yarn codegen

生成先: types/graphql-types.d.ts

【非推奨】`onSave` で型定義ファイルを自動生成する

ホットリロードが重くなって, 型定義をわざわざ作り直す必要がないタイミングでの DX がとても落ちるのでおすすめはしないけど,

$ yarn dev:codegen

で開発サーバーを立てれば, 型定義ファイルも自動生成できる

gunners6518 / kimuson.dev