爆速ブログを作った
https://ebiken.dev/blog/my-new-blog
1年くらい前にポートフォリオサイトを作った
技術スタックはこんな感じ
preact
TypeScript
styled-components
workbox
webpack
デプロイ先はS3+CloudFront
今(2019/11)はScrapboxに勉強したこと、メモ、その他色々書いている
たまに知り合いにメモとかのリンクを送ってる
せっかく沢山書いているので見てもらいたいが、アウトプットとして良い場所ではないと思った
理由はこんな感じ
SEO弱い
というかそもそもそれ目的で作られてない。indexしてないってどっかで見た記憶
GoogleAnalytics使えない
これも思想に反する
雑に書いてるものが多いので、推敲する気が起きづらい
そこで今のポートフォリオサイトにブログ機能を追加しようと思った
とはいえScrapboxの雑に書いていける感じは最高なので、雑にメモしたいこととかブログの下書きはこっちに書いていくつもり
はてなブログ、Qiita、dev.to、medium、noteとか技術系のブログを書く場所はいっぱいあるが、自分はあんまり承認欲求が強いタイプではないと思っているのであんまり気が進まなかった
いいね機能 とかないほうが良いなと思った。いいね目的の記事は書きたくない
広告とかつけてマネタイズすることは考えてない
フロントは自分で作りたかった
色々技術的に遊べそう
ebiken.devドメインで配信したい
色々調べた中で良さそうなものを見つけた。こんな感じにしようかなと思っている
TypeScript
開発時に型が欲しいので
styled-components
gatsby
pluginが色々充実している
コンテンツ(ブログ)の表示をGraphQLでサーバーから取ってきてた
now
デプロイがとにかく楽
安い
CDNに配置されるので速い
つけたい
コードの syntax highlight done.icon
ダークモードdone.icon
RSS feed
lighthouse 100点 ほぼdone.icon
オフライン対応 done.icon
GitHub Actionsに移行 done.icon
手順メモ
gatsbyのビルドに必要なプラグインをインストール
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を作成
webpack周りの設定をgatsbyに置き換え
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以下に静的ファイルを配置
preactをReactに書き直した
https://www.gatsbyjs.org/packages/gatsby-plugin-preact/?=preact#usage-in-a-development-environment
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対応
gatsby-plugin-styled-componentsでstyled-components対応
global のスタイルシートを設定
スタイルの調整
color, font-size をCSS Variablesで管理
prismjsでsyntax highlightをつけた
@babel/proposal-optional-chainingとbabel-preset-gatsbyをいれてoptional chainingを有効にした
ページと画像を service worker でキャッシュしてoffline対応
型定義が間違ってたところを修正
リファクタリング
dayjsを使って投稿の時間をローカルのタイムゾーンに修正
lint
nowにデプロイ
Google Domainsで登録してるドメインを使用するように変更
styled-componentsをアップデートしcreateGlobalStyleAPIでglobal styleを定義
dark-mode-toggle を使ってダークモードのトグルを可能に
https://github.com/GoogleChromeLabs/dark-mode-toggle
ダークモードのトグルコンポーネントは自分で作ったのに置き換えた
layout.tsxをgatsby-browser.js,gatsby-ssr.jsのwrapPageElementに追加
ヘッダーの作り直し
https://github.com/ebkn/portfolio/pull/5