What if you need to have an index page and a blog for your site?

support
1

Root of domin: An index page which is a landing page that shows recent post of your blog in part of the page, and, Your blog: located in /blog. (They are using same assets)

‌
example.com --> have some Hugo code that should be build

example.com/blog --> which is a normal Hugo blog, published in themes.

How this can be implemented?

‌ ‌
‌ ‌ ‌
‌ ‌ ‌
ـــــــــــــــــــــــــــــــ
UPDATE: you can find a good description here: What's the point to implement many blogs?

2

See: Static Index w/ Separate /blog?

Tip: Read the Forum Guidelines on requesting help: https://discourse.gohugo.io/t/requesting-help/

1 Like
3

@alexandros wrote: Tip: Read the Forum Guidelines on requesting help: https://discourse.gohugo.io/t/requesting-help/

:pray:

4

@alexandros wrote: Static Index w/ Separate /blog?

As that topic has more focus on RSS, I continue the question here. It’s mentioned there:

.
├── content
│   ├── _index.md
│   └── blog
│       ├── my-first-post.md
│       └── my-second-post.md
└── layouts
    ├── _default
    └── index.html

@rdwatters wrote: You’ll also need layouts, etc, obviously… But index.html will pull content and front matter from _index.md plus whatever templating you put in.

But it’s not obvious to me! For example, I have chose Bootstrap v4 Blog theme for my blog. I use hugo new to create a new site and put it within themes. it works well and serves posts that are located in /content/post. this site is available via example.com.

Now I have a template based on bootstrap that I want it to be the index of my site. the template has a part that can presents recent blog post that is implemented in Hugo codes. assets, such as CSS, are in common for both the template (site index) and the theme (blog).

From now, what are steps that I should follows?

If I put index.html of the template in /layouts, the index.html of /themes/Bootstrap-v4-Blog will be ignored!

5

Of course it will because you are overriding the theme’s index.html template. See: Theme components | Hugo

To understand which template refers to what, you need to read about the templates lookup order Template lookup order | Hugo

6

Here is the complete source code for my website that might be a helpful example: https://github.com/hnarayanan/harishnarayanan.org

Some things to note:

  1. content/_index.md and layout/index.html correspond to the home page of the site.
  2. layout/writing/list.html corresponds to the “blog” section of the site, and the actual content for this is in content/writing/.

Hope that helps!

2 Likes
7

Thanks guys.

  • The main index of site is handled by /layouts/index.html.
  • The blog layout is handled by /layouts/_default/list.html and contents are grabed from files in /contents/blog/post-*.md.

It has implemented what I was asking for. Please read this comment if you want to have a site with an index and a blog.

Now, the only remained problem: post URLs are lack of date. It was expected for [DOMAIN]/blog/2017/12/post-A.html, but I get: [DOMAIN]/blog/post-A.html.

8

See URLs configuration: URL management | Hugo

You configure these in your config.

For example TOML looks like this:

[permalinks]
  post = "/:year/:month/:title/"
1 Like