Blog
概要
モダンな Web フロントエンドの技術を中心に発信する技術ブログ。
記事ページのデモ画像
環境
機能一覧
以下の技術を使い、このブログを構成している。
- 静的サイトジェネレーター for Jamstack (Gatsby.js)
- モバイルファースト
- ダークモード対応
- 目次リンク
- Twitter、Hatena Bookmark 共有リンク
- プログレスバー
- 「ラベルの翻訳 1」の英語対応
- コードブロック
- ラベル表示(ファイル名)
- シンタックスハイライト
- コンポーネントのアクセシビリティテスト
- RSS 対応
- PWA 対応
- ページ
- 記事ページ
- 記事一覧ページ
- タグの条件付き記事一覧ページ
- 自己紹介ページ
ブログ構成に必要な機能
- プライバシーポリシー
- robots.txt
- canonical
- meta tag
- Google Analytics
aside: 注意点
本ブログは、Internet Explorer に「非」対応である。 これは、開発元の Microsoft が今後機能追加をせずサポートを打ち切るため(Microsoft 365 アプリの IE11 サポート終了)。 そして、サイズを小さくしブログの読み込み時間を短くするためである。
技術一覧
詳細は、技術選定.md で紹介。
開発者向け
事前要件
インストール
develop
# pre
cd path/to/blog
git clone https://github.com/kuro-kuroite/kuroite.git
# plan A: if you use VSCode, and `ms-vscode-remote.remote-containers` extension
code path/to/blog/kuroite
mv .env.local.example .env.local
vim .env.local # for Docker
## open `Docker.app` or Docker something in Spotlight(Command + Space > `Docker.app`)
## run `Remote-Containers: Reopen in Container` in Command Palette(Command + Shift + P)
## open Terminal in VSCode(Control + `)
### click `Install` to install extensions from right bottom popup of `Do you want to install the recommended extensions for docker-compose.yml?`
# plan B: otherwise
cd path/to/blog/kuroite
mv .env.local.example .env.local
vim .env.local # for Docker
docker-compose build --no-cache # only first time
docker-compose up -d
docker-compose exec web zsh
zsh ./config/docker/devcontainer/post-create-command.sh
## if you use VSCode
### click `Install` to install extensions from right bottom popup of `Do you want to install the recommended extensions for this repository?`
mv .env.development.example .env.development
vim .env.development # for `npm run develop`
mv .env.production.example .env.production
vim .env.production # for `npm run build && npm run serve`
# `develop`
pwd # /code
npx gatsby develop -H=$HOST # or `npm run develop`
# open http://localhost:8000 in browser
# post
# plan A
## click `Dev Container: React` > `Close Remote Connection` from left bottom green button
# plan B
exit
docker-compose down # or `docker-compose down --volumes`
# click `Quit Docker Desktop` or Docker something
deploy
# pre
git branch feature/something
git switch feature/something
npx gatsby build # or `npm run build`
npx gatsby serve -H=$HOST # or `npm run serve`
# check http://localhost:9000 in browser
# `git add` and `git commit`
git push origin feature/something
# make Pull Request for main in https://github.com/kuro-kuroite/kuroite/compare
# `deploy`
# main に merge すると、CI(build) が build し、Netlify に deploy する