DEV Community

Cover image for Hugo in 5 Minutes: How to make a Blog with Hugo Static Site!
deuxly
deuxly

Posted on • Updated on

Hugo in 5 Minutes: How to make a Blog with Hugo Static Site!

Deuxly Sekode

How to easily create a blog using Hugo ? here's a simple tips to start blogging with hugo

Deuxly Hugo

This is just a quick start to make a blog with hugo. If u wanted to see full article of making a hugo blog, u can see in my blog here How to Make a Blog with Hugo, Using Termux in Android

HUGO
Search
Search the Docs
gohugoio
GETTING STARTED
Quick start
Learn to create a Hugo site in minutes.
In this tutorial you will:

Create a site
Add content
Configure the site
Publish the site
Prerequisites
Before you begin this tutorial you must:

Install Hugo (extended edition, v0.112.0 or later)
Install Git
You must also be comfortable working from the command line.

Create a site
Commands
If you are a Windows user:

Do not use the Command Prompt
Do not use Windows PowerShell
Run these commands from PowerShell or a Linux terminal such as WSL or Git Bash
PowerShell and Windows PowerShell are different applications.

Verify that you have installed Hugo v0.112.0 or later.

hugo version
Run these commands to create a Hugo site with the Ananke theme. The next section provides an explanation of each command.

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server
View your site at the URL displayed in your terminal. Press Ctrl + C to stop Hugo’s development server.

Explanation of commands
Create the directory structure for your project in the quickstart directory.

hugo new site quickstart
Change the current directory to the root of your project.

cd quickstart
Initialize an empty Git repository in the current directory.

git init
Clone the Ananke theme into the themes directory, adding it to your project as a Git submodule.

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Append a line to the site configuration file, indicating the current theme.

echo "theme = 'ananke'" >> hugo.toml
Start Hugo’s development server to view the site.

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

Add content
Add a new page to your site.

hugo new content posts/my-first-post.md
Hugo created the file in the content/posts directory. Open the file with your editor.

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++
Notice the draft value in the front matter is true. By default, Hugo does not publish draft content when you build the site. Learn more about draft, future, and expired content.

Add some Markdown to the body of the post, but do not change the draft value.

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

Introduction

This is bold text, and this is emphasized text.

Visit the Hugo website!
Save the file, then start Hugo’s development server to view the site. You can run either of the following commands to include draft content.

hugo server --buildDrafts
hugo server -D
View your site at the URL displayed in your terminal. Keep the development server running as you continue to add and change content.

When satisfied with your new content, set the front matter draft parameter to false.

Hugo’s rendering engine conforms to the CommonMark specification for Markdown. The CommonMark organization provides a useful live testing tool powered by the reference implementation.

Configure the site
With your editor, open the site configuration file (hugo.toml) in the root of your project.

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'
Make the following changes:

Set the baseURL for your production site. This value must begin with the protocol and end with a slash, as shown above.

Set the languageCode to your language and region.

Set the title for your production site.

Start Hugo’s development server to see your changes, remembering to include draft content.

hugo server -D
Most theme authors provide configuration guidelines and options. Make sure to visit your theme’s repository or documentation site for details.

The New Dynamic, authors of the Ananke theme, provide documentation for configuration and usage. They also provide a demonstration site.

Publish the site
In this step you will publish your site, but you will not deploy it.

When you publish your site, Hugo creates the entire static site in the public directory in the root of your project. This includes the HTML files, and assets such as images, CSS files, and JavaScript files.

When you publish your site, you typically do not want to include draft, future, or expired content. The command is simple.

hugo
To learn how to deploy your site, see the hosting and deployment section.

here how to deploy hugo on github

source:

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.