What is Github repository
We’ve talked a lot about building a web design company on our blog, but this article is for the Developers in the house.
As you may know, we’re big fans of WordPress and use the open-source workhorse any chance we can. But let’s face it—keeping your production site in line with your local testing site can become a nightmare if you don’t have the proper set up. Today we’re going to show you how 45royale builds and tests a WordPress site on local servers and then pushes those updates to a live production server.
One quick note before we get started: We’re going to assume that you have a local environment set up on your machine. We’ve been using MAMP for years as it provides an all in one solution for Apache, PHP and MySQL on a Mac OS environment. If you’re new to local development, check out this article to get up to speed on downloading and setting up MAMP. Have MAMP installed? Great, here’s what’s next:
If you haven’t already downloaded WordPress after installing MAMP, go ahead and grab it now. Place it in your [html].htdocs[/html] folder so it’s ready for the next step.
Log in to GitHub
Log in to Github and create a repository for your new theme. Once you do, you’ll be able to get a clone URL for the repository (see below) ↓.
Clone your GitHub repository
Clone your new Github repository (we’re using the GitHub app for Mac) onto your local machine in the [html]wp-content/themes[/html] folder where you installed WordPress. The result should leave you with a folder called [html]wp-content/themes/theme_repo_name[/html].
Copy and paste your files
Copy and paste all of the files from one of the default WordPress themes into your [html]theme_repo_name[/html] folder (we’re using the [html]twentyseventeen[/html] theme). If you have an alternative or existing theme you want to use, feel free to copy those over instead of one of the default theme(s).
Activate the theme
Log in to WordPress on your local server and activate the new theme.
How to Combine GitHub and WordPress (In 4 Steps)
In order to combine your WordPress development environment with GitHub, you’ll need to go through a few important steps. This starts with creating a local WordPress environment. Then you’ll move on to installing GitHub and creating your first repository.
Step 1: Create a Local WordPress Environment
If you plan on developing for WordPress, it’s best to establish a high-quality, local development environment. For this, we recommend using Local:
Developing locally means you can create an environment that will mimic your production server. You can develop and test your code offline, without causing disruption to anything that’s already live.
Flywheel offers both free and premium products for download. Once you set up your local environment, you’ll have all of the necessary developer features and tools at your disposal. To get started, you can select Free Download! on the home page, and choose your operating system:
Once you’ve downloaded the software package and completed the installation process for your system, you can open Local and begin setting up your local development site. When you’re prompted, click on Create a New Site:
Next, you’ll enter your development site’s name. The local site domain and path will auto-populate. However, you can use the Browse option to select a different local path for your site if needed:
You’ll also have the option to Create Site from Blueprint. This means that as you start to amass multiple sites or development projects, you can package together sets of plugins and themes you use frequently. Then by using blueprints, you can quickly access and load them when you create a new development site.
After finishing your website name selection, click on Continue. Next, you’ll be prompted to choose a username and password for your local WordPress installation:
Once your development environment is complete, you’ll see a screen with a summary of your new site’s information:
This will be the main dashboard for all the local sites you create with Flywheel. From here, you can quickly check the status of your site, view it, and head to your WordPress admin dashboard by selecting Admin. Additionally, you can easily view your security, database, and other utility information.
Step 2: Install GitHub
To enable the use of GitHub with WordPress, you’ll need to create a free GitHub account and download and install Git on your local drive. Git is the open-source Version Control System (VCS) that handles all of the workflows on GitHub.
You have two choices for what you can use to install and configure Git. If you’re comfortable using a command-line tool, that’s one option. Alternatively, you can use the GitHub Desktop client:
For this demonstration, we’ll download and install GitHub Desktop. After downloading and unzipping the files, you’ll need to sign in with your GitHub information:
If you’re not familiar with how Git works, you can think of it as the middleman in your workflow. GitHub is where you can host your project, while Git is the function that pulls your project repository to your local development environment so you can work on it.
When you’re done, you can use Git to push the changes to GitHub, so your files will always be up-to-date.
Step 3: Create a Repository
Now that you have your local environment ready to go, with WordPress and Git installed on your machine, you’re ready to create a repository for your project. From the GitHub Desktop, you can select Create a New Repository on Your Hard Drive:
You’ll then be prompted to configure your new local repository:
After naming your repository and configuring a few other settings, such as selecting a license if needed, click on Create Repository. You’ll then see your new repository in the GitHub Desktop user interface:
This is command central for your project. From here, you can commit changes and publish your repository to GitHub. Additionally, you can create repositories from the GitHub website:
If you create your repository this way, you can use the Clone repository feature in your Desktop interface to pull it into your local development environment:
After you choose the repository you want to clone from GitHub and set the local path, click on Clone to complete the action.
Step 4: Publish Your Repository
Once you’ve added files to your local repository folder, they will appear in the GitHub desktop. From there, you can initiate changes, open your code editor, and publish your repository to GitHub:
After clicking on Publish repository, you’ll be prompted to add a description and complete the publishing process:
Then, you can check your GitHub account to make sure your repository was published
As you make changes to your files and test them in your Local by Flywheel WordPress environment, you can easily commit your changes in GitHub Desktop. Then, you’ll be able to publish your updated repositories to GitHub with one click.
Github Plugins for WordPress
There are not many plugins for WordPress that add meaningful functionality for GitHub. Some newer and unvetted plugins are available that are designed to enable updates to your blog via published repositories. However, there are two reliable options that offer useful features for developers.