The Landing Page is what you see when you visit https://sagar.se . By default, the Hugo Bootstrap Theme shows the list of blog posts on the landing page. For this site, we created a custom landing page with the following steps

  1. Create the file content/_index.md with the content of the landing page. For this site, I created the content in raw HTML, because that was the simplest way I could think of, to have an image and a text paragraph side-by-side.

  2. To enable the display of raw HTML within the content/_index.md file, create a raw html shortcode

  3. Create a layout file layouts/index.html that will be used to render content/_index.md with content

     1{{ define "content" }}
 2<div class="col-lg-8">
 3<div class="container">
 4<article class="row card component mb-4 post">
 5    <div class="card-body">
 6    <div class="post-content mb-3">
 7        {{- .Content -}}
 8    </div>
 9    </div>
10</article>
11</div>
12</div>
13{{- partial "sidebar" . -}}
14{{ end }}

  4. Remember to copy any images in the static/images folder, creating it if necessary.

  5. Note that at this stage, there will not be any posts shown in the ‘Recent Posts’ sidebar widget. To fix that, posts need to be added to the blog section .

    • Longer explanation: params.toml has mainSections = ["posts", "docs"]. Looking at layouts/partials/sidebar/recent-posts.html, it can be seen that the Recent Posts widget will show widgets of the same type as the page. The type is either posts or docs (with posts being the default). We have not assigned any type in the frontmatter of content/_index.md, so it’ll default to the posts type. So the recent posts template will try to populate the widget with the recent posts of type posts … which do not yet exist. When the blog is created AND the type of the blog posts is set to posts, only then will the recent blog posts appear in the Recent Posts sidebar widget on the landing page.