Wondering if this is even possible. I have a single-page app template that I’m using/would like to use. I want to also have a blog component that’s served from /blog, possibly with a different (blog-friendly) template. How can I do this with Hugo? I’ve been searching and the docs are helpful, but don’t really dig deep or provide much context into the workings so I’ve yet to be able to figure it out.
For example, I would want [siteurl]/blog to be the index of the blog and have a list of summaries. Then each blog post would have its own page.
Can anyone shed a little light for me? Thanks in advance.
Hey there!
I am new to Hugo as well, so I might not be able to explain exactly how to do what you’re trying to. For my site I have a similar scenario: I use ThemeA for my homepage, and ThemeB for my blog/post section.
It’s definitely possible to do that, however, it needs some manual editing/coding to achieve that. Especially if you wanted to combine two themes on one page, it would be really tricky. If I get you right, however, you want to use one theme exclusively for homepage, and another theme exclusively for your blog section. That is relatively easy.
Here’s how I do it:
- Assuming you want to use ThemeA for homepage, and ThemeB for blog/post section, select ThemeB as your default theme base.
- Use index.html from ThemeA as your homepage.
- Figure out which CSS file is responsible for index.html in ThemeA. Find all needed lines. (If you’re lucky, ThemeA comes with a separate CSS file for homepage)
- Use that CSS content to create homepage.css (or similar). There you will define everything you need for index.html.
4b. Double-check that there are no elements with the same name in your homepage.css and the CSS files of ThemeB. If there are any, rename the elements uniquely both in index.html and homepage.css.
- Include a link to /blog section within your index.html in order to make /blog section available from the homepage.
PS: Make sure to put your customized content (index.html, homepage.css and maybe others) into your main hugo site folder and not into the theme folder. To figure out why, you should read the docs. In general, I recommend working through as many parts of the doc as possible. I know, it can be tiring to read about stuff which you don’t need yet apparently, but it will help you to understand the whole system and structure of Hugo.
For example, I would want [siteurl]/blog to be the index of the blog and have a list of summaries. Then each blog post would have its own page.
That would be the next step. Your chosen ThemeB might support this by default. If not, you will have to create the templates manually. For the overview (i.e. list of summaries) you will need an appropriate list template, and for the page of each blog post a single content template.
I hope this helps you a little. 