Github WordPress Workflow: Local to Github to Server

In this WordPress workflow tutorial, we’ll use git to push our local WordPress site to a Github repository. Next, we’ll login to our live server and pull in the Github repository.

Before we start, here are my specifications.
Host: Hostgator
OS: Mac
Local Dev Environment: MAMP
Deployment Tool: Git

And here are some extra notes.
~Anything that you need to type will be in a box with a gray background.
~Doing what you are about to do here took me weeks to get right. Don’t worry if something goes wrong. Take a break; try, again, tomorrow; or ask. I’d love to answer your questions.
~Any text below a picture is referring to the picture above it.
Okay, here we go.

Step 1: Getting WordPress to Work Locally

First, download WordPress here.

Next, download MAMP here and install it. Warning: I tried using MAMP PRO for this, but I got some strange errors. Easiest way: MAMP.

Next, Unzip the WordPress file that you downloaded. Rename the extracted file with all the WordPress files in it to testwp. Drag and drop it into your htdocs folder (/Applications/MAMP/htdocs). The htdocs folder was created when you installed MAMP.

Open up MAMP, click Start Servers. I believe there is some initial setup. Just stick with the default settings. Open up your browser (I’m using Chrome) and type in localhost:8888/testwp.

 

Screen-Shot-2015-11-20-at-9.43.33-PM

You should, now, see WordPress and the option to hit continue. Choose your language and hit Continue. You’ll see that you have to have some information available, first.

Now, we’ll go ahead and create a database locally for our WordPress site, and we’ll use phpMyAdmin to do it. phpMyAdmin is made available by MAMP.

In your browser, type localhost:8888/phpMyAdmin. In the phpMyAdmin homepage, click the Databases tab and type in the name of the database you want to create. My host (hostgator) appends all of my databases with the first couple letters of my username (davidstr). That means that the name of my local database will also have to start with davidstr. I’ll call my database davidstr_testwp.

Screen-Shot-2015-11-20-at-8.36.32-PM

After creating the database, click the purple and orange phpMyAdmin logo to go home. Click the Databases tab, again. In the very bottom right of the picture, you can see “Check Priveleges” next to the database name. Click that.

Screen-Shot-2015-11-20-at-8.43.29-PM

Click Add User.

Screen-Shot-2015-11-20-at-8.48.41-PM

Make sure all your settings match mine. For username, use the same name as the database. Change host to local. Create a password. Mine was b@dp@$$w0rd Make sure to tick Check All. After that, click Go in the very bottom right (You can’t see it in the picture. You have to scroll down).

Now that we have created the database for our local WordPress site, we can go back to localhost:8888/testwp. Choose your language and hit Continue.

Screen-Shot-2015-11-20-at-8.53.50-PM

All the information you’re entering here is the same that you used to create the database. For Table Prefix, just type wpanything_ and make sure to include the dash. Click Submit. Next, click Run Install.

Screen-Shot-2015-11-20-at-8.57.16-PM

On this page, enter a title for your site. You’ll be reusing all of this information (including the password) for your live site. Click Install WordPress. You should now be able to log in to your local WordPress site and make any changes.

Step 2: Pushing Your Local WordPress Site to Github

Next, we are going to push our site to Github.com You will need to create an account on Github.com for that. You’ll also need to install Git on your Mac. To install git on your mac, open your terminal, type git, hit enter and when an alert box pops up, just hit “yes.” This will install command line developer tools. For now, avoid installing Xcode and just install the developer tools.

Open your terminal and type cd /Applications/MAMP/htdocs/testwp/ to get into your local WordPress folder. Type git init and git add . (with the period) and git commit -m "first commit"

Now, go to your github account, click New Repository and call it testwp.

Go back to your terminal and type git remote add origin git@github.com:your-git-username/testwp.git. After that, type git push -u origin master to push your repository (your local WordPress folder) to github. If an error pops up, you’ll probably have to create a pair of SSH keys. Github needs these to allow you to push anything to your repository on github.

Step 3: Sending (Pulling) Your Github Repository to Your Site

When that finishes pushing, go to your terminal, again, and SSH into your site by typing ssh -l yourcpanelusername -p 2222 yoursite.com. This will log you into your site (your server). Only use 2222 if you’re on hostgator. Host Gator uses the port 2222. You’ll have to find out what port your host uses. Once you have SSHed into your site, type cd public_html to go into the folder where your live files are kept. You will, now, pull your github repository (your local WordPress folder named testwp that you pushed to github) into your live site. To pull it, first type git clone git@github.com:your-github-user-name/testwp.git. This will attempt to clone the repository on github to public_html. Here, you will most likely run into another error related to SSH. You’ll need to generate another pair of SSH keys that will tell Github that it’s okay for your server to pull from Github. Everything we’re doing right now took me a very long time to get right. Don’t expect to get it right the first time. After git clones the github repo to public_html, you’ll have a folder called testwp. This is your local WordPress folder. Now, type cd testwp/ to enter the new folder. Once you’re in, type git pull to test that you can actually pull changes you to your local site from your Github repository.

Step 4: Creating the Database for the Live WordPress Site

In your browser type yoursite.com/testwp You will see the error: Error establishing a database connection. That’s okay. That just means you successfully pushed the testwp folder to github and successfully pulled it into your public_html folder on your site via SSH and the terminal. Nice job! It also means that we need to create a database for our live site to use. We’ll use the database that we created on our local site.

Exporting your local WordPress site’s database

Enter localhost:8888/phpMyAdmin in your browser. Click your database and click the export tab.

 

For the export method, choose custom, then choose Save Output to a File, and then scroll to the bottom and hit Go. Don’t forget where you saved the file to. We’ll be importing it into our live site via the cPanel.

Importing the database into your live site for your live WordPress site to use

Unfortunately, we can’t just import the database and the user information into our live site for our live WordPress site to use. First, we’ll have to create the database using the the MySql Database Wizard on cPanel. Type yoursite.com/cpanel to get the the cPanel and search for mySQL Database Wizard. Click the MySql Database Wizard. Create a database with the same database name (davidstr_testwp), database user(davidstr_testwp), and database password as your local site. *It is very important that these are exactly the same.*

Now visit yoursite.com/testwp and you should see the same WordPress page to choose your language that you did after you started up MAMP, dropped testwp into MAMP’s htdocs folder, and visited localhost:8888/testwp.

Screen-Shot-2015-11-20-at-9.43.33-PM

Great! Your site is, now, live. Since the local WordPress site is using the same user information as the live database, you don’t have to change anything in your wp-config.php file.

Now that we’ve created a live database via cPanel with all the same information as our local database, we can import the file that we exported from our local phpMyAdmin.

Go back to cPanel, search for phpMyAdmin and click it. If you don’t see your database on the phpMyAdmin home page (and you’re also using hostgator), you have to log out. You actually have to click the log out button in the top right corner (not just close the window and log in).

Screen-Shot-2015-11-20-at-9.47.03-PM

Click your database on the left, and then click the import tab. Click Choose file to import and locate the file you exported from your local database. Scroll down and click Go.

Go back to yoursite.com/testwp.

Screen-Shot-2015-11-20-at-9.48.18-PM

If you see the above web page, congratulations! Your live WordPress site is now seeing the database. However, if you try to login, now, it will just take you to your local WordPress site. You will need to go back to phpMyAdmin and make some quick changes to some information in your live database.

Screen-Shot-2015-11-20-at-9.57.19-PM

Select your database, again, and click the wptest_options table on the left (highlighted in gray). In the table columns (where it says option_id | option_name | option_value), under option_value, you will see the address for your local WordPress site in the first two rows. Change those two rows to match your site (yoursite.com/testwp). After changing that information, close the previous WordPress login page you opened earlier; revisit yoursite.com/testwp and login with the same username and password that you used for your local site. You should now see your beautiful, local WordPress site live!

Congratulations! You can now edit your local WordPress site, push the changes to github, and pull them into your live WordPress site. Enjoy! 😀