Gatsby + Github Pages でブログをつくるぞ
動機
- 普段Google Keepですべてのメモを取っていたが、しっかりしたことを書きづらいのと共有しづらい
- Medium, Noteを試してみたが文章整形が貧弱すぎてつらい
- Evernoteでもよかったが、できればWYSIWYGを避けたい、Markdownを使いたい、デザイン調整に自由度がほしい
- ちょうどGatsbyを勉強したいタイミングだったこともあり、ほぼメモ用途のブログを作ることにした
参考
- Gatsby + GitHub Pages でポートフォリオページを無料でシュッと作る - Qiita https://qiita.com/mishiwata1015/items/ac65efbabb4400fd95bf
- Gatsby + Markdownでブログを作り直しました https://diff001a.netlify.app/gatsby-blog-with-markdown/
かえたところ
deploy設定
-
npm run deploy で GitHub Pages にお手軽デプロイ - Qiita https://qiita.com/star__hoshi/items/490959aee12dbf528f7c
を参考にgh-pagesを導入- あわせてgithubのほうで「Setting -> Pages -> Source」をgh-pagesに変更
ドラフトの実装
- Frontmatterに
draftを追加 gatsby-node.jsにあるスキーマにdraft: Booleanを追加src/pages/index.js,templates/blog-post.jsに表示分岐を追加
タグの追加
- Frontmatterに
tagsを追加 gatsby-node.jsのスキーマにtags: [String]を追記-
色々わからなかったので
diff001a/diff001a-gatsby-blog: my gatsby blog https://github.com/diff001a/diff001a-gatsby-blog
を参考にgatsby-node.jsをいじったりtemplates/tag-page.jsをつくったり- 雰囲気だけで実装したのであらためて仕組みをじっくり把握する必要がある
更新日の追加
- Frontmatterに
modified_atを追加 gatsby-node.jsのスキーマにmodified_at: Date @dateformatを追記
Emotionおよびtwin.macroの導入
- Emotion | Gatsby https://www.gatsbyjs.com/docs/how-to/styling/emotion/
- GatsbyにTailwind CSSを導入する最短手順(CSS-in-JS) - Qiita https://qiita.com/suin/items/7281351779b5206e17b3
を参考にいれた（styled-componentとbabelMacros設定は取り急ぎ自分では使わないので抜いた）
import tw, { css } from 'twin.macro';
const hoge = () => (
<>
<div css={tw`m-0`}>...</div>
<div css={hogeStyles}>...</div>
</>
);
const hogeStyles = css`
margin: 0;
`;のようにして使ってる
今後適宜やりたいこと
そもそも継続して書くのかという話はあるが
- カテゴリなりタグなり
- パーマリンクの仕様策定（
YYYY-MM-DD_slugの形がいい気がする） - 検索ボックス（これはきつそう）
- TypeScript導入
-
リデザイン
- emotion導入
- tailwind（twin.macro)導入
- デフォルトスタイルのいけてないところを直す（簡易的に対応）
- 適当にクリーンなテーマを考えてあてる
-
Markdown周りの改善（外部リンク用のUIとかほしい）