Free Static Website Hosting with WordPress, Namecheap, and Github Pages

PS: This Article was originally published at https://branditechture.com on September 4, 2021.

In this article, I will show you how to generate very beautiful static websites using WordPress and how you can host and plug them to a custom domain (www.yourbusiness.com) for free on Github Pages.

I am about to share a secret that I have used to save my clients a lot of money, keep their website blazing fast, secure, and maintenance-free.

The secret: I build their websites on localhost using WordPress, then I generate a static HTML version of the website and host it on GitHub Pages. To ensure the website loads over HTTPS, I use the SSL provided with the Cloudflare Free Plan.

With WordPress, you have hundreds of thousands of free and premium themes and plugins to choose from. You can also build your own custom templates using Elementor Pro.

Prerequisites

1. Set Up Your Domain Name

Click HERE to grab a domain name on Namecheap

2. Create Github Repository

You’ll need to create a repository (or repo) from which your website would be served.

To do this, you first have to create a Github account if you don’t have one.

After logging in, create a repo with name of your website.

Click on the New button coloured green.

Put the name of your website In the text field under Repository name *.

As explained earlier, a repo acts like a folder that will hold the website’s source files. I named mine “my staticwebsite” but you can give yours any name.

3. Install Github Desktop

I am a busy Graphic Designer with a phobia for command line errors so I avoid Git CLI. I prefer to use Github Desktop instead.

If you are someone who doesn’t like Command Line Interface like me, Github Desktop is a very good alternative to Git CLI.

To Install Github Desktop, Go to desktop.github.com. Click on the big purple Download for [Your OS] button to download the installer, then install it on your machine.

4. Create An Offline Clone of Your Repo

Luckily, Github Desktop allows us to clone repositories to our local drives, so we will use it to clone the repo we just created.

It will also track and sync changes to files in the repo; both on Github.com and your local offline copy (which is basically a folder).

To clone the repo we created on Github.com;

Launch Github Desktop

1️⃣ Sign in with the same Github account which you used to create the repo in step 2 (above). To sign in, click Github > Preferences > Accounts > Sign In under Github.com (Not Enterprise). But if you use Windows, then that would be File > Options > Accounts > Sign In

2️⃣ After successful authentication, it’s time to clone the repo we had created earlier on to our local storage. To do that, go to File > Clone Repository. You will notice an option to choose a local path to clone to. Create a Folder named Github in your Documents folder. and choose to clone your repo into it. Your local path should look something like; /Users/apple/Documents/Github

3️⃣ After setting your local path, choose the repo you created in Step 2 and click on the Clone button on the lower right corner of the modal.

If everything goes well, you should have a local version of your repo in Documents > Github (depending on the local path set above)

5. Install MAMP

MAMP is a local web development solution that allows us to develop PHP-powered websites on a local machine without having to purchase a web hosting plan.

WordPress is powered by PHP, hence to create a WordPress website with our local machine, we would need a local server such as the one MAMP offers.

To download and install MAMP, go to mamp.info and click on the ⬇️ Free Download button. Wait for download to complete and install on your computer as usual.

Now that you have installed MAMP. It is time to Install WordPress on your local machine. Which takes us to the next step.

6. Install WordPress

Installing WordPress is a little bit tricky for beginners because the process is not the same on Windows and Mac. This is due to the varying directory structure on both OS, and maybe the subtle differences between the MAMP UI on both platforms.

  1. Go to wordpress.org/download and scroll down until you see the Download Wordpress button.
  2. Download the WordPress .zip archive by clicking on the button.

Follow the guide below for a step by step installation of WordPress for your OS;

7. Generate Static HTML Files From WordPress

There are a few other plugins that can do this, but I found the Simply Static plugin to be very straightforward.

From your WordPress Admin

Search for “ Simply Static”. Install and activate it.

Copy the directory path of your repo and paste it as shown in the screenshot below;

Click Save Changes.

Now, Simply Static > Generate then click Generate Static Files

If all goes well, your static WordPress site will be exported as static HTML pages in the repo folder path.

Good! now, Launch Github Desktop, Commit and Push the changes to your Github Repo as shown in the screenshots below;

Step 1 — Click Commit to main (or sometimes, commit to master)

Step 2 — Publish Branch

Now, it is time to covert our repo from just an ordinary repo to Github Pages. To do this, go to https://github.com, make sure you are logged in with your account as usual.

Click on the repo we have been working on, then click on Settings > Pages. Set your Github Pages branch to Main as shown in the screenshot below;

Click Save.

A link would be autogenerated for you something like https://you.github.io/yourrepo.

Our website will not work until we complete the final step below 👇🏾, so you have to be a little bit patient here.

Github Setup

This part explains how to connect your Namecheap domain to a GitHub Pages repository in GitHub.

Be sure you are on the Pages settings of your repository. ( Choose Repo > Settings > Pages)

In the Custom Domain box, enter the domain you registered with Namecheap, and click Save.

Namecheap Setup

Login to your Namecheap account.

Navigate to the Domain List and click on Manage to the far right of your domain name.

From there, click on the Advanced DNS tab. Click Add New Record to add each of the following five records:

Credit: https://branditechture.com

TIP: If you think it would be easier for you to copy and paste the above details, please click here.

Click Save All Changes and delete any additional records that may conflict with those you’ve just entered.

Please give approximately 30 minutes for the changes to go into effect.

Congratulations! You have just successfully deployed a static WordPress Website with a custom domain, free forever on Github Pages!

You should now be able to access your static website from your custom domain.

Originally published at https://branditechture.com on September 4, 2021.

--

--

Branditechture is a full-experience design and PR agency. Since 2014, we’ve been building successful brands from scratch and promoting real challenger brands.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Branditechture Design Agency

Branditechture is a full-experience design and PR agency. Since 2014, we’ve been building successful brands from scratch and promoting real challenger brands.