GoYat

Goyat is a theme for the Hugo static site generator. This my second theme for this tool, built for my own blog.

Goyat is for huGO Yet Another Theme.

This version is not yet finalized: Improvements are planned to stabilize it, and make it easier to use.

You can find a live demo of the theme here. This theme is intended for personal website and blog.

Features

Responsive design,
No sidebar,
Customizable,
Widget based,
Taxonomies: Tags, and series,
Search features,
Contact form (by Netlify),
Piwik Pro integration,
Google WebMaster tool integration,
SEO features

Tools and libraries

The theme is based on

Installation

Goyat is a Hugo theme. So, before installing the theme, you need to

Install Hugo,
and create a new site (procedure).

Then Goyat can be deployed as many other themes, with 3 possible ways:

Git clone
Git submodule
Download ZIP and manual install

Option 1: Git clone

From the root directory of your site,

git clone https://github.com/egeorjon/Goyat themes/Goyat

This method could generate some issues with some hosting platforms, like Netlify.

Option 2: Git submodule (recommended)

From the root directory of your site,

git submodule add https://github.com/egeorjon/Goyat themes/Goyat

This is the method officially supported by Netlify.

Option 3: Download ZIP and manual install

Download the ZIP file, and unpack it into the folder themes/Goyat.

Once the theme is deployed

Edit the file config.toml, and update the first line

theme = "Goyat"

Usage

If you have some content, just start Hugo built-in server to see your site!

hugo server -D

if not, you can get the content from examplesite

cd my-site
cp themes/Goyat/examplesite content
hugo server -D

Then, to see the result, use the following url localhost:1313 in your favorite browser,

Basic configuration

theme                  = "Goyat"
title                  = "< Title of the blog >"
baseURL                = ""       # baseURL set during builds
DefaultContentLanguage = "fr"     # Short language string fr, en,de,es
languageCode           = "fr-FR"  # Full language string fr-FR, en-US, de-DE, ...
Paginate               = 8        # Number of posts per page in the lists of posts
timeout                = 100000   # For the Hugo Engine

[params]
  debugMode            = true # default false. For development environment only. Allow the loading of scripts like Piwik, allow cache, and indexation.
  formatdate           = ":date_medium"         # format of the date you want to use
  brandlogo            = "< path to an image >"   # Logo of the site (root path)
  brandtitle           = "< title of the blog >"   # Title of the site

[Permalinks]
  posts = "/:section/:filename/"

Tests, production, and debug

By default, the theme runs in test mode. For moving to the production mode, you have to set the environment variable HUGO_ENV

export HUGO_ENV=production

