Download the Git client for your Operating System.
Read this article to know how to use Git to manage your files and source code in Dreamweaver.
Dreamweaver supports Git, an open source distributed version control system, to manage source code. With the integration of Git in Dreamweaver, you can independently work on your code from anywhere, and later merge your changes to a central Git repository. Git helps you track all the modifications in a file, and lets you revert to the previous versions as well.
Git repositories are also helpful when you work as a team, as Git allows you to easily create and maintain branches. For example, if you are a designer who wants to work on a design change for your site. At the same time, if another team member accommodates change requests for the same site, you both can work independently using Git. In this case, you both can independently create a branch and make your changes in your respective local repository. The local repository contains the full history of all the changes that you made to the source. You can pause and merge your changes with the central repository at any point in time. Merge ensures that the central repository always has the latest code with both your changes.
Read on to know how to get started with using Git in Dreamweaver.
If you are a new Git user, you must first download a Git client and create a Git account. A Git client is essential before you use Git from within Dreamweaver.
If you are a user who already has a Git account, sign in to your account. Ensure that you have downloaded the Git client to your system.
Perform the following steps to get started with Git in Dreamweaver:
It is recommended that you install the Git client with the default configuration settings. Dreamweaver then automatically picks the path to the executable.
You can now launch Dreamweaver and associate your site with a Git repository.
Dreamweaver supports Git operations through the Git panel (Windows > Git). As a Dreamweaver user, you can use this panel to perform common Git operations such as commit, push, pull, fetch.
You can view this panel in Dreamweaver only after you download the Git client in your computer.
A. Commit B. Fetch all remotes and refresh counters C. Git Pull D. Git Push E. Show repository history F. Show file history G. Create tag H. Open bash/terminal console I. More actions J. Search K. Diff L. Revert file
To start using Git in Dreamweaver, you must first associate your Dreamweaver site with a Git repository. A Git repository is like a folder that you create to help you track file changes. You can have any number of Git repositories on your computer. Each repository on your system is independent. That is, the changes saved in one Git repository do not affect the contents of another.
You can associate your website with a repository either by creating a repository or by cloning an existing repository. When you initialize or create a repository, an empty Git repository is created in your current working directory, with a .gitignore file in the folder.
However, when you clone an existing Git repository, all the files from your parent repository are cloned to your local system.
When you begin working with Git in Dreamweaver, the first step is to create a repository. When you initialize a Git repository for your site, you create a Git repository where you can add the files associated with your Dreamweaver site.
As a Dreamweaver user, you can start with a new site. Or, you can have an existing site that you want to associate with a Git repository. Either ways, follow this procedure to initialize a Git repository.
If you're creating a new site, specify a name for the site.
If you have a folder containing files related to your site, then point to the folder from the Local Site Folder field.
If you want to associate your new site with an existing Git repository, ensure that the Local Site Folder points to the appropriate Git repository.
Select the Associate a Git Repository with this Site check box. Then, select the Initialize as a Git Repository option.
Notice that the files from your local folder are now visible in the Files panel (Git View). The files are in an untracked state. That is, these files are not yet committed to your Git repository.
You can continue to work on your files and commit your files later. Else, you can open the Git panel (Windows > Git) and commit your files to your repository. To know how to commit files in Git, see Track and Commit changes.
If you're already working with an existing Git repository hosted on Github or Bitbucket or other popular hosting services, you can perform the following procedure to clone the repository from within Dreamweaver. When you clone an existing repository, you create a copy of the target repository in your local system.
Click Site > New Site.
From the Site Setup dialog box, select the Associate a Git Repository With This Site check box. Then, select Clone Existing Git Repository using URL.
Enter the URL of the repository that you want to clone.
Ensure that the https URL of the target repository you enter, is valid. To test whether the URL is valid, click the Test button in this dialog box. Invalid URL results in errors while cloning and while performing actions such as Git Fetch or Pull.
Cloning a URL using an SSH key with passphrase is currently not supported in Dreamweaver. The username and password fields are disabled.
To save the credentials that you have entered, select the Save Credentials check box. This action saves you from entering your credentials every time you perform remote actions such as Git Push or Pull.
After you clone a repository, a local copy of the origin repository is created. You can view and edit the local files from within Dreamweaver.
The snapshot of the original repository that is cloned is shown in the Git panel > Origin at the upper-right corner.
Now that you have associated your Dreamweaver site with a Git repository, you can view the files in Git from the Files panel (Git view). Git categorizes the files in your local repository as:
Using Git, you can track the modifications for the files. When you modify the files in your local system, the modified files appear in a different color in the Files panel. When you double-click and open the file in Code View, you can also see the gutter mark against the lines that have been modified. You can go ahead and commit your modified files in Git to synchronize the changes.
When you commit your files, Git allows you to enter log messages for each commit and review the changes using the diff feature. You can also view the version history for each file and for the entire repository.
Read on to learn how to track your edits within Dreamweaver, and commit your changes in Git.
In the Files panel in Dreamweaver, notice the Git icon that allows you to toggle between the FTP view and Git view. Click the Git icon to toggle Git view.
If you had initialized a Git repository, and did not commit your files, the files remain untracked. However, if you had committed your files after initializing your repository, Git recognizes those files.
If you had cloned all your files from another repository, the files are again recognized by Git.
When you modify a file and click Save, the Files panel displays the modified files in a different color. To view the exact changes in the Code View, double-click the modified file.
A guttermark indicates those lines where changes have been made. Guttermarks in green indicate new code that has been added. Guttermark in yellow indicates modified code, while guttermark in red indicates a code line that has been deleted.
When you click the yellow guttermark, the application displays the change in the code. The deleted line of code appears in red while the newly added code appears in green.
Notice an R symbol at the left corner of the deleted lines of code. To add the deleted code back to your file, click the R symbol.
Use the guttermarks to view the diff and review your changes before committing the changes to the Git repository.
When you open the Git panel, you can see a list of the modified files. You can click a file in this list and view the changes made to the file after the previous commit (diff). To view the diff for a file, do one of the following from the Git panel:
In the Git panel, select the file or files that you want to Commit.
Click (Commit icon).
When you click Commit, the system displays the Git Commit dialog box. This dialog box displays the files that have modifications.
You can click each file to view the changes, before you proceed to Commit the files.
To commit the files, enter a commit message in the message box, and click OK.
After the files are committed, the files are also cleared from the Git panel.
If you have already committed your changes and you want to revert to the previous version of a file, do the following:
In the Git panel, select the file or files that you want to revert.
Click the sandwich icon in the Git panel, and select Revert Changes Since Last Commit.
The previous version of the files is restored in your local repository. You can view the restored files from the Files panel.
If you want to revert a file after commit, you must have committed the file at least twice.
To revert changes before Commit, perform the following steps:
If you want to retain the last committed version of your file before committing the file:
The file that you selected is cleared from the modified files list, and the previous version of the file is restored.
You can create tags whenever you commit your changes in Git. You can use tags to mark important commits. For example, a check-in for a major change requested by your client. The tags act as a pointer to a specific commit.
To create a tag, click (Create Tag icon) in the Git panel.
From the Create Tag dialog box, specify a name for your tag. Click OK.
The tag that you created is associated with your commit.
If you create a tag after you perform a commit, the tag is automatically associated with your latest commit.
Every time you commit a file in Git, you can view the history of the file along with the details of the commit. This capability helps in identifying important commits, and tags associated with commits.
The system displays the Git File History of the selected file. You can also view the details of the commit for this file from the same dialog box.
Apart from viewing the history of a file in Git, you can also view the changes made at the repository level. You can view all the changes and commits made at the repository level. To view the repository history, perform the following steps:
From the Git panel, click the Show Repository History icon. The system displays the Git Repository History with the details of all the commits.
You can view the commit message, date, and time when the files were committed. You can also view the tags associated with a commit, and the details of the user who committed the files.
The repository history typically specifies the list of files that were committed at the repository level. You can click each file to view the change history at the file-level.
One of the most distinct features of Git is branches. Unlike most version control systems, a Git branch can be equated to an independent line of all your associated files or code. By default, your repository has one branch named “master”. The master branch is the main or definitive branch. You can create branches from master, and make edits in each of the branches.
You can also create a branch off another branch, where you are making a copy of the parent branch. You can independently work on both the branches in the same Git repository. For example, you can work on a new feature for your site on one branch while addressing some change requests in another branch.
Git also allows you to merge branches if you want to incorporate the changes from your current branch to a target branch. When you merge two branches, both the branches continue to exist independently. You can continue to work with the parent and the target branches.
In Dreamweaver, when developers and designers work together for a site, each user can create a branch off the master and make changes independently. Whenever required, they can easily merge their changes with another branch, and continue to work with both the branches.
To know more about creating and managing branches in Git, read the following sections:
From the Files panel, select the drop-down list that lists all the branches.
Click Manage Branches.
From the Manage Branches dialog box, click the + sign at the lower left corner.
In the Create New Branch dialog box, select the origin branch from which you want to make a copy.
If it is the first branch that you are creating, the origin branch is your master branch.
In the Branch Name field, specify a name for the new branch.
From the Files panel, select the drop-down list that lists all your branches.
Click Manage Branches. From the Manage Branches dialog box, select the branch that you want to merge.
Click (Merge Branch icon) at the bottom of the dialog box.
From the Merge Branch dialog box, select the Target branch. This branch is the target repository with which you want to merge your branch.
Optionally, specify a message associated with this merge.
Click OK to merge your branch with your target.
If file changes from one commit conflict with the changes from another branch, the merge process is paused. The system displays a conflict message along with the files that are causing the conflict.
The Git panel also displays the files that have a conflict. Notice the icon that indicates that there is a conflict.
To go ahead with the merge, you must first resolve the conflict. You can either use the Rebase option or proceed with the merge by using the no fast forward option.
If you encounter a merge conflict, choose one of the following options:
To know more about rebase in Git, see Git Rebasing.
Remote repositories in Git are versions of a project that are hosted in another network. You can access remote repositories by creating a connection with the repository. Depending on the access rights specified in the remote repository, you can either have a read-only access or write access to that repository.
When you work in a team, remote repositories help you push and pull data to and from other repositories. From the Dreamweaver Git panel, you can create a remote connection, perform several Git operations such as Fetch, Git Push, Git Pull, and Remote Refresh.
Read the following procedures to know how to create and manage remote repositories.
You can add a remote repository to share files, your work progress, and to access your project files hosted in another network. By adding a remote repository, you establish a remote connection with the target repository. Dreamweaver allows you to create remote repositories from the Git panel.
Before you add a remote repository, ensure that the other repository has public settings enabled.
From the Git panel, click Create Remote.
Specify a name for the remote repository.
Enter the URL and the credentials for the remote repository.
To ensure that you have entered a valid URL while adding a remote repository, click Test after entering the URL. When you click Test, the validity of the URL is tested.
This test is not applicable for validating the credentials.
If you do not enter a valid URL or credentials, you experience errors when you perform Git Pull, Git Push, Fetch and so on.
When you add a remote repository, you see the repository in the drop-down list at the top of the Git panel. You can also view more icons for performing Git Push, Git Pull, Fetch remote, and refresh counters.
After you add a remote repository and establish a connection, you can fetch and pull the files from the remote repository to your local repository. You can also push your files to the remote repository. However, you must first fetch files from the remote repository before you perform a Git Push action for the first time.
Remember to commit all your files in the local repository before you attempt to push your files. If your local repository has staged files, Git Push remains unsuccessful.
You can perform the following Git operations from within Dreamweaver:
Click to fetch all the files from all your remote connections. It is recommended that you perform a Git Fetch before you perform Git Push or Git Pull. This action only fetches the files from remote, and does not modify your local repository.
You can pull changes from a single repository or from a group of repositories. When you click the Git Pull icon, the system displays the Git Pull dialog box with various options.
From the Git panel, click (Git Pull icon) to pull the modified files from the remote repository and merge the changes with your local repository.
From the Git Pull dialog box, select the tracking branch. Specify whether you want to pull changes from the current branch or another branch, and then set the pull settings.
By default, the Default merge is selected. In this case, the files from remote are pulled into your local repository and the changes are merged to your local.
You can also choose one of the following options:
If you go ahead with the soft reset, your unrecognized files are deleted.
After you connect with remote repositories, when you modify and commit the modified files, Git records these changes. The Git Push icon in the Git panel immediately displays the number of files that have been modified. These files can now be pushed to the remote repository.
When you perform a Git Push, the commits that you made to the local repository are pushed to the remote repository.
To push your files from within Dreamweaver:
From the Git panel, click the Git Push icon.
The system displays the Git Push dialog box. You can either push your commits to the current tracking branch or to another branch that you specify.
You can also set the push settings from this dialog box. By default, the Default Push option is selected.
You can also select the following options:
Optionally select the Send Tags check box to push your tags to the remote repository.
If there are conflicts between your local commits and the commits made to the remote repository, it is recommended that you first resolve the conflicts. You can then push your changes.
To do so, you must first Pull the changes from the remote repository, resolve the conflicts, and then push the files without any conflicts.
The Search bar in the Git panel allows you to search for files using the filename. This capability is especially useful when you have large number of files associated with your site.
To search for a file, simply type the filename in the Search bar. The file or files containing your search query is displayed immediately.
When you do not want Git to act on a file, you can add the file to .gitignore. Git then ignores the files in this folder whenever you perform any action including commit, push, and pull. You must commit the .gitignore file to your repository so that any other user cloning your repository is also aware of the files in the .gitignore folder.
To add files to .gitignore, go to the Files panel in Dreamweaver. Select and right-click the file that you want Git to ignore, and select Git > Add to .gitignore.
At any point in time, if you want to remove a file from .gitignore, select the file from the Files panel. Right-click and select Git > Remove from .gitignore.
Ensure that you commit the .gitignore file to the local and remote repositories after modifying this file.
In the previous sections in this article, you learnt how to use the Git panel (UI) to perform tasks like associating a Git repository to your site, creating and managing remote connections, pushing files to a repository, or pulling files from a repository. You can also perform these actions and more using git commands.
To perform any Git operation using the terminal, do one of the following:
To view the common git commands, see the Git Cheat Sheet.
Some actions like git stash and combining commits after push are currently possible only from the command line.
When you perform certain actions such as initializing a Git repository from the command line, these actions are also reflected in the Dreamweaver interface.
However, you can also modify files using command line when the Dreamweaver application is closed. In this case, you see the following message when you launch Dreamweaver the next time:
Git preferences in Dreamweaver allow you to define some settings for using Git in Dreamweaver. You can use the Preferences dialog box to set Git preferences like path to the terminal, timeout settings, and so on.
Select Edit > Preferences.
From the Preferences dialog box, select Git.
From the Git Preferences dialog box, set the following:
Click Apply to save your settings.
Restart Dreamweaver for your updated preferences to take effect.