Hugo¶
Open-source static site generator based on GoLang
Quick Start Guide¶
Points¶
- Steps to install a theme is provided in the theme's GitHub repo
- Configurations depend upon the theme and are updated in
config.yml
file draft: true
makes a post only available during the development server and it will not be built for the final websitebaseURL
inconfig.yml
is the base URL for your website
Installation¶
Themes¶
Modifying Themes¶
- In the layouts folder, create folders to match the exact path of the file that you want to modify from the theme's layout folder (
themes/themeName/layout
) - Copy the file to that path in the layouts folder and edit it
If we edit the layouts of the theme directly, then the updates will get overwritten if we update the theme
Commands¶
Create a new site¶
With .toml
config file
.yaml
config file
Create a new post¶
This automatically adds front-matter to the created MD fileStart development server¶
Build static files for deployment¶
Folder Structure¶
- Whenever you create a new Hugo site, these folders will be automatically created:
content
- for MD fileslayouts
- to overwrite default theme layoutsstatic
- for static assets like imagesthemes
- contains all the themespublic
- static files are generated when building the site usinghugo
command
Publish to Netlify¶
- We can link the GitHub repo for the site to Netlify to allow for automated deployment when we commit a change to the repo
- Netlify will auto build the site using the
hugo
command and publish the static files generated in thepublic
folder
Setup Steps¶
- Go to Netlify
- Add new site >> Import an existing project >> GitHub
- Select Repo
- Configuration
- Build command:
hugo
- Publish directory:
public
- Build command:
- Click on Deploy
Resources¶
Hugo Tutorial with PaperMod Theme | YouTube
Last updated: 2022-06-05