if you are not using bash (and/or if you are in a Microsoft Windows environment

SET HUGO_ENV=production

In the Production environment,

Google verification code is enabled,
ROBOTS directive are set to INDEX, FOLLOW,
Piwik is enabled (if the code and url are set, see below)

Even in development / test mode, you can "simulate" the production mode using the debugMode parameter.

[params]
  debugMode = true

Language

Available translations are in the /i18n directory of the theme. Today only english, and frenh are available. You can configure the language modifying the following key, in the site configuration file (usually config.toml).

DefaultContentLanguage = "nn"     # fr, en, de, ...
languageCode           = "nn-NN"  # fr-FR, en-US, de-DE, ...

Date format

By default, the date format is dd-mmm-yyyy everywhere (like 17-Apr-2022). You can configure this format, by using the following in the configuration file:

[params]
  formatdate = "<date layout>"

The date layout string can be either:

Go’s Layout String: The full documentation for the date formats is HERE, or HERE
A custom Hugo layout identifier. See the Hugo's documentation (requires the Hugo versions 0.87.0 and above)

Examples:

[params]
  formatdate = "Jan 2, 2006"
  formatdate = ":date_medium"

will display Apr 19, 2022.

Pagination

You can define the number of posts listed in each page of the lists. In the configuration file config.toml

paginate = "<the number of posts>"  # default 10

Site title / brand

The navigation bar includes the main menu, and the title of the site/blog (the brand). You can fully customize the brand. In the configuration file of the site:

title = "title of the blog"

[params]
  brandlogo  = "the path of the image related to the /static folder"
  brandtitle = "the title of the site"

Examples:

Example 1: Display both logo

[params]
   brandlogo = "img/logo.png"   # The file must be put in the folder /static/img.

Example 2: Display the blog's title

[params]
   brandtitle = "John Doe"

Example 3: Nothing specify

theme = "Goyat"
title = "title of the blog"
[params]
#    ...
#    brandlogo is not specified, nor brandtitle
#    ...

In this case, the theme will display the title of the blog as a brand title.

Shortcodes and markups

The theme provides two shortcodes

Shortcodes	Description
attachments	Display the list of documents attached to the current post
imggallery	Display a photo gallery

Attachments

This shortcode displays a list of documents attached to a post.

Parameters:

Parameter	type	Purpose	Mandatory	Default	Possible values
files	string	relative path to the attachments	Yes
fields	string	list of fields to display	No	icon,title,size	icon,title,filename,size

By default, the shortcode knows only the files' name. If you want to display the title of the files, you have to fill the title in the Front-Matter of the page, like in the following example:

[[resources]]
  src = "attachments/matrice_eisenhower.xlsx"
  title = "Matrice d'Eisenhower sous Excel"
[[resources]]
  src = "attachments/archimate_poster.pdf"
  title = "The Archimate elements"

With the Front Matter above, the syntax of the shortcode could be

{{< attachements file="attachements/*" >}}

and the result will be

imggallery

This shortcode displays a list of images with thumbnails.

Parameters:

Parameter	type	Purpose	Mandatory	Default	Possible values
files	string	relative path to the images	Yes
size	int	size of the thumbnails	No	250	Any numeric value
caption	boolean	Display the caption or not	No	true	1, true: display the caption, 0,false: don't display
overlay	string	Position of the caption	No	bottom	top, bottom or center

Similarly to the attachments shortcode, you can add a title (that will be the caption) to the thumbnails of the gallery. You can also specify if you want to display EXIF data. The following example show the Front-Matter of a page, with 3 galleries, 2 photos in each, and the EXIF data enabled in the second one:

[[resources]]
title = "title 1"
src = "gallery1/photo1.jpg"

[[resources]]
title = "title 2"
src = "gallery1/photo2.jpg"

[[resources]]
title = "title 3"
src = "gallery2/photo4.jpg"

[[resources]]
title = "title 4"
src = "gallery2/photo5.jpg"

[[resources]]
title = "title 5"
src = "gallery3/photo7.jpg"

[[resources]]
title = "title 6"
src = "gallery3/photo8.jpg"

[[resources]]
title = "title 7"
src = "gallery3/photo9.jpg"

The following parameters

{{<imggallery files="gallery2" overlay="center" >}}

will give the following result:

Blockquotes

There is no shortcode for blockquotes, but Goyat takes into account the styles you can provide below the blockquote:

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
{.info | .warning | .error}

The result is

Markups

The theme provides two markups

The first one improves the links design: when you write a link with markdown in your post, like [the link](the url's link), icons are added if the link is an external link, a link to GitHub, or a link to Wikipedia.
The second markup manages the images: a markdown sentence like the following ![image.png](url to the image) will generate a fuilly responsive image in HTML

If in a post you write,

[Example of an external link](link url)

the markup link will generate the following code

<!-- Code of an internal link -->
<a href="#" title="Title of the link">consectetur adipiscing elit</a>

<!-- Code for an external link -->
<a href="#" title="Title of the link" target="_blank" rel="noopener noreferrer">consectetur adipiscing elit <i class="bi-link-45deg"></i></a>

It will give the following result Example of link

About the image : if in a post, you write

![Description of the image](images/markup_link.png "Another description of the image")

the markup will generate the following HTML code:

<figure class="figure-img figure-center">
  <a href="url to the image" title="description of the image">
    <img 
        sizes="(min-width: 883px) 883px,97vw" 
        srcset="<path to 320px width image> 320w,
                <path to 540px width image> 540w,
                <path to 720px width image> 720w,
                <path to the full size image> 883w" 
        class="img-fluid" 
        src="<path to the full size image>" 
        alt="description of the image"
    >
  </a>
  <figcaption>Caption of the image</figcaption>
</figure>

This will be displayed as follow :

URL configuration

This a standard parameter for an Hugo site. Please read the documentation

[Permalinks]
  posts = "/:section/:filename/"

Navigation

You have two ways for configuring the navigation menu (in the top bar). You can start by

  sectionPagesMenu = "main"
  [params]
    mainSections = [ "section 1", "section 2", ... , "section n" ]

The menu will list the sections, and the pages in /content.

You can also customize the menu

[menu]

[[menu.main]]
identifier = "id of the item 1"
name = "Item 1"
url = "/<url of the item 1>"
weight = 10

[[menu.main]]
identifier = "id of the item 2"
name = "Item 2"
url = "/<url of the item 2>"
weight = 20
# ...

The weight field define the order of the item in the list (smaller weights are displayed first).

Example:

[[menu.main]] 
  identifier = "photo"
  name       = "Photography"
  url        = "/photo/"
  weight     = 20

Search configuration

Goyat can manage a search page. The search feature is based on FuseJS.

For configuring the search, you have to

Allow the generation of JSON file
Configure the section in which you want to enable the search

Allow JSON file generation :

[outputs]
  home = [ "HTML", ... , ... , "JSON" ]

For a more accurate search, you can specify the sections in which your posts are, using the mainSection parameter. For example :

[params]
  mainSections = [ "section 1", "section 2", " ... ", "section n" ]

SEO

Goyat proposes a complete list of tags in the head section of each page with metadata, links, and informations used by searchbot, and social medias. The configuration parameters are the following:

[params]
  Description  = " a short description of the site "   # Use to fill meta description. Use as default values, if there is no description in the Front-matter of posts
  Keywords     = " significant keywords of the site"   # Use to fill meta tag. Use as default values, if there is no tag in the Front-matter of posts

  opengraph    = "internal"   # Internal (default Hugo template), theme (the theme's template), or none
  twitterCards = "theme"      # Internal (default Hugo template), theme (the theme's template), or none
  schema       = "theme"      # Internal (default Hugo template), theme (the theme's template), or none

[author]
  name  = " name of the site webmaster "
  email = " email address "

About opengraph, twitter and schema:

By default, Hugo provides internal templates.
The theme Goyat provides its own template, in order to provide additional features.
You can choose to use internal templates, Goyat template by setting theme, internal values.

The authorfield is used to set a meta tag into the headsection.

RSS, Manifest and sitemap

RSS configuration

By default, Hugo provide an internal template for generating the RSS files. The theme Goyat proposes an enhanced version of the RSS template, including images, link to the licence, etc ...

If you want to use

The default Hugo RSS feeds, You have to delete the file /themes/goyat/layout/_default/rss.xml
The Goyat RSS feeds, you have to configure the following parameters

title          = " title of the blog "
LanguageCode   = "fr-fr" # or en-US, ...
copyright      = " copyright sentence " 

[params]
  mainSections = [ "section 1", "section 2", " ... ", "section n" ]
  licenceURL   = " url to the licence you are using "   # Example: https://creativecommons.org/licenses/by-nc/4.0/

[config.services.rss]
  Limit = 5 # max number of posts to be displayed

[author]
  name  = " name of the site webmaster "
  email = " email adress "

Whatever your choice (internal template, or Goyat's template), you have to specify in the file config.toml, where you want to build the RSS feeds. In the following example, the RSS files will be generate for the home page, and each of the sections:

[outputs]
  home    = [ "HTML", "RSS" ]
  section = [ "HTML", "RSS" ]

File site.manifest

Goyat can generate the manifest file of your site. In order to enable this feature, the config.toml file must contain the following parameters:

[mediaTypes]
  [mediaTypes."application/manifest+json"]
    suffixes = [ "webmanifest" ]

[outputFormats]
  [outputFormats.webmanifest]
    baseName    = 'site'
    isPlainText = true
    mediaType   = 'application/manifest+json'
    rel         = "manifest"

[outputs]
  home    = [ "HTML", ..., ... , "webmanifest" ]

With this configuration, Hugo will generate a file site.webmanifest, in the root of the site. Then, the information that will be put into the file, can be tuned with the following parameters:

[params.manifest]
  name            = ""    # Default: Site title
  shortName       = ""    # no default
  lang            = ""    # Default: languageCode
  display         = ""    # Default: browser
  start_url       = ""    # Default: .Site.BaseURL
  theme_color     = ""    # Default: themecolor field in [Params] or #fff
  backgroundColor = ""    # Default: #fff
  description     = ""    # Default: Description field in [Params]
  orientation     = ""    # Default: Portrait
  scope           = ""    # Default: Scope
  favicons        = ""    # Default: /assets/favicons

Sitemap

The theme generates the sitemap.xml. It uses the standard Hugo's template. The configuration can be done with the parameters described in the Hugo's documentation

Example:

[sitemap]
  changefreq = "... ..."   # Daily, weekly, ...
  filename   = "sitemap.xml"
  priority   = 0.5

Favicons

Goyat geneates automaticaly the favicon files.

If you want to setup favicons, you just need to put the file in the folder /static :

Put the icons images into the folder /static/favicons, and put the file favicons.ico, into the folder /static.
Add parameters in the file config.toml file of your site.

The name of the icons

for IOS (apple), must start by apple,
for androit must start by android,
for the legacy browsers with favicon.ico,
for the microsoft operating systems, must start with ms-,

You can configure also an SVG icon (any name with the svg extension).

Example of favicons files:

.
└── static
    ├── favicons.ico
    └── favicons
      ├── android-chrome-192x192.png
      ├── android-chrome-256x256.png
      ├── apple-touch-icon.png
      ├── browserconfig.xml
      ├── favicon-16x16.png
      ├── favicon-32x32.png
      ├── mstile-150x150.png
      └── safari-pinned-tab.svg

Parameters :

[params]
  appName              = "< a short name for your site >"
  safaritabColor       = "< Hex code of a color >"
  mstileColor          = "< Hex code of a color >"
  themeColor           = "< Hex code of a color >"

Configuration of the social media

Follow links

The links « follow-me » can be configured in config.toml, with the following syntax:

[[params.followlinks]]
  id      = "<social media id 1"
  account = "<account id for this social media>"
  weight  = <order>

[[params.followlinks]]
  id      = "<social media id 2"
  account = "<account id for this social media>"
  weight  = <order>

... ...

[[params.followlinks]]
  id      = "<social media id 1"
  account = "<account id for this social media>"
  weight  = <order>

Example:

[[params.followlinks]]
  id      = "rss"
  weight  = 1
[[params.followlinks]]
  id      = "linkedin"
  account = "johndoe"
  weight  = 2
[[params.followlinks]]
  id      = "twitter"
  account = "johndoe"
  weight  = 3
[[params.followlinks]]
  id      = "github"
  account = "jdoe"
  weight  = 4
[[params.followlinks]]
  id      = "facebook"
  account = ""
  weight  = 5
[[params.followlinks]]
  id      = "pinterest"
  account = "doejohn"
  weight  = 6

The list of supported media is

Facebook,
Ttwitter,
Github,
Instagram,
Pinterest,
LinkedIn.

Share links

At the bottom of your posts, you can display a list of « share buttons », using the widget share-links (See section Widget areas)

The syntax to make the media appears is the following

[params.sharelinks]
  [params.sharelinks.media 1]
    id      = "media 1"
    account = "account for the media 1"
    weight  = 1
  [params.sharelinks.media 2]
    id      = "media 2"
    account = "account for the media 2"
    weight  = 2
  [params.sharelinks.media 3]
    id      = "media 3"
    account = "account for the media 3"
    weight  = 3

The weight field define the order of the item in the list (smaller weights are displayed first).

The list of supported media is

email,
Facebook,
Ttwitter,
Pinterest,
LinkedIn,
WhatsApp

Content configuration

Taxonomies, and authors

Goyat supports three taxonomies :

series used to group together, posts speaking about a same topic,
authors used to link posts, and authors.
tags

You have to enable these taxonomies if you want to get all the features of Goyat.

[taxonomies]
serie  = "series"
author = "authors"
tag    = "tags"

Widget areas

Three areas of the blog can be configured with widgets

The homepage itself: the whole home page can be configured with widget
The bottom area of the posts: all the blocks displayed at the bottom of the posts
The footer: the whole footer can be configured with widget

Configure means choose what you want to display, by selecting widgets. The possible widgets are

Widget	Description
authors	Display the list of the authors of the posts
follow-me	Display a list of "follow" links
gallery	Display the feature images of a list of posts
last-posts	Display the last posts of the blog
page	Display the content of a specific post
popular	Display a list of popular posts according aconfigurable list
related-posts	Give a list of posts related to the current post
sections-list	Give the list of sections
series-same	Display the list of posts belonging to the same serie than the current post
series-or-related	a combination of the two previous widgets
series-list	Display the list of series available in the blog
share-links	set of links to share the current post
tags-cloud	Display the cloud of the tags
tags-posts	List of the tags related to the current post

The configuration of the widgets areas can be done through JSON configuration files:

Area	Configuration file
Homepage	/data/homepage.json
footer	/data/footer.json
bottom of pages	/data/single.json

You can find, the examples for these files in the theme folders themes/goyat/data/homepage.json (or single.json or footer.json).

Widget « related posts »

The widget related posts is based of the standard Hugo feature. The parameters are the standard one:

[related]
  includeNewer = true
  threshold    = 75
  toLower      = false

  [[related.indices]]
    name   = "tags"
    weight = 100

  [[related.indices]]
    name   = "date"
    weight = 10

Posts lists layout

You can choose the format of the posts displayed in lists (sections, tags, categories, series, ...), and the number of columns.

[params.postsList]
  "postFormat" = " post format"

  [params.postsList.columns]
      "xs" = number of column
      "sm" = number of column
      "md" = number of column
      "lg" = number of column
      "xl" = number of column

Four formats are available:

Format	Result
meta-left
image-left
image-top
meta-right
no-image

In parallel of the post format, you can choose the number of columns you want to use, according the screen sizes. Goyat is based on the Bootstrap CSS framework. So, xs, sm, md, lg, xlare a list of screen sizes, defined in this framework.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
)

For example, the following configuration

[params.postsList]
  "postFormat" = "image-top"

  [params.postsList.columns]
      "xs" = 1
      "sm" = 1
      "md" = 2
      "lg" = 2
      "xl" = 3

will display 3 columns, for a very large screen

will display two columns, for a medium screen (tablet)

will display 1 columns for a small screen (smartphone)

Meta information

In the lists of posts, or i a single page, you can choose the meta data to be displayed. The available fields are

section,
date,
fulldate,
reading (the estimation duration of read),
tags,
post-tags,
series,
posts-series,
sections,
authors,
category,
linkedsection.

You can choose also where to display them: on top of the post, between the title, and the content of a post, or after the content. The parameters are the following

[params.xxx.meta]
  [params.xxx.meta.top]
    "1" = "1st meta field"
    "2" = "2nd meta field"
    "3" = "3rd meta field"
    "4" = "4th meta field"
  [params.xxx.meta.middle]
    "1" = "5th meta field"
    "2" = "6th meta field"
    "3" = "7th meta field"
    "4" = "8th meta field"
  [params.xxx.meta.bottom]
    "1" = "9th meta field"
    "2" = "10th meta field"
    "3" = "11th meta field"
    "4" = "12th meta field"

xxx = either postsList, either Single.

For example: the following configuration will display in all posts lists, the section, and date, on top of the posts, the field reading between the title, and the content, and the fields tags, and series, after the content of the posts.

[params.postsList]
  [params.postsList.Meta]
    [params.postsList.Meta.top]
        "1" = "section"
        "2" = "date"
    [params.postsList.Meta.middle]
        "1" = "reading"
    [params.postsList.Meta.bottom]
        "1" = "tags"
        "2" = "series"

Another example, with the single post :

[params.Single]
  [params.Single.meta]
    [params.Single.meta.middle]
        "1" = "fulldate"
        "2" = "reading"

Avanced configuration

The design of the site can be updated in several manners

You can change the color scheme, by modifying the stylesheet,
You can change the way the site manages device width,
You can choose the posts format in the posts list (whatever the list)

Change the color scheme

For changing colors, you can edit the file themes/Goyat/assets/styles.scss, and change the following lines

    $primary:   "color 1";
    $secondary: "color 2";
    $light:     "color 3";
    $medium:    "color 4";
    $dark:      "color 5";

Other styles

So far, the theme doen't provide an easy way to customize styles. However, you can customize the theme with two files

All default Bootstrap values used by the theme are in the file themes/Goyat/assets/customization.scss.
The theme styles are in the file themes/Goyat/assets/styles.scss

The theme uses the icons from Bootstrap Icons. You can add icons if required, by editing the file themes/Goyat/assets/bootstrap-icons-1.9.0, and uncomment the line corresponding to the icon you want to display.

Name		Name	Last commit message	Last commit date
Latest commit History 564 Commits
archetypes		archetypes
assets		assets
data		data
i18n		i18n
images		images
layouts		layouts
static		static
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
theme.toml		theme.toml

License

egeorjon/Goyat

Folders and files

Latest commit

History

Repository files navigation

GoYat

Table of Contents

Features

Tools and libraries

Installation

Option 1: Git clone

Option 2: Git submodule (recommended)

Option 3: Download ZIP and manual install

Once the theme is deployed

Usage

Basic configuration

Tests, production, and debug

Language

Date format

Pagination

Site title / brand

Shortcodes and markups

Attachments

imggallery

Blockquotes

Markups

URL configuration

Navigation

Search configuration

SEO

RSS, Manifest and sitemap

RSS configuration

File site.manifest

Sitemap

Favicons

Configuration of the social media

Follow links

Share links

Content configuration

Taxonomies, and authors

Widget areas

Widget « related posts »

Posts lists layout

Meta information

Avanced configuration

Other styles

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages