Using Git with DreamPress

Overview

This article explains how to automatically sync website changes on your home computer to your DreamPress website using Git. This is accomplished by creating a Git repository both locally (on your computer) and on your web server, updating a child theme on your home computer, and then copying those changes to your website.

The following topics are covered:

Logging into your server
Configuring your server Git repository
Configuring your local Git repository
Connecting your repositories

Background of Git

Git is software that creates snapshots of changes to your website's code. This makes it easy to restore a previous version if an update causes an error. It also allows you to test new changes without affecting your live website.

How should Git be used?

Git should only be used to manage your customizations or your own theme and plugin development. The most common use case for using Git is creating a child theme, which allows you to make changes to a theme without having your changes overwritten when the theme is updated.

Git should not be used as a WordPress backup tool because WordPress auto-updates will overwrite any changes you've made to the core files.

Can I use FTP to update my site?

Yes, but FTP only allows you to log into your website and update your website files. It does not track your changes and does not store historical versions of your code. This means you cannot view previous updates, revert to an earlier version if a change causes an error, or sync changes from your home computer to your server.

Make sure you've configured the following before proceeding with the steps in this article.

Install DreamPress

You must have a working DreamPress site up and running.

Create a child theme

Use this article to create a basic child theme.

Install Git onto your computer

Git must be installed on your computer so you can run the git commands. See this article for instructions on installing Git for Windows and macOS.

Logging into your server

These steps configure SSH so you can log into your server without using a password.

Step 1 — Create a Shell user

Before proceeding, make sure you have Created a Shell user and are able to log into your server via SSH. Make a note of your shell username, password, and host (server name). They will look something like this:

Shell username: wp_abc123
Host: wp_123456.dreamhostps.com

Step 2 — Choose a terminal application

SSH commands are run within a terminal application. Choose one you would like to use with your operating system.

Windows: You can use the Windows Shell or a third-party program like PuTTY.
Mac OS and Linux: Both include a terminal, but third-party options are also available. For example, iTerm2 is very popular with Mac.

Step 3 — Set up an SSH key on your computer

SSH Keys allow you to automatically connect to your DreamPress server and enable Git commands to work remotely. The following articles provide instructions on setting this up.

Step 4 — Log into your server

Open your terminal and log into your server using SSH. The following example uses a shell user named wp_abc123 and server (host) name wp_123456.dreamhostps.com:

[local]$ ssh wp_abc123@wp_123456.dreamhostps.com

Verify and save the server information

The first time you log in, you must accept your server as a valid host. This saves the server information on your computer within the known_hosts file. See this article for information on how to verify the server identity before saving.

Configuring your server Git repository

These steps configure a Git repository on your DreamHost server.

Step 1 — Set up your server Git repo

These steps create a Git directory and an empty repository in your user's home directory on the server.

Log into your server via SSH.
Run the following commands to create your Git identity using your name and email address.
```
[server]$ git config --global user.name "John Doe"
[server]$ git config --global user.email johndoe@example.com
[server]$ git config --global init.defaultBranch main
```
The last line ensures newly created repositories use the name main as the primary branch.
Make sure you're in your user's directory:
```
[server]$ cd ~
```
Create the Git directory. You can name it anything you like. In this example, two directories are created, /git and /projectname:
```
[server]$ mkdir -p git/projectname 
```
Change into the newly created directory:
```
[server]$ cd git/projectname
```

Initialize the repository:

[server]$ git init --bare
Initialized empty Git repository in /home/username/git/projectname/

Step 2 — Create a file to copy updates

This step creates a file named post-receive which updates to your child theme directory.

Make sure you're in your /git/projectname directory.
Create a file named post-receive:
```
[server]$ nano hooks/post-receive
```

Add the following code to the file. This tells Git to push changes to your child theme directory.

#!/bin/sh
GIT_WORK_TREE=/home/username/example.com/wp-content/themes/child-theme-directory git checkout -f

Save and close the file.

Step 3 — Update the file's permissions

The file must have execute permissions to be run.

Run the following command to update the file permissions:
```
[server]$ chmod +x hooks/post-receive
```
Check the permissions to confirm they are updated.
```
[server]$ ls -la | grep post-receive
-rwxr-xr-x post-receive
```
You should see the permissions set to -rwxr-xr-x.

Configure your local Git repository

These steps configure a Git repository on your home computer.

Step 1 — Download your website files to your computer

Log into your server via FTP and download all of your DreamPress website files to your local computer.

Step 2 — Create your local Git repository

Open your terminal application on your home computer.
Navigate to the directory where you backed-up the website files.

Change into your child theme directory:

[local]$ cd ~/example.com/wp-content/themes/child-theme-directory

Run the following to initialize an empty repository:
```
[local]$ git init
```

Step 3 — Customize your local child theme on your computer

This step is not covered in this article. See this blog post for instructions on creating a child theme.

Step 4 — Save your changes

These steps save your child theme customizations to your local Git repo.

Add your changes to your local Git index:
```
[local]$ git add .
```
Commit these changes to the repository. Include a brief message in the commit command to remind you of what you're committing. This can be used in the future to help you locate a specific update.
```
[local]$ git commit -m "message about the commit"
```
Check the status of your Git repository to confirm everything has been saved:
```
[local]$ git status
```

Connecting your repositories

These steps connect your local repository to your DreamHost server's repository.

Step 1 — Set up the connection to your remote server

On your home computer, navigate into you're in child theme directory.
Run the following command to add a remote repository:

In the following example, the word myserver is just an alias used to push your content to your server in the future. It can be named anything you want.
```
[local]$ git remote add myserver ssh://username@servername.dreamhostps.com/~/git/projectname
```
Run the following to confirm it was correctly added:
```
[local]$ git remote -v
```

Step 2 — Push your changes to your website server

Now that your local and server repositories are connected, you can push your changes to your website whenever an update is made on your home computer.

In the child theme directory, run the following command only once:

[local]$ git push -u myserver main
Branch main set up to track remote branch 'main' from 'myserver'

Push your changes to the server with the following command:
```
[local]$ git push myserver
```

Step 3 — View your live website

View your website. You should see the child theme on your website has been updated.