Own Your Website

A super-simple and FREE way to publish *quality* static websites using GitHub pages.

A photo of a plane lifting off Chiang Mai International Airport shot on Macro Eagle TCS color surveillance film. This was the last frame in a hand-wound roll hence the strange gradients and discolorations. The red dots persist through the film, maybe due to expiration or improper handling.

Note 1: To perform the steps in this article you will need to know how to use GitHub and write or produce HTML.
Note 2: Although this method grants you a HTTPS:// URL, it is not recommended for any websites that collect and store private user information.

A couple of short months ago I wrote: “Own Your Bot” for the Archie.AIpublication here on Medium. Today I’d like you to follow this short guide to help you set up your own FREE static website using no hacks, no shitty builders, with HTTPS, with versioning and with auto-deployment.

No hacks, no shitty builders, with HTTPS, with versions and with auto-deployment.

Step 1/3: GitHub

I’m assuming you own a GitHub account and are familiar with the tool and know how to use it. If not, you can google yourself a tutorial and consider starting with GitHub for Desktop since it has a graphic user interface and doesn’t require experience with command line interface.

Step 1: Go ahead and create your repository.

I’ve created https://github.com/dmitrizzle/SuperSimple as an example repo. It’s open so feel free to have a look.

Step 2/3: Create Your Static Website

I recently picked up React.js so, I’d use something like Gatsby (for blog-type website) or Phenomic to generate HTML, JS & CSS for me.

Of course, you can still hand-code your HTML if you like. In many cases, it’s still a faster, better option. Other options such as generating your static content using any server type on your machine are also great.

Step 2: Create or generate your static website content and keep it on your “master” branch.

Sample web page created with Gatsby

If your tool can generate static build, go ahead and do that.

Note 3: Some tools, like Gatsby, will have all the build static files in /public/folder. You’ll need to rename it to /docs/ to work. Otherwise, keep your index.html in the root of your project.

Step 3/3: Publish Your Static Website on GitHub Pages

You’re almost done. After you got your files onto your GitHub repository online, you’ll need to setup your GitHub pages (here’s another tutorial on how to init your GitHub repo and connect it to github.com).

To that, go to your repository on github.com and click on “Settings” tab, scroll down to “GitHub Pages” and pick a “source” either master branch or master branch /docs folder.

Settings tab on github.com

Settings for your GitHub pages. I used /docs/ because that’s where my static HTML files are.

And that’s it, you’re done!


Bonus Steps

Relative links. I’m using Gatsby to generate this page, however, it doesn’t really like the fact that the above site isn’t hosted in the root folder of the domain. Your generator or hand-built HTML might not like that too. To fix that in Gatsby I went to config.toml and changed the second line to linkPrefix = "/SuperSimple" and then ran $ gatsby build — prefix-linksand then pushed to the GitHub again.

Your custom domain with free SSL. You can do that too if you specify your domain name in the GitHub pages settings panel. You will need to follow a few more steps in order to connect it to your nameserver. After that, you can use CloudFlare’s FREE SSL deal with your custom domain (no affiliation).


However, keep in mind that this SSL certificate will not work with all browsers. It is also not a 100% secure connection, but it might do for something simple like a small blog. CloudFlare will also collect some data from your users (but they promise not to sell or use outside of their scope).

This guide hasn’t been peer reviewed, so it might not be as straight-forward as I felt when I wrote this. I appreciate feedback and comments to make this short guide better.

Update 7/17:

Forgot to add Let’s Encrypt free SSL certificate service (that’s also promising free wildcard certificates in the near future!)