How to Host a WordPress Website on GitHub with Custom domain

How to Host a WordPress Website on GitHub with Custom domain

We will be going over how to create a WordPress website using GitHub Pages and linking it to a custom domain. And also adding search and comment features to our site.

Advertisement

Here are the Steps to Host a WordPress Website on GitHub with Custom domain:

  1. Install XAMPP
  2. Install WordPress on LocalHost
  3. Sign up for GitHub and make a Repository
  4. Add repository to GitHub Pages
  5. Add Custom Domain
  6. Install GitHub Desktop and clone Repository
  7. Create Static WordPress files and push to GitHub Repository
  8. Add a custom 404 page
  9. Add Disqus Comments
  10. Add Google Search 

All these steps will be shown to you in detail so make sure to read the article to the end.

There are numerous advantages to hosting your website on GitHub Pages. GitHub pages host the site for free, make it easy to manage, and is also very easy to set up.

Advertisement

Hosting your website on GitHub pages is also much faster than traditional hosting methods.

Now when you are hosting a WordPress website on GitHub, the dynamic content of your website like the search bar, comment section won’t work. As the website will be static and not dynamic.

To fix that we will be using google search and Disqus comments on our website that will help us add those functionalities to our WordPress website.

Advertisement

Now, the first thing we will do is to install and set up a WordPress site on our local host that we will then connect to our GitHub and publish our website on the internet.

Install WordPress on Local Host -

So, here’s how it will work. First we will install WordPress on our local host, then we will create static files of our WordPress files using a plugin and then we will push those files to the GitHub repository which will then publish the files to the internet.

Now to install WordPress on your local host we will have to first download XAMPP. You can download XAMPP by going to this link here.

Advertisement

1. Here click on your operating system. After that XAMPP will be downloaded. After downloading, install XAMPP.

download xampp

2. Open XAMPP and then start Apache and MySQL. You can now access your local host by typing localhost/ in your web browser.

start apache and mysql

Now to install WordPress in our local host we will first have to download the WordPress zip file from wordpress.org.

I am using windows, if you use some other operating system then the steps will be the same. The ways to do them might be a little different.

Advertisement

1. Go to https://wordpress.org/download/ . Scroll down a little and there you will get the download button. Click on it to download WordPress. You can also download the old versions of WordPress from https://wordpress.org/download/releases/

2. After Downloading the zip file, “right click” on it. Then click on the “Extract To” option. Wait for it to finish extracting.

extract wordpress zip

3. Now go inside the extracted folder of WordPress. And copy all the files present there.

Advertisement
copy all files from wordpress folder

4. After that go to your “C drive”. And Locate “xampp” folder, go inside xampp folder and locate htdocs, go inside htdocs.

5. Here inside the htdocs folder, create a new folder called “localsite”. After that paste all the WordPress files that you copied inside the “localsite” folder.

create new folder inside htdocs

6. Now, go to your web browser and type “localhost/phpmyadmin”. Here click on the “Databases”.

Advertisement
go to phpmyadmin and then click databases

7. In the database name type “localsite” and then click on the create button at the right side. After the database has been created, close the tab and go to “localhost/localsite”.

create a new database

In “localhost/localsite” follow WordPress instructions to complete the installation of WordPress on your local host.

In database configuration the database name will be “localsite”, Username will be “root”, remove the password and then click on the submit button. Then click “Run installation”.

Advertisement

Make sure to remember the password and username of your WordPress admin during the installation process. Now that our WordPress website has been set up properly on our local host, let’s create a GitHub repository to host our website files.

Sign up for GitHub and Create a Repository -

All our website files will be hosted on GitHub. And we will be using GitHub pages for setting the site live.

To create a GitHub repository first we will have to create a GitHub account. To create a GitHub account go to https://github.com. Here click on the sign-up button on the top right.

Advertisement

Enter your email address, a secure password, username and then solve the captcha and create your GitHub account. Verify your email by the code sent to your email address and then follow GitHub’s instructions to complete the account setup.

create a new github account

Once your account setup is complete, follow the steps below to create a GitHub repository to host your website files.

1. Once you are in your GitHub Dashboard Click on the “NEW” button at the top left. You might also see the “Create Repository” option if you have logged in for the first time to your GitHub account.

Advertisement
click new in github dashboard

2. Now here you’ll need to enter your repository name. I recommend you name it the same as your domain name. The repository should be public and not private. Scroll down a little and tick the “add a README file”. After that click on the “Create Repository”.

