Code Monkey home page Code Monkey logo

kuroite's Introduction

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 フロントエンドの技術を中心に発信する技術ブログ。

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 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

GitHub license

脚注

Footnotes

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

kuroite's People

Contributors

kuro-kuroite avatar renovate-bot avatar semantic-release-bot avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.