How this Website is Made

2020-12-11 web

Introduction

Recently I wanted to try out CloudFlare for web hosting. They just released their new analytics platform to the free tier of their software. I’ve been using AWS CloudFront and S3 buckets to host my static site, but it was slightly complicated to setup and I wanted to see if there was anything easier to use out there which is why I’ve decided to try out CloudFlare.

Hugo

I use the static site generator called Hugo. Here’s marketing from their website. It’s the world’s fastest framework for building websites. Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

I’ve been a fan of Hugo because it makes generating a static site very simple, even for someone like me who does not focus on the web development side of things. Previously I tried using Jekyll, but struggled getting Ruby up and running on my Windows machine, but Hugo works like a charm since it’s just a executable with no dependencies. The source markdown files are hosted on my GitHub] account. All that’s required to build my website is to clone the repository and run the Hugo command.

# download the blog source
git clone https://github.com/Jonathan-Hamberg/blog
git submodule init
git submodule update

Now all that needs to be done is to generate the blog from the source Mark Down files. The whole website was generated in a quick 50 ms and placed in the ./public folder. That’s everything needed for the blog all in one folder.

hugo
Start building sites …

                   | EN
-------------------+------
  Pages            |  92
  Paginator pages  |   4
  Non-page files   |   0
  Static files     | 141
  Processed images |   0
  Aliases          |  33
  Sitemaps         |   1
  Cleaned          |   0

Total in 50 ms

You can test out the development server locally by using the hugo serve command. This is very convenient because it allows you to iteratively modify the website and Hugo will automatically re-load the changes whenever any of the source files change.

NameCheap Domain

The next part of getting a website / blog up and running is buying a domain. I chose the NameCheap Domain registrar because of their simple to use interface. Just go ahead and search the domain that you would like to use for your website and buy it.

Namecheap Registrar Screenshot

This next thing to do after you purchase your domain name is to find your dash board. You’ll need this to point the domain name to whichever web hosting service you choose to host your website on. I’ve chosen CloudFlare for the moment, but I’ve used AWS S3 in the past as well.

NameCheap Dashboard

CloudFlare CDN Server

The next thing to do is setup your web hosting service. This example is going to use CloudFlare which is a CDN and a DDOS protection service. Their original claim to fame was to protect the internet from massive attacks on their websites. They mainly do this by detecting a spike in traffic and them forcing the web clients to wait for a small amount of time before connecting to the website, and they also force the web clients to solve a web Captcha to slow down the bots. That’s most likely not going to be a problem for the average user of their service. I’m just using them because of their free tier of hosting.

Go ahead and create a CloudFlare account and log in to their dashboard. You’ll create a site that will be used to manage your blog / website. Go ahead and name it the same as your domain from NameCheap. The CloudFlare admin page contains instructions on how to setup the DNS to connect the web hosting service with the registrar. This image below shows you where you’ll enter in the DNS entries in the NameCheap dashboard management page.

NameCheap Dashboard

Once the DNS changes have propagated from the NameCheap registrar you’re CloudFlare interface should look like this below.

NameCheap Dashboard

CloudFlare Worker

Now that CloudFlare has been configure to serve your website we need to create something called a CloudFlare worker. A worker is going to be used to serve your html, css, and JavaScript files. To do this we are going to need to install a command line utility wrangler

In the directory that you generated your Hugo files we are going to use wrangler to initialize a CloudFlare worker like this.

# First use the wrangler cli to login to your account.
# This will prompt you to open a web browser to login to your CloudFlare account.
wrangler login

# Go ahead and replace jonathanhamberg with your site.
wrangler init --site jonathanhamberg
Done! New project created /home/jhamberg/src/blog/test/workers-site
   Successfully scaffolded workers site
   Succesfully created a `wrangler.toml`

This initialized a worker for you and created a configuration file called wrangler.toml which should look something like this

# This is the name of your worker from above
name = "jonathanhamberg"
type = "webpack"
# Find your account_id from the CloudFlare managment page.
account_id = "98174f80f28c14508b707853f78a43df"
# The rout tells the worker which paths of your domain name this worker should be used for.
# Because we are serving static files we want the worker to be used for all the files in our
# domain
route = "jonathanhamberg.com/*"
# Find your zone_id from the CloudFlare managment page.
zone_id = "d18ac286e3c72c276f4f9c8dcdac364f"

[site]
# The bucket is the files that you want to upload to CloudFront.
# Specify the public folder since this is where hugo generates the static site.
bucket = "./public"
entry-point = "jonathanhamberg"

Once the configure file is all setup. You just need to publish the worker and html files to CloudFlare. You can do this using the wrangler command like this.

wrangler publish
   Built successfully, built project size is 13 KiB.
   Using namespace for Workers Site "__blog-worker-workers_sites_assets"
   Success
   Uploading site files
   Successfully published your script to
 jonathanhamberg.com/* => stayed the same

You now should have a functioning website that is taking advantage of CloudFlare’s free tier of web hosting.

Conclusion

This article has shown how to create a static website with Hugo, register a domain name from a registrar, and how to host site with CloudFlare workers. Feel free to reach out or leave a comment if this was interesteding or helpful.