create a new github repository_1

Your repository will be now created. After creating the GitHub repository we will have to now add our GitHub repository to GitHub pages.

Add the Repository to GitHub Pages -

To add our repository to GitHub Pages we will have to create a new branch and delete the default main branch.

Advertisement

1. Once you are inside your GitHub Repository click on the “MAIN” button and then in the “Find or create a branch” type gh-pages and then click on the Create branch.

create gh-pages branch in github repository

2. Now we will need to delete the main branch and make the gh-pages branch the default branch. To do that first go to settings, then to Branches.

Here click on the “arrow button” and then click on the “main” button. Select gh-pages and then click on Update. After that click on the “I understand, update the default branch”.

Advertisement
change default branch in github repository

Now to delete the “main” branch go back to your repository and click on “Branches”, here in branches click on the delete icon on the main branch, after that go back to <> Code.

delete default github branch

You can now access your site at “your-username.github.io/repository-name

Now to make it look better, easier to read and share let’s add a Custom Domain to it.

Advertisement

Add Custom Domain to GitHub Pages site -

To add a custom domain to your GitHub pages site, first, go to your domain registrar from where you bought the domain name. And then go to the DNS settings.

I am using Cloudflare so I will use Cloudflare DNS settings. Depending upon what domain name provider you use the DNS settings will be found in different places. Google it.

Once you are in the DNS settings, here you will need to add four “A” records pointing to GitHub.

Advertisement

1. To do that first select “A” record, in the “name” type your domain name. After that add these IP addresses –  185.199.108.153 –    185.199.109.153 –  185.199.110.153  –  185.199.111.153 

add dns A records

2. Add all the four A records and after that wait a few minutes for the DNS to Propagate.

add all 4 A records

If you want the www version of your site to redirect to a non-www version then also add a “CNAME” record. Where in Name it will be “www” and in content it will be your domain name.

Advertisement

After 10 mins go back to your GitHub repository and then go to settings. In settings scroll down and look for “Pages”.

Click “Pages”. Now here in Pages scroll down and in “Custom Domain” add your domain name and then click on Save.

Your Website can now be accessed through the custom domain name.

Advertisement

Install GitHub Desktop and Clone Repository -

Now we will install GitHub Desktop and clone our website repository in it. Using GitHub desktop will make it easy to push our website files to our repository.

First, go to https://desktop.github.com Download the GitHub exe file to your Desktop and then install it. Make sure to remember the installation path.

Once GitHub is installed, Open it. And then sign in to GitHub using your email and password.

Advertisement

After signing in to GitHub, go to “File” at the top left corner or Press CTRL+SHIFT+O to clone a repository.

click file in github desktop

Select the repository that we made for our website and then click on “clone”. Remember the Local Folder path displayed at the bottom. We’ll need that. 

clone github repository

Wait for the cloning to finish, after the cloning finishes minimize the GitHub Desktop.

Advertisement

Create Static WordPress files and push to GitHub Repository -

As you know that in GitHub we can’t host dynamic websites, websites that need a database won’t work in GitHub pages. The only important dynamic part of a blog is search and comments which we will add using Disqus and google search.

All the other parts of a WordPress site can work easily without a database. To be able to host our WordPress site on GitHub pages we will convert our WordPress files into static files using the “Simply Static” Plugin.

First, open XAMPP and start Apache and MySQL. After that log in to your WordPress site hosted on localhost. You can log in to WordPress by going to “localhost/wordpress_folder_name/wp-admin/.

Advertisement

Follow these steps here for installing WordPress on localhost.

After Logging in to your admin dashboard go to Plugins>Add New. Here search for a plugin called “Simply Static”. Install and activate the plugin.

install and activate simply static plugin

Once the plugin is activated go to Simply Static > Settings from the admin menu on the left.

Advertisement
go to simply static settings

Here, in the Destination URL select “Use absolute URLs, change HTTP to HTTPS and add your domain name. Scroll down a little and in the Delivery Method select “Local directory”.

configure simply static settings

After that, we will have to add the path to our local directory where these static files will be stored. The path will be where our GitHub repository was cloned. Remember the path that was showing below when cloning the repository.

copy local github repository file path

Paste that file path in simply static settings and then click on Save Changes.

Advertisement

