[Portfolio] GitHubと自サイトの連携

GitHubと自サイトを連携し、Gitによるソースコード管理から公開サーバーへの反映までを行える開発フローを構築しました。

GitクライアントにはSourceTreeを使用し、作業内容に応じてブランチを分けながら開発できる構成にしています。

個人での制作だけでなく、複数人で同じWebサイトを管理する場合も想定し、作業・確認・公開の段階を分けた運用にしています。

主な機能・特徴

• GitHubを利用したWebサイトのソースコード管理
• SourceTreeを使用したGit操作
• feature・develop・mainによるブランチ管理
• 作業内容ごとにfeatureブランチを作成
• developブランチで公開前の内容をまとめて管理
• mainブランチへのPRマージ後に公開サーバーへ反映

活用例

• Webサイトのバージョン管理
• 複数人でのWebサイト制作
• 機能追加・修正ごとの作業管理
• 公開前の変更内容確認
• GitHubを利用した公開フローの構築
• 継続的なWebサイト更新・保守運用

変更内容をGit上で管理することで、直接公開サーバーのファイルを編集するのではなく、作業内容を確認しながら段階的に公開できる構成にしています。

実装の仕組み

作業・確認・公開の役割ごとにブランチを分け、それぞれの段階を経て公開サーバーへ反映する流れにしています。

ブランチは以下の役割で運用しています。

今回は公開サーバーとの連携を中心に構築しているため、独立したテスト環境の構築は省略しています。

工夫・改善した点

• 直接mainブランチで作業せず、作業用のfeatureブランチを分ける構成にしました。
• developブランチを設け、複数の変更をまとめて確認できるようにしました。
• mainブランチを公開用として分離し、作業中のコードがそのまま公開されない構成にしました。
• PRを利用して変更内容を確認してから公開できる流れにしています。
• SourceTreeを利用し、Gitの操作状況を画面上でも確認しやすい運用にしました。

GitHubを単なるソースコードの保存場所として利用するだけでなく、Webサイト制作・更新時の作業フローそのものを整理することを目的として構築しています。

使用技術