Build Websites with Hugo - Part I

6-minute read
Sharan Katragadda
Website • Hugo
Featured image

My Website Setup

Today, I want to talk to you guys on how I was able to build this website with minimal effort. All I had to do was just buy the domain off of a domain provider such as goDaddy, or NameCheap, and that’s it! As you know, my domain is ksharan.com and I bought it a long time ago. I’ll share with you the step by step process I went through and I hope this article would help you build your own website.

We can generally categorize websites into two sets.

Dynamic Websites

  • Host dynamic content, handle e-commerce and such things.
  • Involves database transactions.
  • Customer portals, tracking activity etc.
  • Example: Amazon, Netflix, Google etc.

Static Websites

  • Mainly for blogging, where the site content doesn’t change much and is mainly for informational purposes only.
  • No database transactions.
  • Highly secure.
  • Low maintenance.
  • Less expensive.
  • All the goodness in the world is here. 😄

My blog ksharan.com, and pretty much all other blogging websites out there, they are static websites (Not counting wordpress)

My setup involves four steps at high-level.

Part - I

  1. Buying a domain.
  2. Building website offline using the Hugo application (No coding expertise needed. I promise!) 😄
  3. Setting up directory structure
  4. Hosting it on local machine

Part - II

  1. Creating a repository on gitLab.com and hosting the website code using gitLab pages.
  2. DNS Configuration.
  3. Obtaining SSL Certificates.

Please refer to the the part II here

Let’s go over these steps one by one…

Buying a Domain

This should be easy, all we have to do is hop onto one of the domain service providers and look for your favorite domain names. Depending on the blog that you are trying to build, your mileage on the cost may vary.

Because mine is primarily for blogging, I could have bought .dev, or .xyz, or anyother less expensive domain to shave the costs. But I got lucky! I was able to grab .com a while back.

Look at the cost per year, per 2 years etc. And this is all the monetary investment you are going to do for the website. Everything else is obtainable with minimal to no cost.

Building website offline using HUGO application

This is where the process gets little interesting! We need to head over to HUGO website and download the application. This will help us setup a offline server and host the website on our local machine, and customize it to our liking before hosting in on the web.

Step 1: Download Hugo Application

Download Hugo application and install it. You can do this two ways, either by executing the .exe files, or by just downloading the portable files off of the release sections.

Windows OS

You can install hugo through the corresponding installation process. Download

Or, just download a ‘release’ from their github webpage and run it. I’m going this route as I don’t want to install applications and I like portable apps so much! 😄

Navigate to Hugo Releases Page on Github and download a compatible release for your machine. I’m running windows, so I got hugo_extended_XXX_Windows-64bit.zip

Extract the release to a directory on your local machine. Create a themes directory if it’s not already there. Under the ’themes’ directory, we’ll be downloading a hugo theme that is appropriate to our blog. See Step #2.

Linux OS (Fedora)

You can install the hugo by executing the below commands.

sudo dnf install hugo

hugo new site <site_name> command will creat a new site for us.

cd <site_name>

Step 2: Download a Theme

Download a theme that you like from the themes directory. Hugo Themes

Look for the ones that are highly customizable and with active community contributions. Once you choose your favorite theme, head over to their github repository and download the corresponding .zip file, or you could git clone it. Do not extract the zip yet! Read Step 2.

If you are familiar with git, you can run git commands to download the repository.

git clone <github repository address>

Directory structure

Your directory structure should look something like shown below. Your theme .zip extract should be under your ’themes’ directory (or if you running git clone, do it under themes dir), and inturn that should be under your ‘hugo’ extracts directory. Now, head over to the themes directory and under the exampleSite, look for config.toml file. The config file holds the key configurations that dictates the presentation of the blog. Let’s copy that and save it to the root directory of the setup.

Here’s how the setup should look like so far. Hope that is right!

--root dir
--|--themes
--|--|--your-theme
--|--.git
--|--.gitignore (optional)
--|--.gitsubmodules (optional)
--|--.gitlab-ci.yml (optional)
--|--hugo.exe (optional and only for windows)
--|--config.toml (copied from the 'themes'-->'your-theme'-->'exampleSite')

Running the website on local machine

At this point the setup is good and we should be able to do a baby launch on our local machine. Run below commands and you should output that shows the no. of files being processed and utimately giving you a link to the localhost https://localhost:1313/. The link should take us to the website.

Windows

Execute the hugo application like so. Do this under the root dir of the project. Make sure your config.toml is available under the root dir.

hugo.exe server

Linux OS (Fedora)

Execute the hugo application like so.

hugo serve

Output

Your successful output should look like so.. It should be comparatively same for both the operating systems, though the output here is from Windows OS.

> .\hugo.exe server
Start building sites …

                   | EN
-------------------+-----
  Pages            | 67
  Paginator pages  |  0
  Non-page files   | 16
  Static files     | 12
  Processed images |  0
  Aliases          | 21
  Sitemaps         |  1
  Cleaned          |  0

Built in 2513 ms
Watching for changes ...
Watching for config changes in \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

Pull up your browser and head over to the localhost link http://localhost:1313/.

At this point your website is up on the local machine. The website will look little rusty and that’s because we need to do configuration changes to suite our needs. You can head over to the config.toml file and start editing it to reflect the changes live.

For the Part - II of the tutorial, look under the posts section. Thanks.

References