X
    Categories: Git Tutorials and Workflows For DeveloperWeb Design and Development news, Resources and TutorialsWordPress Tutorials, Tips and Guides

Improve WordPress Development Workflow Using Sublime Text Editor and GitHub Repo On A Live Website

Considering the rapid growth of web developers and open source communities, a lot of work has been done to make development process faster, easier, and accessible around the globe. With the launch of different Git environments like GitHub and BitBucket, the development process has become a lot easier.

Although it’s hard to maintain the version controlling via Git, it is a three step process to set up a development environment. Develop locally, push to Git and then deploy it on a live site.

In this article, I will let you know how to integrate Sublime Text with GitHub via GitHub tools for Sublime Text and then push them on a live site at Cloudways.

Steps to Use Sublime for GitHub on a Live Site

  1. Create Repository on GitHub
  2. Push WordPress Files from Cloudways to GitHub Repository
  3. Connect GitHub with Cloudways
  4. Build Development Environment on Desktop Machine
  5. Pull to Local Folder from GitHub Repository
  6. Connect Sublime to GitHub
  7. Push from Local to GitHub
  8. Pull to a Live Site on Cloudways from GitHub
  9. The Process Is More Easier Now!

 1. Create Repository on GitHub

Log in to GitHub and create a repository by following this link.

2. Push WordPress Files from Cloudways to GitHub Repository

Now, I need to Push all files and folders from WordPress application to GitHub repository. I’m assuming, you have signed up with Cloudways and installed WordPress as your application. And using it for our today’s guide.

Log in to SSH Terminal

Navigate to Cloudways platform, and launch SSH Terminal using Master Credentials.

Get into your application by using below commands that are described as:

cd applications/xxxxxx/public_html (xxxxxx is the folder name of your WordPress application).

git init

Initializes the local directory as Git repository.

git add .

Add all files to local GitHub repository and stages them for the first commit.

git checkout -b master

It will create a local branch named as master

git commit -m “First commit”

Commit the changes that have been tracked and prepare them to be ready for the push on GitHub repository.

git remote add origin remote repository URL

The remote URL of our GitHub repository where all files will be pushed. Add HTTPS remote URL just after origin.

In my case, the command will be: git remote add origin https://GitHub.com/MustaasamSaleem/WordPress.git

git push origin master

This command will finally push all the files to GitHub repository in master branch.

Note: It may ask credentials for your GitHub account. Enter username and password.

Delete wp-config.php

If you have a public repository, it is always recommended to delete the wp-config.php from GitHub repository. Since it contains credentials of your WordPress application. You can always edit it directly on a live site.

3. Connect GitHub with Cloudways

Log in to your Cloudways account, and get into the WordPress application. From the left pane in the dashboard, go to Deployment via Git and tap on Generate SSH Keys.

Now Download SSH Keys.

Go back to GitHub repository then navigate to Settings > Deploy Keys > Add Deploy Key, set title and enter your downloaded SSH Keys.

As you can see, I have marked the checkbox where it says “Allow write access”. I did this because I am going to exchange the changes.

Within your GitHub repository, navigate to the Code tab, copy SSH Key, make sure you have selected use SSH.

Now, get back to Cloudways platform where it says Deployment via Git. Paste the SSH Key, press the refresh icon, and choose the branch of your Git repository.

Note: For this article, I am using master as a branch.

The deployment path is left empty because I am going to connect WordPress application’s public_html folder with GitHub repository. Now tap on Start Deployment to connect Cloudways with GitHub.

Once it has been done. You will get a notification at the top right corner of the screen.

4. Build Development Environment on Desktop Machine

Since I am going to integrate Sublime Text with GitHub, it is necessary to build a testing environment on my desktop too.

Here are the few steps to follow for developing a testing environment on your local machine.

Download and Install GitHub

First of all, Download and Install GitHub which is compatible with your Operating System.

Install Sublime Text

I am using Sublime Text as my code editor; you need to download and install the latest version of Sublime Text editor. Currently, Sublime Text 3 is the latest version.

Install GitHub Package on Sublime Text Editor

You will find many GitHub Tools for Sublime Text, but I am using the most widely used package GitSavvy.

GitSavvy has a complete list of supported GitHub commands that can be accessed from here. To install the package, you need to open the Command Palette by press CTRL+SHIFT+P or navigate to Tools > Command Palette.

