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
-
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. -
To enable the display of raw HTML within the
content/_index.md
file, create a raw html shortcode -
Create a layout file
layouts/index.html
that will be used to rendercontent/_index.md
with content1{{ 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 }}
-
Remember to copy any images in the
static/images
folder, creating it if necessary. -
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
hasmainSections = ["posts", "docs"]
. Looking atlayouts/partials/sidebar/recent-posts.html
, it can be seen that the Recent Posts widget will show widgets of the sametype
as the page. Thetype
is eitherposts
ordocs
(withposts
being the default). We have not assigned any type in the frontmatter ofcontent/_index.md
, so it’ll default to theposts
type. So the recent posts template will try to populate the widget with the recent posts of typeposts
… which do not yet exist. When the blog is created AND the type of the blog posts is set toposts
, only then will the recent blog posts appear in the Recent Posts sidebar widget on the landing page.
- Longer explanation: