3 minutes
Starting with Hugo: My tl;dr Notes
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.
Why 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.
Step-by-step Guide:
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.
4. Deploy
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.
Hugo website-development static-site-generator tutorial quick-start markdown deployment
482 Words
2023-08-07 14:18