Create a static website with Hugo and Host it with Github Pages

Introduction

Static websites like online resume or blog sites can be created using HTML, CSS, and JavaScript if you are a front-end developer. However, it can be a bit of a headache for people who are not familiar with these technologies. More importantly, if you are creating a blog site, it’s difficult to maintain uniformity in all its pages. I am going to describe how we can create a static website without the need for such technologies.

Tools Used

• Hugo: A fast and modern static website engine
• Any text editor of your choice. I prefer VS Code

Getting Started

1. Download and install Hugo. For more details, refer Hugo’s getting started guide.

2. Once Hugo is installed, open a terminal and go to the folder where you want to store the code for your blog or static website

3. Run these commands to create a Hugo site with the LoveIt theme

   Create the directory structure for your project in the quickstart directory.

   1	hugo new site quickstart

   Change the current directory to the root of your project.

   1	cd quickstart

   Initialize an empty Git repository in the current directory.

   1

   git init

   Go to hugo themes and clone a theme of your choice in the themes fodler. I cloned the LoveIt theme into the themes directory, adding it to your project as a Git submodule.

   1	git clone --recurse-submodule git@github.com:horia-delicoti/LoveIt.git themese/LoveIt

   Append a line to the site configuration file, indicating the current theme.

   1	echo "theme = 'LoveIt'" >> config.toml

   Start Hugo’s development server to view the site.

   1	hugo server

   Press Ctrl + C to stop Hugo’s development server.

   Go to http://localhost:1313

4. To create a new blog entry, run hugo command. It will create a file in content/post/ folder

   1	hugo new post/<blog-file-name>.md

5. Open the newly created file in the text editor of your choice and start drafting the blog

6. Once you are done drafting the content, delete the contents of public folder and run hugo command to regenerate the files

7. Create a repo on Github and check in the content of the public folder

8. To publish on GitHub Pages, follow here. If you want to use a custom domain, please follow this.

References

• Hugo
• VS Code
• Using a custom domain with github pages