はじめに
このページでは、Adobe Dreamweaver を使って「Git(ギット)」を簡単に扱う方法を解説します。特に、以下のような方に向けてです。
- HTMLやCSSは触れるが、GitやGitHubはよく分からない
- ターミナルが苦手
- DreamweaverだけでGitのバージョン管理やGitHubとの連携をしたい
GitとGitHubの違いとは?
| 用語 | かんたんに言うと | 例えるなら | Dreamweaverでの役割 |
|---|---|---|---|
| Git | ファイルの変更履歴を管理する道具(ローカルで使える) | コードのタイムマシン | 履歴管理を行う/GUI閲覧 |
| GitHub | Gitのデータをインターネットで共有・保存できるサービス | クラウド上の倉庫(+SNS) | 公開・共有してチームや別端末で作業する/PushやPull |
🟦新規リポジトリの場合
- Dreamweaverが
.gitフォルダを作成し、そのフォルダ内で履歴管理が始まります - この時点からDreamweaverは、ファイルの変更をGitで自動的に追跡し始めます
- GitHubに接続しなくても、ローカルでのコミット(履歴記録)や履歴の確認、巻き戻しといった操作は可能です

.gitフォルダStep 1:DreamweaverでGitを有効化する
1-1. 事前準備
DreamweaverでGitを設定する場合、あらかじめGitをインストールする必要があります。
Gitのインストール方法については以下を参考にしてください
adobe公式:Dreamweaver で Git の使用を開始
Progate[プロゲート]
インストール完了後。。。
Dreamweaverでは、Git用のパネルが用意されています。自分のパソコンにGitクライアントがインストールされている場合のみ、表示できます。

自分のパソコンにGitをインストール完了したのち、次に進んでください。
1-2. GitをDreamweaverで有効にする
Dreamweaverではすでに新規サイトを設定している場合、新規リポジトリがグレーになり、ボタンをクリックできません。そのため、新規サイトを設定している場合でも、新たに新規サイトを作成してください。
新規リポジトリ
- [サイト] → [新規サイト] を選択
- ローカルサイトフォルダー(Gitで管理したいフォルダ・作業フォルダ)を選択・作成
- このサイトにGitリポジトリを関連付けるを選択
- Gitリポジトリとして初期化を選択
- 保存を選択


- サイト名・・・好きな名前。「サイトの管理1」で一覧に表示されます
- ローカルサイトフォルダー・・・ファイルをアップロードするフォルダ(作業フォルダ)
- 「このサイトにGitリポジトリを関連付ける」にチェックす
- 「Gitリポジトリとして初期化」にチェックを入れ、保存
これで完了!
- サイトの管理 ↩︎
