爆速ブログを作った
技術スタックはこんな感じ
今(2019/11)はScrapboxに勉強したこと、メモ、その他色々書いている たまに知り合いにメモとかのリンクを送ってる
せっかく沢山書いているので見てもらいたいが、アウトプットとして良い場所ではないと思った
理由はこんな感じ
というかそもそもそれ目的で作られてない。indexしてないってどっかで見た記憶
これも思想に反する
雑に書いてるものが多いので、推敲する気が起きづらい
そこで今のポートフォリオサイトにブログ機能を追加しようと思った
とはいえScrapboxの雑に書いていける感じは最高なので、雑にメモしたいこととかブログの下書きはこっちに書いていくつもり いいね機能 とかないほうが良いなと思った。いいね目的の記事は書きたくない
広告とかつけてマネタイズすることは考えてない
フロントは自分で作りたかった
色々技術的に遊べそう
ebiken.devドメインで配信したい
色々調べた中で良さそうなものを見つけた。こんな感じにしようかなと思っている
開発時に型が欲しいので
pluginが色々充実している
デプロイがとにかく楽
安い
つけたい
コードの syntax highlight done.icon
ダークモードdone.icon
RSS feed
lighthouse 100点 ほぼdone.icon
オフライン対応 done.icon
GitHub Actionsに移行 done.icon
手順メモ
npm i @babel/core gatsby gatsby-image gatsby-source-filesystem gatsby-plugin-typescript gatsby-plugin-preact
静的ファイルを置くフォルダをstaticに変更
gatsby-config.js, gatsby-browser.js, gatsby-node.jsを作成
gatsby上でmarkdownで書いたものを変換するためのプラグインをインストール npm i gatsby-transformer-remark gatsby-remark-images gatsby-remark-copy-linked-files gatsby-remark-prismjs gatsby-transformer-remark gatsby-remark-smartypants gatsby-transformer-sharp gatsby-plugin-sharp
src/templates/blog-post.tsxを作成
src/pages/notFound.tsx→src/pages/404.tsxに変更
諸々コンポーネントの置き場所、import path を変えた
gatsby-config.jsでfirebaseのinitializeをするように変更
/static以下に静的ファイルを配置
npm i react react-dom @types/react @types/react-dom prop-types
Graphqlクエリの型定義を自動生成するようにgatsby-plugin-graphql-codegenを入れた workboxからgatsby-plugin-offlineに書き換え gatsby-plugin-manifestでPWA対応 global のスタイルシートを設定
スタイルの調整
ページと画像を service worker でキャッシュしてoffline対応
型定義が間違ってたところを修正
リファクタリング
dayjsを使って投稿の時間をローカルのタイムゾーンに修正 lint
ダークモードのトグルコンポーネントは自分で作ったのに置き換えた
layout.tsxをgatsby-browser.js,gatsby-ssr.jsのwrapPageElementに追加
ヘッダーの作り直し