Skip to content

kuro-kuroite/kuroite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

65 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Blog

Build Status

GitHub License GitHub release (latest SemVer) Coverage Status dependency Status devDependency Status GitHub top language Renovate enabled semantic-release

Storybook tested with jest tested with Cypress

Conventional Commits Commitizen friendly code style prettier

概要

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

blog

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

lighthouse 結果画像(https://blog.kuroite.dev/blog/how-to-back-up-your-data-fast-ignoring-extraneous-files/)

記事ページのデモ画像

blog post page in mobile(モバイル版) blog post page in pc(pc 版)

環境

機能一覧

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

  • 静的サイトジェネレーター for Jamstack (Gatsby.js)
  • モバイルファースト
  • ダークモード対応
  • 目次リンク
  • Twitter、Hatena Bookmark 共有リンク
  • プログレスバー
  • 「ラベルの翻訳 1」の英語対応
  • コードブロック
    • ラベル表示(ファイル名)
    • シンタックスハイライト
  • コンポーネントのアクセシビリティテスト
  • RSS 対応
  • PWA 対応
  • ページ
    • 記事ページ
    • 記事一覧ページ
    • タグの条件付き記事一覧ページ
    • 自己紹介ページ

ブログ構成に必要な機能

  • プライバシーポリシー
  • robots.txt
  • canonical
  • meta tag
  • Google Analytics

aside: 注意点

本ブログは、Internet Explorer に「」対応である。 これは、開発元の Microsoft が今後機能追加をせずサポートを打ち切るため(Microsoft 365 アプリの IE11 サポート終了)。 そして、サイズを小さくしブログの読み込み時間を短くするためである。

技術一覧

TypeScript icon React icon ESLint icon Prettier icon Redux Toolkit icon Jest icon Storybook icon Cypress icon Gatsby.js icon PostCSS icon Autoprefixer icon stylelint icon Tailwind CSS icon CSS Modules icon commitlint icon textlint icon

GitHub Actions icon Docker icon Renovate icon semantic release icon Netlify icon

詳細は、技術選定.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 https://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 https://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

GitHub license

脚注

Footnotes

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