Getting Started

2023-02-20 2023-03-24 About 900 words 5 minutes - views

Contents

Warning

This article was last updated on 2023-03-24, the content may be out of date.

Learn to create a Hugo FixIt site in minutes.

The following steps are here to help you initialize your new website. If you don’t know Hugo at all, we strongly suggest you learn more about it by following this great documentation for beginners. Or if you already know Hugo, you can start directly with a template:

Prerequisites

Thanks to the simplicity of Hugo, Hugo is the only dependency of this theme.

Just install latest version of Hugo extended edition(>= 0.109.0) for your machine (macOS, Linux, Windows, BSD, and any machine that can run the Go compiler tool chain).

Create a Site

Hugo provides a new command to create a new website:

1
2
hugo new site my_website
cd my_website

Install the Theme

The repository of FixIt theme https://github.com/hugo-fixit/FixIt

Initialize an empty Git repository in the current directory.

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

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

And later you can update the submodule in your site directory to the latest commit using this command:

1
git submodule update --remote --merge

Basic Configuration

The following is a basic configuration for the FixIt theme:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
title = "My Hugo FixIt Site"
baseURL = "http://example.org/"
# determines default content language ["en", "zh-cn", "fr", "pl", ...]
defaultContentLanguage = "en"
# language code ["en", "zh-CN", "fr", "pl", ...]
languageCode = "en"

# Change the default theme to be use when building the site with Hugo
theme = "FixIt"

[params]
  # FixIt theme version
  version = "0.2.X"

[menu]
  [[menu.main]]
    identifier = "posts"
    name = "Posts"
    url = "/posts/"
    weight = 1
  [[menu.main]]
    identifier = "categories"
    name = "Categories"
    url = "/categories/"
    title = ""
    weight = 2
  [[menu.main]]
    identifier = "tags"
    name = "Tags"
    url = "/tags/"
    weight = 3

# Markup related configuration in Hugo
[markup]
  # Syntax Highlighting (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false is a necessary configuration (https://github.com/hugo-fixit/FixIt/issues/43)
    noClasses = false

Add Content

Here is the way to create your first post:

1
hugo new posts/first_post.md

Hugo created the post file in the content/posts directory.

Open it with your editor and feel free to edit it by adding some sample content and replacing the title value in the beginning of the file.

1
2
3
4
5
6
7
---
title: My First Post
date: 2023-02-20T20:14:22+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.

Note

By default all posts and pages are created as a draft. If you want to render these pages, remove the property draft: true from the metadata, set the property draft: false or add -D/--buildDrafts parameter to hugo command in the following steps.

Launching the Site

Save the file, then launch the website locally by using the following command:

1
hugo server

Tip

When you run hugo server, when the contents of the files change, the page automatically refreshes with the changes.

Note

Since the theme use .Scratch in Hugo to implement some features, it is highly recommended that you add --disableFastRender parameter to hugo server command for the live preview of the page you are editing.

1
hugo server --disableFastRender

Go to http://localhost:1313.

Build the Site

When your site is ready to deploy, run the following command:

1
hugo

A public folder will be generated, containing all static content and assets for your website. It can now be deployed on any web server.

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.

Learn more in the hosting and deployment section.

Ask for help

All feedback is welcome! Head over to the issues or discussions tracker.

The Git repository contains the entire project directory, typically excluding the public directory because the site is built after the push. ↩︎
How to Deploy a Hugo Site with Vercel ↩︎
Hugo on Netlify ↩︎

Buy me a coffee~

Donate

Alipay

WeChat Pay