Generate the main home page in a subfolder instead of the base URL?

support
1

Hi all.

I’ve had my hugo website running fine for several months now using the Hugo Profile theme, all working as intended.

However, I’ve been recently considering giving the “spotlight” to the blog by making that my home page, while tucking the current “home page” away under a subdirectoy (e.g.: /about).

I know I can change the baseURL parameter in the main .yaml file of the theme, but that just moves the whole site over. What I’d like to do is:

  1. Have the blog index page at the base URL, which I think can be achieved by overriding my theme’s layouts/index.html file.
  2. And the tricky part: move what’s currently at the home page (the contents of index.html) to a subfolder.

How can I achieve #2? Where would I put the new index.html in my theme so that it’s picked up at the /about path?

2

I am afraid you must either link your theme here or ask the theme developer.

There are two ways a theme might create a homepage and only knowing how this is done we can help you.

  1. with lots of config and maybe some content in data/homepage.yml or similar files.
  2. with content/_index.md.

If it’s 2, you move that file to content/about/index.md, and that part is done. If it’s 1, you must move that whole configuration into a markdown file, or your theme’s developer will have a switch that moves things around.

3

My apologies, this is the theme in question:

I’m afraid we’re talking about #2, aren’t we?

4

Yep, that is the more complicated method. A quick fix (untested, but try it and we go from there) is this (I’ve chosen arbitrary names, you name it the way you need):

  1. move layouts/index.html into layouts/default/my-old-home-layout.html - after this you can add a layout: my-old-home-layout to the page we will create.
  2. create a new content file via hugo new content/about/index.md
  3. add the layout: my-old-home-layout to the frontmatter of that new file.

After those steps I would expect yoursite.com/about/ to show your old homepage.

Then you can go on to change your old homepage layout in layouts/index.html… I would do that by copying the contents of layouts/_default/list.html over into layouts/index.html.

That should show a list of recent posts on your homepage.

I would expect now more or less these kind of issues:

  • /blog/ is showing the same as / on your site (use redirects)
  • the new homepage shows more than it should (use .RegularPages instead of .Pages in the range that shows the posts)

This all is without testing, get back here if any issues occur.

5

Thanks so much, that’s the kind of thing I had tried but I was missing the new content creation step.

I’ll give this a shot when I get some time and report back.

6

Hi again!

Following your advice, I think I got it working exactly the way I wanted.

What I did:

  1. In my customized theme (to avoid modifying the original one), I moved layouts/index.html to layouts/_default/hugo-profile-home.html, like you said.
  2. In layouts/index.html, I replaced its contents with those of layouts/_default/list.html. Then I replaced:
    {{ range .Paginator.Pages }}
    with
    {{ range (where .Site.RegularPages "Section" "blog") }}
    So that it only picks up pages inside the /blog folder.
  3. In /about/, I created an empty index.md file with the following parameter in its front matter:
    layout: hugo-profile-home
  4. I moved my previous /blog/_index.md file to the root of my site, so that it shows up above the list of blog posts just like before.
  5. To avoid my posts being shown at mysite.com/blog/name-of-post, I simply added this to the front matter of every blog post:
    url: "/name-of-post"
    I was already using the url parameter to customize the URL of each post, so it was just a matter of removing /blog/ from them.

And that’s it!

The only thing left was to modify the actual navbar links in hugo.yaml so that the “front page” sections now point to /about/section-name instead of /section-name, and do the opposite with the Blog link (now pointing to / instead of /blog).

I was honestly not expecting it to be this easy, especially considering I have a multi-language setup where the English version of the site (and all the blog posts) are at the root, whereas the Spanish version is under /es/. But I had already implemented proper handling and redirections when switching between languages, and because all paths are relative, everything worked automatically :slight_smile:

Thanks again for your fast and accurate help @davidsneighbour!

I was missing the bit of knowledge where you can make any page look like the default home page by just turning it into a layout in layouts/_default/, then referencing it by name in the front matter of any page. You nudged me in the right direction :slight_smile:

1 Like