Creating a website with Hugo turned out to be a breeze. While I designed this platform to share my insights and chronicle my adventures, I’m relying heavily on Hugo’s official quick start guide for this tutorial. For those seeking a concise guide, let’s dive into how to craft a website using Hugo.
Hugo boasts simplicity, speed, security, and ease of use. It’s essentially a Go binary that transforms content written in markdown into static HTML websites. Its swiftness is unparalleled, and as for security – well, it’s only as secure as its hosting environment. Given that it only presents static HTML and assets, Hugo lacks backend vulnerabilities.
1. Install Hugo
The official installation instructions can be found here.
For those in a hurry, here’s a tl;dr:
# Linux sudo pacman -S hugo sudo apt install hugo # ...etc # Mac (or Linux) brew install hugo # Windows choco install hugo-extended # Snap sudo snap install hugo # With Go CGO_ENABLED=1 go install -tags extended github.com/gohugoio/hugo@latest
2. Create a Site
The official step-by-step commands can be found here.
# Creates a new site named "quickstart" hugo new site quickstart cd quickstart git init # Though I'm not usually a fan of git submodules, it simplifies theme # installation and updating. git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke # Set 'ananke' as your theme. The hugo.toml file is central to site # configuration. Your options may vary depending on your chosen theme. echo "theme = 'ananke'" >> hugo.toml # Preview your site live. Use Ctrl+C to stop. hugo server
For a variety of themes, have a look at Hugo’s Official Themes Directory.
3. Add Content
hugo new posts/amazing-post.md vim posts/amazing-post.md
Now, simply write your content in markdown:
--- title: "This post is simply amazing" date: 2023-08-07T14:40:00-08:00 draft: true --- Okay, so there's a little "metadata" header that contains info about your post. That's what's shown above and it's pretty self-explanatory. ## Other than that, it's Just Markdown Markdown is a lightweight markup language designed for plain text formatting. ![Sample Image](http://example.com/path/to/image.jpg) ## Main Content ### Subheading 1 You can **bold** text or _italicize_ it. - Bullet Point 1 - Bullet Point 2 - Nested Bullet Point ### Subheading 2 Embed a link, like to this: [awesome website](http://www.example.com), or incorporate quotes: > Highlight text using blockquotes – perfect for famous quotations or > emphasizing text. ## Code Snippets Markdown can elegantly display code: \```python def hello_world(): print("Hello, world!") \``` Note: I've added backslashes before the triple backticks to prevent them from prematurely terminating the code snippet in this context. When implementing, remember to remove those backslashes.
There are a myriad of deployment options. For a comprehensive list, check Hugo’s official hosting and deployment recommendations.
On a personal note, I’ve hosted all my services with Kubernetes, making it a logical choice for this website too. I’ll soon share a post detailing that process.