Quick Start

💡

I assume you have already read Hugo Getting Started, this can help you to get an overview of Hugo and understand this guide better.

Introduction

Dream is a Hugo theme. I build it for my blog.

The main features are Masonry Layout Posts and Flippable About Page.

Dream also supports light and dark mode out of the box.

Screenshot

For people who prefer a simple and clean interface, Dream has a Zen mode. It is more concentrated on reading and writing.

Zen Mode

Installation

Go into your site folder:

mkdir -p themes && cd themes
git clone https://github.com/g1eny0ung/hugo-theme-dream.git dream

Create configuration file

Create hugo.toml if it doesn’t exist in your site folder, and then enable Dream by adding:

theme = "dream"

💡

If you are cloning the theme with another name, replace dream with the name you cloned.

For example, if you cloned the theme with the name my-dream, you should write theme = "my-dream".

You can download and use this default configuration file. It contains all params used in Dream.

Default or Zen Mode

Dream has two out-of-the-box modes: Default and Zen.

Default mode will display your posts in a masonry layout.

Zen mode will display your posts in a single column layout. It is more suitable for people who prefer a simple and clean interface. And it is more concentrated on reading and writing.

Here is a demo of the Zen mode: https://g1en-site-zen-mode-preview.netlify.app/.

You can enable Zen mode by adding zenMode = true to the configuration file.

[params]
zenMode = true

View Zen Mode for more details.

Set language for your site

Open hugo.toml and write:

defaultContentLanguage = "en"

View i18n for support languages and more details.

Website Analytics

Dream support Google Analytics for website analytics.

In hugo.toml, set:

[services]
[services.googleAnalytics]
ID = "..."

⚠️

You may have used googleAnalytics = "..." before. This is deprecated in Hugo 0.120.0.

Please upgrade to the new configuration. See https://gohugo.io/methods/site/googleanalytics/ for more details.

Dream can use Disqus for social comments.

In hugo.toml, set:

[services]
[services.disqus]
shortname = "..."

⚠️

You may have used disqusShortname = "..." before. This is deprecated in Hugo 0.120.0.

Please upgrade to the new configuration. See https://gohugo.io/methods/site/disqusshortname/ for more details.

🚫

Currently, Disqus does not support oklch colors which is used in Dream. We need to make an extra hack to make it work. See Compatible with oklch colors for more details.

For more social comment systems, view Social Comments.

Add “About Me”

Type below command in your terminal:

hugo new about/me.md

Write somethings about you:

---
title: About Me
---
 
Hi, my name is Yue Yang.
 
This is my blog.

Then create an index.md in the content/about folder and put below contents into it:

---
headless: true
---

You will then see About in the top right navagation bar. Click it to view your about page.

Write your first article

All of your posts must in the content/posts folder.

You can generate it with:

hugo new posts/article-title.md

The default content of article-title.md is:

---
title: {{ replace .TranslationBaseName "-" " " | title }}
date: {{ .Date }}
lastmod: {{ .Date }}
author: Author Name
# avatar: /img/author.jpg
# authorlink: https://author.site
cover: /img/cover.jpg
# images:
#   - /img/cover.jpg
categories:
  - category1
tags:
  - tag1
  - tag2
# nolastmod: true
draft: true
---
 
Cut out summary from your post content here.
 
<!--more-->
 
The remaining content of your post.

This is the default template of a post.

For a quick start, you can leave the default content as it is. Only remove draft: true to publish your post.

For previewing your post, run:

hugo server -D

in your blog folder, the -D represent to build draft posts.

End

View more details and configurations on the left sidebar.

Wish you a happy journey with 🌱 Dream!

Base Configurations