コード管理用サイト

CORDING
DESIGN
VisitSite

このサイトについて

Web制作をしていて「このコード前にも使ったな」ということがよくあって、そのたびに調べたり、前のプロジェクトを開いてコードを持ってくることがとても面倒だと感じ、まとめられているサイトが欲しいと思ったのがきっかけで作成しました。

技術面で取り組んだこと

Astro.js、Github Actions、WP-REST APIなど

サーバーにアップロードするまでの流れ

  1. WordPressから記事の作成、削除、変更を行った後に自作した専用のボタンをクリックする。
  2. Webhookを通してGithub側に通知を送る。
  3. GithubActionsにより、buildが実行されAstro.jsプロジェクトの静的ファイルが生成される。
  4. Xserverにファイルのアップロード、上書き、削除がされ、本番公開される。

技術スタック

フロントエンド

  • Astro.js
  • Alpine.js
  • Tailwind.css

バックエンド

  • WordPress

サーバー

  • Xserver

作業環境

  • Vite
  • mamp
  • Github Actions