Creating Low-cost Websites

17 Aug 2019


This guide aims to provide you with the tools to set up a website for free or at very low cost. While some services appearing in the tutorial may have paid tiers, they never need to be used!

The only thing to really consider consider buying at some point is a custom domain though Google Domains. We’re not paid to recommend them, we’re just familiar with their services and they have reasonable pricing and a nice set of services!

What Tech is Used?

The template sites on the Loam Resources Page are hand-written using Bootstrap and Font Awesome for actual page content. Bootstrap is an open source toolkit that makes things look not as terrible when you resize a page, and provides some nice defaults. Font Awesome, on the other hand, is a sweet way to add professionally designed icons to things! In addition, Google’s Material Design icons and themes occasionally make an appearance.

For hosting, this tutorial uses GitHub Pages. If you don’t like the idea of fiddling with HTML and just want a theme-maker, you can use their built-in one and skip this tutorial entirely. If you’d like Loam to set up the website for you or provide more customized websites with more features, consider checking out our services page or sending us an email to ask about what we can do for you!

Getting Started

To make a website with this tutorial, you’re going to need a GitHub account, but wait, finish reading this paragraph before you make it. You should probably name it something like your name, or something close to your name for the purposes of looking professional, or the name of your organization. yourGitHubUsername.github.io will be how the site appears if you don’t buy a custom URL, so keep that in mind when choosing a name.

Go ahead and make a GitHub repository under the repositories tab on your account page - for testing to make sure it’s set up correctly, make the name yourGitHubUsername.github.io and for ease of use, indicate that you want a ReadMe to be created for you - your site will be live at https://yourname.github.io! You can do this with a differently named repo as well if you wish, you’ll just have to make sure you turn on github pages in the first section below.

All things considered, if you don’t care about a custom URL, you’re done. Just grab one of the example sites and the assets folder and plop them in your own (You can just drag and drop into your repository in a web browser), and you’re good to go!

If you’re after a custom domain tho, carry on! You’ll learn about how to set that up, and a lot more. For this tutorial, gifs will often be demoing the setup of a website called theportfolio.pw, which as the original website for this set of templates!

Configuring GitHub’s side for a custom URL:

Adding a Custom URL

Configuring Google Domains

Setting up Google Domains

Google domains is fast. Like, really fast. Realistically, you can probably navigate to your new site right after setting all that up, so go ahead and test that out in incognito/private browsing mode so that we don’t have old things cached. Worst case, this will take an hour.

HTTPS (Optional, but not really optional)

At this point, we have your domain hosted at github pages. We have a custom domain rerouting HTTP requests. However, there’s no HTTPS going on, and you still need a site. For now, we should get you set up with HTTPS routing.

We’ll be using cloudflare in order to force connections to be HTTPS. They don’t make you pay for an SSL certificate, which is nice.

We’ll start by making an email to use with Cloudflare. This can be done using one of the many free email forwards you get with a custom domain. You can skip the first step if you would prefer to make a different Cloudflare account, or use an existing one.

Setting up HTTPS with Cloudflare part 1

Next, we’re going to be setting up a cloudflare account, and fight out way to the console.

Setting up HTTPS with Cloudflare part 2

Second to last, we’re going to set up an SSL certificate.

Setting up HTTPS with Cloudflare part 3

Finally, we’re going to force everything to be rewritten to HTTPS. Because Security. Also looks professional. Also improves search result rating.

Setting up HTTPS with Cloudflare part 4

In the crypto tab, if the certificate says “active” and if in the overview tab it says “Status: Active” then you’re good to go for HTTPS. Try navigating to your page now! It should say “secure” to the left of the URL.

You’re done! Good work!

Afterthoughts

You’ll need to update information in the template that’s in this repo. A text editor that does color syntax highlighting for HTML is recommended - Something like Sublime Text, Notepad++, Atom, or many others!

If you’re looking to test the website out locally before launching, a local webserver is quite useful. There’s a free, single executable webserver called Mongoose that’s available for download on their website - just plop it in your directory, and double-click to start it! If you’re using it for something professional, you’ll want to pick up a Pro license for $10.





Copyright © 2019-2020 Loam LLC - all rights reserved. Trademarks belong to their respective owners.