Once you have installed Hugo and verified the installation, you are ready to build your site with Hugo. Refer to our previous article How to install Hugo for installation instructions and verification in various operating systems.
Create a New Site with Hugo
To start your Hugo project, create a new site using the command below:
hugo new site <sitename>
For example to create a new site testsite
hugo new site testsite
Add a theme
Hugo does not come with a default theme. To see the list of available themes visit Hugo Themes
To add a theme you may use git. In this example we are going to add the theme called ananke. Naviagate to your project folder.
cd testsite git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
All your themes reside in the themes directory of your project. If you navigate to themes folder now, you will find ananke. Adding any other theme is similar. To add "bleak" theme
git submodule add https://github.com/Zenithar/hugo-theme-bleak.git themes/bleak
Activate a theme
The config.toml file holds the configuration of your site. By default it looks like
baseURL = "http://example.org/" languageCode = "en-us" title = "My New Hugo Site"
To activate a theme, open the config.toml file in a text editor and add the line
theme = "ananke"
Now you can run the builtin server to see your new site. To run the server run the command:
hugo server
This server listens on port 1313. So you may visit localhost:1313 in your browser to see your site running the new theme.
Customize your theme
The main config file for your site is config.toml. To make configuration changes open this file in text editor and make changes. For example to change the title to "New Title"
title = "New Title"
Hugo server by default uses livereload via JavaScript. A file called livereload.js is included by default between <body> and </body> tags. So whenever you make a change and save it, the page refreshes by itself. This is very useful in development environment because you can see you changes as you make them live in another window. This option can be disabled by running hugo server with --disableLiveReload flag.
Themes usually have theme based customization options. For example ananke theme includes a sample config.toml file that you can copy from themes/ananke/exampleSite to the root of your project. The sample config.toml for ananke theme looks like below:
title = "Notre-Dame de Paris" baseURL = "https://example.com" languageCode = "en-us" theme = "gohugo-theme-ananke" themesDir = "../.." MetaDataFormat = "yaml" DefaultContentLanguage = "en" SectionPagesMenu = "main" Paginate = 3 # this is set low for demonstrating with dummy content. Set to a higher number googleAnalytics = "" enableRobotsTXT = true [sitemap] changefreq = "monthly" priority = 0.5 filename = "sitemap.xml" [params] favicon = "" description = "The last theme you'll ever need. Maybe." facebook = "" twitter = "https://twitter.com/GoHugoIO" instagram = "" youtube = "" github = "" linkedin = "" # choose a background color from : http://tachyons.io/docs/themes/skins/ and preface it with "bg-" background_color_class = "bg-black" featured_image = "/images/gohugo-default-sample-hero-image.jpg" recent_posts_number = 2
Remove the line themesDir = "../.." and change the line theme = "gohugo-theme-ananke" to theme = "ananke".
In addition to customizing the title, you can change background_color_class, featured_image, recent_posts_number etc.
Add new post
Contents are stored in files, written in simple markdown language. To create a post:
hugo new posts/first-post.md
This creates a file in contentpostsfirst-post.md with the following default content
--- title: "First Post" date: 2018-01-29T14:15:22Z draft: true ---
This is just a text file in markdown syntax. Hugo supports markdown, html or both combined. You may save your content as html (.html) or markdown (.md) format. This is now a draft. To see the draft just restart the server with drafts enabled. Press Ctrl + C to stop the server. Start it again with drafts enabled:
hugo server -D
You can now see your first post.
