How to create a single page site where the root page is not a list

I’m trying to create a single-page site and really like the look of the Detox theme. What I’d like to do is have the root page at http://mydomain.com be this single page, but I can’t figure out how to do this from the docs. Here’s what my current directory structure looks like:

├── archetypes
├── config.toml
├── content
│   └── about.md
├── data
├── layouts
├── public
│   ├── index.xml
│   └── sitemap.xml
├── static
└── themes
    └── detox
        ├── LICENSE.md
        ├── README.md
        ├── archetypes
        │   └── default.md
        ├── images
        │   ├── screenshot.png
        │   └── tn.png
        ├── layouts
        │   ├── _default
        │   │   ├── li.html
        │   │   ├── list.html
        │   │   ├── post.html
        │   │   └── single.html
        │   └── partials
        │       ├── disqus.html
        │       ├── footer.html
        │       ├── google_analytics.html
        │       ├── head.html
        │       ├── header.html
        │       ├── meta.html
        │       └── pagination.html
        ├── static
        │   ├── css
        │   │   └── main.css
        │   └── js
        │       └── fittext.js
        └── theme.toml

And here’s my config.toml:

baseurl = "http://mydomain.com"
languageCode = "en-us"
title = "My Domain"

Ideally, I’d like for users that enter mydomain.com in their browsers to see only the content in about.md. I’ve tried moving this into a top-level content/_index.md but then it doesn’t get rendered at all. Any help would be very much appreciated!

1 Like

You can modify the theme to achieve this.

Some pointers:

  1. Putting the front-page content into /content/_index.md is correct. You’re on the right track.

  2. The content in _index.md will only be rendered if your front page template, usually /layouts/index.html, contains the code {{ .Content }}.

    (Note: _index.md is a new feature as of Hugo 0.18, so not all themes implement it yet.)

  3. To remove the list of posts from the front page, delete that code from /layouts/index.html.

  4. You might be able to cheat by overwriting /layouts/index.html with a copy of /layouts/_default/single.html. That should fix both 2) and 3) above. (No guarantees.)

Thanks! I followed your instructions and this is almost working, but the content is still showing up at http://mydomain/about and not at http://mydomain/. I tried setting the url in the _index.md front matter to "" and "/" and searched for about through the whole project and neither idea panned out. How can I get Hugo to serve _index.md at the root level?