How Hugo and Cloudflare can make your website blazingly fast for Free⌗

I will provide a brief overview of the benefits of using Hugo and Cloudflare Pages to create a fast and secure website. Following that, I present a step-by-step guide on setting up Hugo, a static website generator, and publishing your first website live.

Contents⌗

Page 1:

  • Introduction
  • Hugo who?
  • What is a Cloudflare?
  • Sneak Peek

Page 2:

  • Benefits of using Hugo and Cloudflare pages
  • How to set up Hugo
    1. install prerequisites
    2. install Hugo
    3. run your Website
    4. Take your Time exploring!

Page 3:

  • Create your first Blogpost
  • Host on Cloudflare CDN for Free

Page 4:

  • Gotta go fast!
  • My Conclusion

Benefits of using Hugo and Cloudflare pages⌗

In the realm of website performance, it is crucial to ensure that your page loads quickly and efficiently. No user wants to be left waiting for content for more than a few seconds - browsing should be seamless! In today’s competitive digital landscape, having a fast-loading site can make all the difference in keeping up with rivals. So prioritize speed and optimize your web pages accordingly! This is where Hugo and Cloudflare come in. Both of these tools can help you make your website blazingly fast for free!

Hugo is a static-site generator that provides an efficient way to create content-rich websites without worrying about server-side rendering or dynamic content. It helps you quickly create complex HTML pages with just a few lines of code. Hugo also helps you minimize the total number of requests needed to render a page and automatically minifies HTML, CSS, and JavaScript files to reduce their size. With Hugo, you can easily create blazingly fast websites without spending any money!

Cloudflare Pages is a static web hosting platform powered by Cloudflare’s global network of edge servers. It provides lightning-fast performance and scalability, allowing your website to handle high levels of traffic with no additional cost or effort. Cloudflare Pages also handles caching efficiently so that your site loads faster every time someone visits it. Moreover, it offers features like DNS management, SSL certificates, and more so that you can manage your web hosting needs without any hassle.

By combining Hugo and Cloudflare Pages, you can easily create fast and secure webpages for free. Hugo helps create efficient HTML pages, while Cloudflare Pages ensures lightning-fast performance and scalability across the globe. Together, they make an unbeatable combination when it comes to creating fast websites with minimal effort and cost! So if you want your website to be blazingly fast while staying on budget, then consider using Hugo and Cloudflare Pages together!

How to set up Hugo⌗

As a preface: I use a Windows system on a daily basis (feel free to think what you want). Therefore, this write-up will focus on the installation of Windows.

install prerequisites⌗

Before installing Hugo we have to assure the prerequisites are installed. In this case we only need:

  • Git
  • Golang

Installation of Git:

This is pretty straightforward. Let’s break it down in 3 fast steps:

  1. visit the official download page of Git https://git-scm.com/download/win
  2. download the appropriate version for you, most likeley it is going to be “64-bit for Windows Setup”
  3. Install using the installer.

Although Git is an extremely useful tool to have in your toolkit, we will not go into detail on using Git today. So if you haven’t already explored Git thoroughly, we recommend checking out the great videos by Fireship. He is amazing! Check out his fast description of Git: Git Explained in 100 Seconds

So lets go ahead and install Golang:

  1. Visit the installation section of the Go (Golang) documentation. You can find it here: “https://go.dev/doc/install"
  2. Download the installer by clicking on the prominently placed “Download” button.
  3. Once the installer has finished downloading, run it to install Golang.

Easy Peasy Lemon Sqeezy.

Install Hugo⌗

Great, now that we have Go installed, we can proceed to install Hugo using precompiled binaries:

  • Download the appropriate version of Hugo for your system from here: https://github.com/gohugoio/hugo/releases/tag/v0.111.2
  • If you are using Windows, download one of the zip files and extract it to a location of your choice.
  • After extracting the zip file, we need to copy the resulting folder to a location where we want to store our Hugo installation. For example, we can choose to copy it to “C:\hugo”. This will result in the following directory structure:
