` element in all the `list.html` files. The hight to subtract should be the exact height of the footer. Alternatively you can follow this commit here which sets the footer to sticky: . #### Commento You can add the url to the commento `.js` file in the `config.toml`. ```toml [params.commento] enable = true url = "http://localhost/js/commento.js" ``` Comments will then be available on a post page. ### Adding images + description to content You can edit the `config.toml` under the `[params]` stanza to edit the homepage description text on the homepage. The title is under the root header. You should create an `index.md` under `./content/images`. This file shoudld contain front matter: ```yaml headless: true ``` Images should go in `contents/images`. For each post you can specify an image that shares the same filename. E.g `post1.md` should have `post1.png` in `content/images`. Remember to add the image to the list in the front matter of the post: ```yaml title: "First Post" date: "2020-05-04T02:14:50+01:00" images: ["/images/Untitled 3.png"] ``` The homepage image should go under the `params` stanza. The images should be `.png` with a size of `900x500`. You should edit `index.html`, `single.html` and `card.html` and change the image widthxheight to `900x500` if you have downloaded the theme from scratch. ### Editing default files ## Features ### Taxonomies You can use taxonomies to group content together. They are logical grouping of posts which can be used to group different posts together based on additional metadata. An example from the documentation for an actor taxomony: ```text Actor <- Taxonomy Bruce Willis <- Term The Sixth Sense <- Value Unbreakable <- Value Moonrise Kingdom <- Value Samuel L. Jackson <- Term Unbreakable <- Value The Avengers <- Value xXx <- Value ``` For example, you could have a series taxomony to group together a long series of blog posts. This blog post could be "deploying Strapi to EB" and be comprised of many posts in different tags all grouped under one taxomony. You can then add additional series for different things and see them all from one place. When you visit a taxomony URL (say ) it will use (in theme) `./layouts/_default/list.html`. If you want a custom layout for a certain taxomony, e.g author, create this file in the relative path: `./layouts/authors/list.html`. #### Configure You should define the taxonomies in the `config.toml`: ```toml [taxonomies] category = "categories" series = "series" tag = "tags" ``` Then add it to your front matter (posts etc.): ```markdown categories = ["Development"] project_url = "https://github.com/gohugoio/hugo" series = ["Go Web Dev"] slug = "hugo" tags = ["Development", "Go", "fast", "Blogging"] title = "Hugo: A fast and flexible static site generator" ``` ### Front matter You can insert metadata into your markdown/html. This is called front matter and is metadata associated with a post. . There are different opening/closing formats for front matter depending on what data format you want to use. TOML uses `+++` whereas YAML uses `---`. ### Aliases Aliases can be used to redirect people to another page. For example, if you write a new blog post to replace an old one, you can add an alias to the old one in the new one. Then whenever someone visits the old page they will be redirected automatically to the new one. . ### Shortcodes Shortcodes are snippets provided by Hugo that allow quick linking to additional content. E.g you can refer to a youtube video in your markdown with: `{{< youtube ZJthWmvUzzc >}}`. A really useful feature is the ability to quickly generate a link to another page in Hugo using its filename: ```markdown [Neat]({{< ref "blog/neat.md" >}}) [Who]({{< relref "about.md#who" >}}) ``` ### Image processing You can edit and insert images dynamically with front matter. See for an example. You can apply additional filtering, apply blur, resize etc: . ### Adding images to content Good blog post explaining different ways to utilise Hugo's features: . If you want to insert an image in the html you can use the `` tag directly. Place all images in `./static/images`, Hugo will reference these as `/images/$image`: ```html

``` ### Working with parameters and front matter You can define data in your front matter, say a list of images or a single image path. In the `html` of the post, you can then access these variables: ```hugo {{- with $page.Params.images -}} {{- $images := . -}} {{- with $page.Site.GetPage "section" "images" -}} {{- with .Resources.GetMatch (strings.TrimPrefix "/images/" (index $images 0)) -}} {{- $image := . -}}

``` You can use `{{- with $page.Params.images -}}` to open a `with` block in a list. You can set a variable to whatever the `with` block is referencing by immediately doing a `{{- $images:= . -}}`. The `-` on both sides trims any whitespace in the outputted HTML. ## Email ### Sending email with AWS SES You can use SES to send emails for software/clients that request email credentials (commento is one example). The main documentation page is here: . A IAM user for sending emails is: ```yaml IAM User: ses-smtp-user.20200505-212533 SMTP Username: AKIA23D4RF6O2UKDMTCW SMTP Password: BIx9F8PR7g1K9oObHQGElHmf3nIjCkUhJpu4GP3O3/Yq ``` You should verify an email (or domain ) that you own with AWS: . An example `docker-compose` for compose app sending emails with SES is here: .