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.
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.
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.
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.
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.
Once the DNS changes have propagated from the NameCheap registrar you’re CloudFlare interface should look like this below.
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.
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.