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

TIP: If you want to see a full list of the advantages of using static websites, quickly glance through this post and come back here.

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.

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.

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.

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.

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. Download the WordPress .zip archive by clicking on the button.
TIP: You can also use any existing WordPress installation; whether on localhost or on a live server.

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.

⚠️IMPORTANT: If you have been following this tutorial using a web host or a live server, your server may not be able to write directly to your local repo and you would get the error; unable to create destination directory. In this case, you must use the ZIP Archive Delivery Method ( Simply Static > Settings > Delivery Method > ZIP Archive) and manually extract the generated static html and other assets into your local repo folder. If you are using MAMP, ignore this message and continue reading below.
⚠️ The button says"Publish Branch" because we want to publish to an empty Github.com repo. Next time we regenerate our static WordPress file, and want to Push the changes to Github.com, the button won't display Publish Branch, but Push Origin.Don't get confused, they both do the same job of pushing your changes to Github.
⚠️ Clicking on the link may return a Server not found error. Why? Because of the Destination URL settings we had specified in Simply Static in step 7 above before generating our static files. DO NOT PANIC.

Github Setup

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

Note: You may notice a new file called CNAME when you return to your repository's Code tab. This is completely normal, and it occurs after setting a custom domain. The CNAME is a very important file for your custom domain to work with Github. This file will include just one line of code; which is the domain you added in the Custom Domain Box.

Namecheap Setup

Login to your Namecheap account.

Credit: https://branditechture.com

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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 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.