A new popup will appear, asking you to perform a task. Now, I need to install the Package Control that will enable the feature to add different sublime packages.

After the successful installation of Package Control, I can install packages. Go to Command Palette once again, search for Install Package.

Within a few seconds, you will see a new popup displaying a complete list of sublime available packages. Now, search and install the sublime git package GitSavvy.

On the successful installation of GitSavvy package, a new tab will be opened displaying a welcome message from GitSavvy team. Here is, what it will look like.

Note: I would suggest to give it a read, as it will make you understand the basics of GitSavvy. You can also get help within the sublime itself, just press CTRL+SHIFT+P and type GitSavvy: help

5. Pull to Local Folder from GitHub Repository

Let’s start pulling files and folders to a local folder on our machine. Make a bit change and see, if everything is working fine!

Create a folder anywhere on your desktop machine, get into it and press Right Click > Git Bash here. It will open a window like a command prompt, where you will enter Git commands to connect this particular folder with your online GitHub repository. Type below mentioned Git commands one by one.

  1. Git init
  2. Git add .
  3. Git remote add origin HTTPS remote url
  4. Git pull origin branch

It will take some time, depending on your internet connection speed and the size of your WordPress repository.

Once, the process is completed. Go to your local WordPress folder, in my case, it is on Local Disk (D:). You can see, all the files are pulled successfully.

6. Connect Sublime to GitHub

I need to connect Sublime with GitHub so that I can push changes to WordPress repository on GitHub.

Open the local WordPress folder in the Sublime text editor by going to File > Open Folder.

Make a Change

I am going to edit the wp-login.php file and Add:

echo "Hello World!";

At the top of the file just below <?php and Save it.

Initialize the GitHub on Sublime Text Editor

Open command palette, search for status and press enter where it says git: status. This command will compare local folder with GitHub repository version and let you know the name of the files that you changed.

You can see, it is showing the wp-config.php file is in unstaged mode. I can do a lot with this file by following the instructed commands. But first I need to stage this file, commit it and then push it to GitHub repository.

Press S to stage this file, then again check the status by using git: status command. You will notice, the file has been moved to staged mode.

To commit this change, use git: commit a new tab will be opened describing the changes I have done in the wp-config.php file. Write commit at the top of the file and press CTRL+ENTER to submit the commit.

Note: It might ask your name and email so that the commit should be submitted under your name.

7. Push from Local to GitHub

Now, I need to tell Sublime about the repository I am going to push the change. Use git: remote add command to set remote URL.

Once you are perfectly connected with the GitHub repository. Use git: push to push the changes we have made finally.

Note: If you are not logged into your GitHub account, it may ask to login.

And, here you go!

8. Pull to a Live Site on Cloudways from GitHub

OK so, everything is configured and working well. Now, we need to pull changes from GitHub repository to a WordPress site on Cloudways.

From Cloudways platform, get into your application and then navigate to Application Settings > Deployment via Git, hit the Pull button.

Bingo!

All changes have been updated on a live site. Here is the result.

Why Isn’t The Pull Automated?

Doesn’t it look like a bit manual process of pulling all the changes? Why not should the pull process also be automated? Well, let me tell you, sometimes you might have pushed something mistakenly to the GitHub repo with the automated pulling process, the site might get corrupted.

That’s why, I would suggest you make a Pull request manually, every time you are confident enough to apply changes on a live site.

9. The Process is more Easier Now!

Everything is working like a champ. There are only a few things to do now!

  1. Make a change to any file.
  2. Use git: stage current file and commit. This command merged two different events to fasten the push process.
  3. Enter commit at the bottom text area bar.
  4. Submit changes to GitHub using git: push
  5. Pull changes from Cloudways WordPress application.

It’s time to check the updated GitHub repository and live site on Cloudways.

The whole setting up process might look a complex task, but once everything is properly configured. You just need to make a change on WordPress local folder via the Sublime Text editor, push to GitHub and Pull on a live site.

If you have any question, feel free to ask by using the comments section below.

Mustaasam Saleem: Mustaasam is the WordPress Community Manager at Cloudways - A Managed WordPress Hosting Platform, where he actively works and loves sharing his knowledge with the WordPress Community. When he is not working, you can find him playing squash with his friends, or defending in Football, and listening to music. You can email him at mustaasam.saleem@cloudways.com