Quick Start

Learn to create a Hugo FixIt site in minutes.

In this tutorial you will:

1. Create a site
2. Add content
3. Configure the site
4. Publish the site

Prerequisites

Before you begin this tutorial you must install:

1. Hugo (extended edition, v0.161.0 or later)
2. Dart Sass
3. Git

You must also be comfortable working from the command line.

Create a Site

Commands

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

1

hugo version

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

1
2
3
4
5
6

hugo new site my-blog
cd my-blog
git init
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
echo "theme = 'FixIt'" >> 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 my-blog directory.

1

hugo new site my-blog

Change the current directory to the root of your project.

1

cd my-blog

Initialize an empty Git repository in the current directory.

1

git init

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

1

git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt

Append a line to the site configuration file, indicating the current theme.

1

echo "theme = 'FixIt'" >> hugo.toml

Start Hugo’s development server to view the site.

1

hugo server

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

Necessary Configuration

To fully utilize all the features of the FixIt theme, add the following content to the site configuration file.

1
2
3
4
5
6
7
8

[markup]
_merge = "shallow"

[outputs]
_merge = "shallow"

[taxonomies]
_merge = "shallow"

The above configuration inherits the markup, outputs, and taxonomies configurations of the FixIt theme.

Add Content

Add a new page to your site.

1

hugo new content posts/my-first-post.md

Hugo created the file in the content/posts directory. Open the file with your editor.

1
2
3
4
5
6

---
title: My First Post
date: 2024-03-01T17:10:04+08: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.

1
2
3
4
5
6
7
8

---
title: My First Post
date: 2024-03-01T17:10:04+08:00
draft: true
# ...
---

A blog (a truncation of "weblog") is an informational website published on the World Wide Web consisting of discrete, often informal diary-style text entries (posts). Posts are typically displayed in reverse chronological order so that the most recent post appears first, at the top of the web page. Until 2009, blogs were usually the work of a single individual,[citation needed] occasionally of a small group, and often covered a single subject or topic. In the 2010s, "multi-author blogs" (MABs) emerged, featuring the writing of multiple authors and sometimes professionally edited. MABs from newspapers, other media outlets, universities, think tanks, advocacy groups, and similar institutions account for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into the news media. Blog can also be used as a verb, meaning to maintain or add content to a blog.

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.

1
2
3

hugo server --buildDrafts
hugo server -D
hugo server -D --disableFastRender

Since the theme use .Store in Hugo to implement some features, it is highly recommended that you add --disableFastRender parameter.

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.

Favicon Generation

It is recommended to put your own favicons, browserconfig.xml and site.webmanifest files into the /static directory.

• android-chrome-192x192.png
• android-chrome-512x512.png
• apple-touch-icon.png
• browserconfig.xml
• favicon-32x32.png
• favicon-16x16.png
• favicon.ico
• mstile-150x150.png
• safari-pinned-tab.svg

They’re easily created via https://realfavicongenerator.net/.

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.

1

hugo

Most of our users deploy their sites using a CI/CD workflow, where a push¹ to their GitHub or GitLab repository triggers a build and deployment. Popular providers include Vercel², Netlify³, AWS Amplify, CloudCannon, Cloudflare Pages, GitHub Pages and GitLab Pages.

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

Documentation Guide

We strongly recommend that you read the full documentation for the FixIt theme to better understand how to use it.

Ask for help

if you encounter any problems or have any questions, please go to our community for help.