Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 10, 2022 12:41 am GMT

Getting set up with Hugo

By Mike Neumegen

Brought to you by CloudCannon, the Git-based CMS for Hugo.

Welcome to this introduction to Hugo tutorial. The goal of this series is to take you from a lion cub with basic web design knowledge to creating your first Hugo website. In this series youll learn how to set up a Hugo site, the basics of usingHugo layouts, partials, and templating, set up a blog, and finally use data files. By the end of this series youll have the foundational knowledge to build your own Hugo sites.

Lets get into your first lesson.

What is Hugo?

Hugo is a static site generator. It takes a directory of source files and runs a build process over them to generate a purely static website.

What makes Hugo unique is its unparalleled build speeds and strict conventions around layouts, taxonomies, and content. Its a static site generator that powers high profile websites such as Lets Encrypt, 1Password, Linode, and digital.gov.

Installing Hugo

Hugo is one of the simplest static site generators to install as its distributed as a single binary one of the many perks of a Go program.

If youre using macOS or Linux, then Homebrew is the easiest way to install Hugo. Once you have Homebrew installed, you can run:

    brew install hugo

If youre on Windows, then the Chocolatey package manager is the way to go. Once Chocolatey is installed, run:

    choco install hugo-extended -confirm

Lets triple check that all went to plan. In your terminal check the Hugo version:

    hugo version

If that printed out a version number, youre good to go! If not, consult the Hugo documentation or reach out on the Hugo community forums.

Set up your Hugo site

In your terminal, navigate to the directory where you want your Hugo project to live in you and run this command:

    hugo new site my-first-hugo-site

Hugo will set up the scaffolding for your site. Open up your site in your favorite code editor and poke through the contents.

Youll see a number of directories that probably dont mean anything to you at this stage. Ill give a brief explanation of each one but dont fret if you dont understand them right now. Well be using them over the course of this tutorial which will build familiarity.

  • archetypes - defines default metadata (also known as front matter) for new content. You dont need to worry about archetypes for this series.
  • config.toml - the configuration file for your soon-to-be flourishing Hugo site.
  • content - your (typically markdown) content for pages lives here.
  • data - csv, json, xml or toml files that can be accessed like a read-only database.
  • layouts - the page templates for your content.
  • static - all of your assets that dont need processing (often images, fonts, pdfs etc.)
  • themes - Jumpstart your Hugo site with an existing theme. (We wont be using themes in this series.)

Whats next?

Stay tuned for the next lesson where well learn the basics of Hugo layouts.


Original Link: https://dev.to/cloudcannon/getting-set-up-with-hugo-2c0p

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To