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.
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.
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.
- Go to wordpress.org/download and scroll down until you see the Download Wordpress button.
- 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;
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.
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
⚠️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.
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
⚠️ 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.
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.
⚠️ 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.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.
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.
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:
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.
