Byte Ebi's Logo

Byte Ebi 🍀

A Bit everyday A Byte every week

Building a Static Website with Hugo

Quickly create a personal website using markdown syntax

Ray

Building a blog and migrating it each time can be a super painful task, especially since every platform has different export formats! Why not build one yourself? Write articles using markdown syntax and then generate a static website.

HUGO is a static website generator written in Go.

Installation

brew install hugo

Verify the installation:

hugo version

Creating a New Website

hugo new site myblog

Adding a Theme

After setting up your blog, of course, you’ll want to choose a theme you like. There are many themes created by others on the official hugo theme website.

One thing to note is that because Hugo is continuously updated, some themes that haven’t been updated for a long time may not be able to use new features due to updates to Hugo or Google Analytics, etc.

For example, using the blowfish theme:

cd myblog
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

Modify the configuration file config.toml to set the default theme:

theme = "blowfish"

Alternatively, you can use the terminal:

echo 'theme = "blowfish"' >> config.toml

First Post

You can use the command:

hugo new posts/first_post.md

Or directly open an editor to create a file. Then, you can start writing your article.

Local Preview

You can preview the site locally using the command:

hugo serve -D

Go to http://localhost:1313 to view the site.

When running hugo serve, the page will automatically update when the content changes.

Deployment

hugo

This will generate a public directory containing all the static content and resources for your website. You can now deploy it to any web server or use GitHub Pages for free hosting.

Recent Posts

Categories

Tags