Blog

概要

モダンな Web フロントエンドの技術を中心に発信する技術ブログ。

blog

(Archived https://blog.kuroite.dev)

記事ページのデモ画像

(モバイル版) (pc 版)

環境

機能一覧

以下の技術を使い、このブログを構成している。

• 静的サイトジェネレーター for Jamstack (Gatsby.js)
• モバイルファースト
• ダークモード対応
• 目次リンク
• Twitter、Hatena Bookmark 共有リンク
• プログレスバー
• 「ラベルの翻訳 ¹」の英語対応
• コードブロック
  • ラベル表示（ファイル名）
  • シンタックスハイライト
• コンポーネントのアクセシビリティテスト
• 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 する

License

脚注

Footnotes

1. Kaizen Ad における SPA での i18n への取り組みと手法について - Kaizen Platform 開発者ブログ ↩