C:\HUGO
└───\hugo_0.111.2_windows-amd64
        hugo.exe
        LICENSE
        README.md
  • To complete the installation, we need to add the installation path to the PATH environment variable.
  • “Win+R” → “SystemPropertiesAdvanced” → klick “Environmentvariables”-Button use the second list “Systemvariables” to scroll and find “path” → select it.
  • Click on “Edit” and then click on “New” on the right-hand side.
  • Enter the installation path which, for me, is “C:\hugo\hugo_0.111.2_windows-amd64”, and then click the “OK” button to confirm. After that, we can open a terminal and type “hugo version” to confirm that our installation was successful.
> hugo version
hugo v0.111.2-4164f8fef9d71f50ef3962897e319ab6219a1dad windows/amd64 BuildDate=2023-03-05T12:32:20Z VendorInfo=gohugoio

run your Website⌗

Great, now we are going to initialize our website project and run it for the first time!

  • Open a terminal (im using Powershell)
  • To initialize our project, we need to run the command ‘hugo new site my-website’, where “my-website” is the name of our project.
  • We can open our project folder using the command ‘cd .\my-website’.
  • Before we can start our server for the first time, we need to teach Hugo on how to build our website.
  • To do this, we first need to choose a theme. I will choose Binario for this example, but you can find a theme that suits your needs from here! Once you have chosen a theme, we can install it using Git with the following command:
> git init
git submodule add https://github.com/Vimux/Binario themes/Binario

By running the above command, we instructed Git to initialize a repository for our project and downloaded the Hugo-Scroll theme into the “themes/Binario” folder.

After this we have a theme, but no content. Lets change that!

  • Navigate to “/themes/Binario/exampleSite/” and copy all its contents to the root of your project. Now we are ready to run the server for the first time!
  • To do this, open your terminal and navigate to the root of your project folder. Once you are there, run the command ‘hugo server’.
> hugo server
Start building sites …
hugo v0.111.2-4164f8fef9d71f50ef3962897e319ab6219a1dad windows/amd64 BuildDate=2023-03-05T12:32:20Z VendorInfo=gohugoio


                   | EN
-------------------+------
  Pages            |   7
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 162
  Processed images |   0
  Aliases          |   0
  Sitemaps         |   1
  Cleaned          |   0


Built in 176 ms
Watching for changes in C:\Users\user\my-website\{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in C:\Users\user\my-website\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Once we run the command ‘hugo server’, we will see some stats related to our website in the terminal. As we read on, we can find the address we can use to access our web server. By default, it is “http://localhost:1313/”, where “localhost” refers to your local machine.

  • Now that we have the address, open any web browser and enter it into the address bar. This will allow you to access your newly created website and see it live!

Take your Time exploring!⌗

Before we move on to writing our first blog post on the next page, I want to give you a brief overview of some of the functionalities of Hugo. If you look inside the “content” folder of your project, you can see the example pages that were used in this tutorial, along with their structure.

Markdown files (files with the “.md” extension) located in the “content” folder of your project will be available at “https://localhost:1313/filename/” where “filename” refers to the name of the markdown file without the “.md” extension.

Organizing your posts in folders within the “content” directory will result in your post being available at “https://localhost:1313/foldername/postname/” where “foldername” refers to the name of the folder containing the post and “postname” refers to the name of the markdown file without the “.md” extension.

So, the ‘content’ folder represents the actual address structure of your website, just a little something to keep in mind.

Now, take a moment and look at your website again. If you have chosen Binario as your theme, you can now see several posts about things you can do out of the box. Examples include, but are not limited to: headings, formatting, tables, and even math visualization.

There are plenty of things to explore and experiment with while I prepare the next page of my write-up. I look forward to continuing our journey together!

Page 3 will be published on 1st APR 2023