-
Notifications
You must be signed in to change notification settings - Fork 1
Hugo
Hugo is a framework forbuilding websites. It is an open-source static site generator.
There is a rpmpackage for Fedora to install from CLI.
Hugo’s CLI scaffolds a project directory structure and then takes that single directory and uses it as the input to create a complete website. Running the hugo new site MySite generator from the command line will create a directory structure with the following elements under MySite directory:
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themesCopy the theme in themes/ directory.
The configuration file is /hugo/MySite/config.toml.
This is done with editing the config.toml file.
-
% hugo helpdisplays all basic commands -
% hugorenders your site intopublic/dir and is ready to be deployed to your web server -
% hugo server -Drun a fully functioning web server while simultaneously watching your file system for additions, deletions, or changes. To use directly the command in production, adddisableLiveReload = truein config file, or runhugo server --watch=false.
After running hugo server for local web development, you need to do a final hugo run without the server part of the command to rebuild your site. You may then deploy your site by copying the public/ directory to your production web server.
To start a server that builds draft content, specify a different directory: % hugo server -wDs hugo/docs -d dev
-d is for destination, -w for watch for changes, -s forsource, -D for includent content marked as draft.
When the content is ready for publishing, use the default public/ dir:
% hugo -s hugo/docs
When running hugo new, Hugo create new content files with date,title and draft=true. You can create your own archetypes with custom preconfigured front matter fields as well.
Running hugo new posts/myPost.mdwill create a new content file in content/posts/myPost.md using the first archetype filefound in this order:
archetypes/posts.mdarchetypes/default.mdthemes/my-theme/archtypes/posts.md,default.md
Mandatory.
To install a theme from Hugo gallery:
% cd themes
% git clone URL_TO_THEME
% rm -r THEME/.gitTo create a new theme, run hugo new theme MyTheme.We have created a thetradinghall theme from scratch.
themes/thetradinghall
├── archetypes
│ └── default.md
├── layouts
│ ├── 404.html
│ ├── _default
│ │ ├── baseof.html
│ │ ├── list.html
│ │ └── single.html
│ ├── index.html
│ └── partials
│ ├── footer.html
│ ├── header.html
│ └── head.html
├── LICENSE
├── static
│ ├── css
│ └── js
└── theme.toml
Edit theme.toml and index.html, place the whole thetradinghall folder in the
theme directory of our project.
Run hugo server -D and visit localhost:1313 to see result. Bootstraping a
theme create a layouts/_default/baseof.html. The file includes head.html, header.html,
the main block (index.html) and footer.html. These partials are stored in layouts/partials
and Hugo will insert content of these files.
This can be done:
- via CLI,
hugo -t MyThemeorhugo server -t MyTheme - editing the configuration file:
theme: MyTheme
They are located in the themes/MyTheme/layouts/partials directory. They help to keep the
index.html organized and simple. They allow reuse and modification of code easily. A dot (.) is required as the second argument to give the partial context. The second argument in a partial call is the variable being passed down. When passing the (.), it tells the template receiving the partial to apply the current context.
There are three types of content:
-
home:home content is the content that’s on the homepage
-
list:list pages link to single content pages. They are generally found as the index file in a folder of files.
-
Single: a single page is a content heavy page like a blog post or an article.
Front matter is a list of information that describes attributes about a content page. This could be information like the title of the page, the date that the page was created, the author of the page, or a list of topics the page covers. Front matter allows you to provide this information about each page and use it in layouts and other site elements.Front matter is what we call meta-data.
Front matter can be encoded using three different markup languages, TOML, YAML and JSON. To access page front matter you open and close two sets of curly braces, and access the variable: {{ .Params.Title }}. Params gives you access to all parameters in the front matter, and you can specify which one you want by using it’s name.
When you create a new page using the hugo new command, Hugo automatically populates the page with several front matter attributes. An archetype is basically a template for default front matter. You can create archetype files and when you use the hugo new filename command, that default frontmatter will automatically be included.
Archetypes are an advanced way to structure and power your content pages. To create a new archetype first go to the Archetypes folder at the root of your project folder. Then create a new file called default.toml (archetypes can be created in YAML and JSON too).
Taxonomies are hugo’s way of letting users group content together. Taxonomies allow users to classify their content, and represent relationships in a variety of ways.
Hugo comes with two taxonomies automatically built in, tags and categories. Hugo also gives you the ability to create your own taxonomies. To create a custom taxonomy we have to go into the config.toml file.
To create a new post, run % hugo new posts/first-post.md
The post consists of two sections. The first one is separated by +++. It contains metadata about your post, such as its title. In Hugo, this is called front matter. After the front matter, the article begins.
NOTE: its content is done whith editing the hugo/themes/MyTheme/theme.toml file.
% cat content/posts/first-post.md
---
title: "First Post"
date: 2018-08-05T17:24:13+02:00
draft: true
keywords: []
description: ""
tags: []
categories: []
author: ""
---