Preface Link to heading

The idea to set up a website originally came from a friend of mine. You can check out his website here. I wanted a platform to share write-ups, stories, guides, and other media related to cybersecurity and information technology.

However, I didn’t want to spend a lot of money to get it running. Although this approach required more effort compared to using a hosting service like Wix, I gained valuable experience from the process. This project allowed me to develop basic skills in website development, technical writing, and web application security.

Requirements Link to heading

  • A GitHub account (free)
  • A Cloudflare account (free)
  • Software to install
    • Git - allows you to push content from your computer
    • Hugo - static website generator:
    • An IDE of your choice - I prefer Visual Studio
  • Optional: a domain
    • These can be purchased for less than a $10 annual fee
    • Cloudflare is a great place to purchase domains because they’re sold at cost

How is this all going to work? Link to heading

This process begins with your website files. These files will be hosted in a GitHub repository, allowing Cloudflare to access them in real-time. With Git installed, you can bypass GitHub’s web interface and manage everything directly from your IDE, making it easier to write and manage content.

Hugo is what generates the actual website. It is fast, flexible, and open-source, making it one of the most popular static website generators.

Cloudflare pages is a way to host static websites. A static website, as opposed to a dynamic one, does not present itself differently to different users. Everyone who goes to your website will see the same thing. It works by first connecting to a GitHub repository (where all the website files are saved), then copying the repository, building the website, and sharing it with the world.

Now let’s get started.

Create GitHub Repository Link to heading

Log into your new GitHub account and create a new repository. It can be public or private, it doesn’t matter really. Once created, clone the repository on your device. To do this, open the command prompt on your device, navigate to the folder where you’d like to clone the repository and enter this command:

git clone <repository URL>

Create a Website Project with Hugo Link to heading

Change your directory to the GitHub repository folder. Once inside, execute the following command to create the website project:

hugo new site <your website name>

Now you will want to choose a theme for your website. There are so many themes from many different creators. A good place to look for a theme is here. Once you select a theme, navigate inside the Hugo project folder and input this command:

cd <your website name>
git init
git submodule add <theme GitHub URL>
echo "theme = '<theme name>'" >> hugo.toml

Edit Website Link to heading

Once these basic files are all created it becomes a bit tedious to edit everything inside the terminal. This is where your IDE comes in. Go ahead and open up your base GitHub repository folder inside your preferred IDE. That way you’re able to visualize the structure of your folders, and edit posts easier.

The first thing you should do here is to edit the hugo.toml file. This is the base configuration for your website. Update, add, or remove any information you need to. For example, you will need to update the title, baseURL, and theme fields.

Once all your basic information looks correct, let’s make a basic hello world post. Input the following command in the terminal to create a new post:

hugo new content posts/hello-world.md

The “.md” just means the file will be in markdown format. This will be how all of your posts are formatted. You can see the new file inside the content > posts folder in your IDE. Open up the file and take a look. The first thing you’ll notice at the top of the page is the frontmatter, this isn’t displayed on the actual website, it’s just data about the page that Hugo uses. Change the title property to the title of ‘Hello World’ and the draft property to either true or false, depending on if you’d like this page to be displayed. The date will be filled in automatically. After the frontmatter section, write whatever you’d like.

Preview Website Link to heading

To make sure your website was built correctly, type the following command in the terminal:

hugo server -D

Now, the terminal should spit out some information, including a website you can visit to see your website preview (via your local host). You could usually just type in the ‘Hugo’ command to do this, but if you’d like to see any changes in real time, this is how. If you’re satisfied with how it looks, put the command ctrl + c in the terminal to exit the preview. Make sure to commit and push the files to your GitHub repository after editing.

Deploy Website Link to heading

Log into your Cloudflare account here and navigate to the Workers & Pages section on the left side of the screen. Select Create Application > Pages > Connect to Git. Log into your GitHub and select the repository with the website files. In the Setup builds and deployments section make sure to select the following options:

  • Framework preset: Hugo
  • Production Branch: main
  • Build command: hugo
  • Build directory: public
  • Environment variable:
    • Add the variable HUGO_VERSION as the second to most recent version of Hugo

Finally, click Save and Deploy, and be sure no errors occur during the build process. Once this is done you won’t have to deploy manually. All you need to do is push new content to the GitHub repository and Cloudflare will rebuild the website automatically.

Optional: Connect Your Domain Link to heading

If you purchased a domain through Cloudflare, you can connect your domain to the website. To do this, click on the project you just created in Cloudflare, then navigate to the Custom Domains tab and connect your domain. Once you link your domain name, allow Cloudflare to update your site’s DNS records as well.

Helpful Resources Link to heading

Here are some resources for further reference if needed: