Hugo Site Created | Mathisen's Place

Table of Contents

Welcome to Your First Post

Welcome to my first post! The first post i will do is an tutorial on how you can setup a site like this if you want.

Why Choose Hugo?

Hugo is an incredibly fast static site generator that allows you to easily create a website and manage content. It’s efficient, flexible, and works well for personal blogs and websites.

How to Set Up a Hugo Site

This step-by-step guide will help you set up your own Hugo website, even if you’re a complete beginner.

Step 1: Install Hugo

To install Hugo, follow the steps based on your operating system:

macOS:

You can install Hugo using Homebrew:

brew install hugo

Linux:

On most Linux distributions, Hugo can be installed with the package manager or by downloading the binary from the Hugo releases page.

For example:

Ubuntu/Debian-based systems:

sudo apt-get update
sudo apt-get install hugo

Arch Linux:
```
sudo pacman -S hugo
```
Fedora:
```
sudo dnf install hugo
```

Windows:

On Windows, the easiest way to install Hugo is by using Chocolatey:

choco install hugo -confirm

Alternatively, download the Windows binary from the Hugo releases page.

Step 2: Create a New Site

Once Hugo is installed, create a new site by running the following command in your terminal or command prompt:

hugo new site my-website

This will create a new directory called my-website with the basic Hugo structure.

Step 3: Add a Theme

To give your site a nice look, add a theme. Browse through Hugo Themes to find one you like. For this tutorial, let’s choose the Ananke theme.

Navigate to your project folder and add the theme as a Git submodule:

cd my-website
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Then, activate the theme by editing the config.toml file:

theme = "ananke"

Step 4: Create Your First Post

Use this command to create your first blog post:

hugo new posts/my-first-post.md

This will create a new Markdown file in the content/posts/ directory. Open the file and start writing your content.

Step 5: Start the Development Server

To see your site locally, run the Hugo server:

hugo server

You’ll see an output similar to:

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Open your browser and go to http://localhost:1313/ to view your site.

Step 6: Build and Deploy

When you’re ready to deploy, generate the static files by running:

hugo

This will create a public/ directory with all the files needed to deploy your site on a web server or a hosting service like GitHub Pages, Netlify, or Vercel.

Step 7: Deploying to GitHub Pages (Optional)

If you want to deploy your site to GitHub Pages, follow these steps:

Initialize a Git Repository:
```
cd my-website
git init
```

Add All Files and Commit:

git add .
git commit -m "Initial commit"

Create a Repository on GitHub:

Go to GitHub and create a new repository named my-website.

Add Remote Origin and Push:

git remote add origin https://github.com/your-username/my-website.git
git push -u origin master

Deploy with GitHub Actions:

Set up GitHub Actions to automatically build and deploy your site when you push changes. You can use the Hugo Setup Action for this purpose.

That’s it! Now you have a basic Hugo website up and running. You can customize it further by exploring more themes, adding new content, and tweaking configurations. Happy coding!