You can easily find the file path by opening GitHub Desktop and clicking “Show in Explorer”. After that copy the file path from the file explorer and paste it into Simply Static settings.

STEP 1 – Once settings are saved go to Simply Static> Generate and here click on the generate button. Wait for it to finish.

click generate in simply static plugin

STEP 2 – When it says “Done, Finished” go back to your GitHub Desktop, and here you will see a lot of files automatically appeared here. All you need to do now is give a summary on the bottom left. And then click on “Commit to gh-pages”.

Advertisement

STEP 3 – After clicking commit, on the top bar click on the “Push Origin”. Your website files will be now uploaded to your GitHub repository. When “push origin” changes to “Fetch origin” then it means the files were uploaded to your GitHub repository

push origin in github desktop

Your WordPress website is now live and you can access it by typing your domain name. It might take a few minutes for the changes to appear.

Note: Every time you change something on your website like adding a post or something else and want to publish it, just follow the three steps shown above.

Advertisement

Adding a Custom 404 Page -

Now by default, there is a GitHub 404 page that is not so good. So to fix that we will add a custom 404 page to our site.

To do that go inside your repository and here click on “Add File” and then Create a new file.

create new file in github repository

Now in name, you’ll have to name it “404.md”, you cannot name it anything else. After naming it, copy the code from below and paste it into the editor. You can also add your code here or make any changes.

Advertisement
<html lang="en-US">
  <head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
  <h1>404.. Page not Found. Return to HOME</h1>
  </body> 
</html>
make 404.md and add code in it

After adding the code scroll down and click on “Commit new File”. Your website will now have a custom 404 page that you can test by going to any URL that doesn’t exist on your website.

Adding Disqus Comments to Static WordPress site -

As our WordPress website is a static site, the default comment box won’t work as it needs a database to work. So, to be able to add a comment feature to our static site we will use Disqus Comments.

Disqus will help us in adding the comments feature to our website.

Advertisement

To start, first, go to https://disqus.com/profile/signup/  and sign up using email or any other ways available. Then select “I want to install Disqus on my site”.

Now here in “Create a new site”, Enter your domain name and select the category of your site and then click on Create Site. After that select your Disqus Plan. 

create a new disqus account

Now after selecting the plan close the tab and go to https://disqus.com/admin and click on Settings on the top bar. Click on your domain name. After clicking on your domain name you will be in the admin dashboard of your Disqus site.

Advertisement

Here copy the ShortName. Which you can get in Settings>General.

copy shortname of disqus site

After copying the ShortName Go back to your WordPress Admin. Now go to Plugins>Add New and search for “pipDisqus”. Install the “pipDisqus – Lightweight Disqus Comments” plugin and activate it.

After activating the plugin you can access the plugin by going to Settings>pipDisqus.

Here in Disqus ShortName add the ShortName that we copied from Disqus Admin and then click on Save Changes.

Advertisement
add shortname to pipdisqus plugin

That’s it, the default WordPress comment box will be replaced with Disqus comments which will work on your static WordPress site.

Publish the changes after that.

Adding Google Search to Static WordPress site -

Now, this is an optional step, to add a search bar to your static website. You can add one or just live without it. Small sites don’t need a search bar anyways.

Advertisement

But if you want to add one then you can follow the steps below. 

First, go to https://cse.google.com/cse/ and click on Get Started. Sign In with your Google account.

After that in “Sites to search” enter your domain name. And in Search Engine enter google. Solve the captcha and click on Create.

After that click on “Get Code” and copy the script that is shown on the screen. Paste this script in any place on your site where you want the search bar to show.

Advertisement

You can go to https://cse.google.com/cse/ to change how your search bar looks.

Wrapping it Up -

And that’s it, that’s how you can host a WordPress website on GitHub with a custom domain and with Disqus comments and also a search bar. All the features of a dynamic website in a static website.

You can access the site that we used in this tutorial at aomie.tk, do check it out.

Advertisement

Finally, all I want to say is that this post took me three days to finish, so, show some love and comment below. Thank You.

FAQ -

Q1. What are the Pros of a Static WordPress site hosted on GitHub.

A static WordPress website when hosted on GitHub has lots of pros like it’s freaking fast, it’s easy to manage, easy to host, easy to make changes and it’s very secure. And you won’t have to worry about website backup.

3 thoughts on “How to Host a WordPress Website on GitHub with Custom domain”

Leave a Comment

Your email address will not be published. Required fields are marked *