Creating the /blog/ part of https://sagar.se

  • Create folder content/blog/

  • Create file content/blog/_index.md with content

    1+++
2title = "Blog"
3[menu.main]
4weight = 10
5[cascade]
6type = "posts"
7+++

  • Note the cascade entry in the frontmatter of _index.md. This tells Hugo that the content of content/blog/ is of type posts, for which specialized templates are provided by the theme.

    • NOTE: This frontmatter cascade would have been unnecessary if the folder was content/posts instead of content/blog, since the type defaults to the name of the child folder under content.

  • Copy the blog post files and folders in content/blog.

  • Note that if a post has an image, it can be created as a folder within content/blog with the post content as content/blog/post-name/index.md and the image alongside in content/blog/post-name. The image can then be referenced in index.md as ![alt-title](image-name.ext).

  • HOWEVER, if you need to create multiple .md files in content/blog/post-name and reference them from each other, then the main post content can not be in index.md. It needs to be in _index.md in the content/blog/post-name folder. BUT in that case, images in that same folder can not be referenced as described in the point above. In that case, the images need to be put in static/ e.g. if the image is static/images/foo.jpg it should be referenced in the post as ![alt-title](/images/foo.jpg). See the files in content/blog/diy-multi-wan-linux-router for an example.

  • If the previous two points seem odd (to me they do), review the Hugo page bundle docs .

  • Related: Enabling/Disabling comments

  • A menu link to the blog in the top Navigation bar is enabled by the following part of the frontmatter in content/blog/_index.md

    1[menu.main]
2    title = "Blog"
3    weight = 10

  • Also implement: Full Size Images in Summaries

  • Modify list template to

    • Remove child sections from appearing at the top
    • Show content of a section’s _index.md at the start of the list page
    • cp themes/hugo-bootstrap-theme/layouts/partials/list.html layouts/partials/list.html
    • Remove the line {{- partial "sections" . -}}
    • Add the following lines after the line {{- partial "breadcrumb" . -}}
    1{{- with .Content -}}
2<article class="row card post component">
3  <div class="card-body pb-0">
4    {{ . }}
5  </div>
6</article>
7{{- end -}}