Hugo: Minimalist website with homepage as content

[falzm]

Hi

I'd like to use Hugo for my personal website, which roughly consists of two HTML pages:

• the homepage (http://falzon.me/)
• my résumé (http://falzon.me/cv/)

I'm actually struggling to do a simple thing, which doesn't seem to be possible to do with Hugo: write the content of the homepage (a.k.a. /index.html) as Markdown — content/index.md for instance —, among other content pages in the content/ directory. For what I understand from the documentation, the homepage has a special status, and requires a dedicated template file for display.

My problem is: I don't want the content of the homepage to be directly in the HTML template, I want it to be written as Markdown in content/ as any other page, and rendered/included in the layout/index.html template file. Is there any way to achieve this? If not, what simple workaround can you suggest so I can keep the simple structure of my website?

Cheers,

m.

[spf13]

I'm working on exactly this use case. Hope to have something ready soon.

[falzm]

Great!

[RubenN]

Exactly what i'm looking for!
Any update on this use case?

[falzm]

Hi @spf13, any update on this feature?

[tkschmidt]

This feature is also interesting for me. Until now I used an own content type with just one entry, but this then breaks prev and next posts.
I don't want to have my about.html as part of a list of all my blog-posts.

[mbertschler]

@tkschmidt @falzm @RubenN I managed to come up with workaround that works good for me until there is a proper fix for this:

/content/index.md file containing url = "index.html" in the front matter
(this alone does not make it work, but it ensures that this content is not generated for into a /index/ folder in the public directory)

then add the following code to the /layouts/index.html body section

{{ range .Data.Pages }}
        {{if eq .RelPermalink "/index.html" }} {{.Content}} {{end}}
{{ end }}

because the index.md file has url set to index.html, hugo translates this into the .RelPermalink = "/index.html". With this hack only the content of the index.md file is shown on the homepage.

[spf13]

@mbertschler That's pretty brilliant. Way to work within the system. I don't mind that solution at all.... of course it would be nice to have a proper one at some point.

[zwotzie]

@mbertschler : in my setup with v0.12. it is not a solution. Which version do you use?

[mbertschler]

@zwotzie I am using v0.12
This is how it works great in my current website project.

Contents of layouts/_default/single.html

{{ template "partials/header.html" . }}
    {{ .Content }}
{{ template "partials/footer.html" . }}

Contents of layouts/index.html

{{ template "partials/header.html" . }}
{{ range .Data.Pages }}
    {{if eq .Type "index" }} 
        {{.Content}}
    {{end}}
{{ end }}
{{ template "partials/footer.html" . }}

Contents of content/index.md

type = "index"
+++
Content in *Markdown*

I hope that helps.

[zwotzie]

@mbertschler that works perfekt for me, except the title, which will be used from the config-file but that ok. Thank you very much.

[tlipski]

@mbertschler - I like your solution, but wouldn't it better to write in index.html something like this?

{{ range .Data.Pages }}
    {{if eq .Type "index" }}
        {{ template "partials/header.html" . }}
        {{.Content}}
        {{ template "partials/footer.html" . }}
    {{end}}
{{ end }}

[mbertschler]

@tlipski it should work that way as well. How you write that part is totally irrelevant, because /index.html will only get generated once.

[tlipski]

@mbertschler I altered it this way so next/prev/title can work properly

[codethief]

After two hours of trying to find out how to create a simple, non-blog – in that sense, actually static – website with Hugo, I finally arrived here. Thanks for the workarounds, guys!

[gutenye]

Nice workarounds, I really wish Hugo can support it by default

[irisli]

:+1:

It would be great if Hugo had better support for homepage as a content file (and not as a layout file). On the sites I've been using Hugo on, the home page layout is the same as some other content pages.

[codethief]

@spf13 Any news regarding this issue? I would love to use Hugo for static pages.

[nikolas]

I needed to customize some CSS only on the homepage, so I wanted to add a class to the body tag to decide whether to apply my CSS. I did this in my header.html partial:

<body class="page-{{ .Title | urlize }}">

And now I can make a CSS rule like:

body.page-title-of-my-site {
    background-color: #000;
}

that's only applied on the homepage.

[rhewitt22]

:+1: for handling index page content as a first class citizen.

[fazy]

After experimenting with themes, I decided to build my site from the ground up (but looking at themes for reference). It's a small, personal site, but I want to devote most of the home page to my Flickr photos feed, and relegate the blog to a sub-section. As such, the home page will be fairly bespoke, with very little blog content, while the blog section will fit well with the content/templates model used by Hugo.

So just to see it working (hello world, minimum viable product, iterate...) my entire home page is like this:

layouts/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>{{ .Site.Title }}</title>
</head>
<body lang="en">

<section id="main">
    <div>
        {{ range .Data.Pages }}
            {{if and (eq .Type "index") (eq .Title "heading" ) }}
                {{.Content}}
            {{end}}
        {{ end }}

        <hr>
        <p>Stuff baked into the template... should probably still use variables like {{ .Site.Title }}</p>
        <hr>

        {{ range .Data.Pages }}
            {{if and (eq .Type "index") (eq .Title "intro" ) }}
                {{.Content}}
            {{end}}
        {{ end }}
    </div>
</section>

Then I have the content files:

content/index/heading.md

type = "index"
title = "heading"
+++

# Page heading
## Sub heading
a little bit of text maybe

content/index/intro.md

type = "index"
title = "intro"
+++

# Hello,

Here is a little intro about me that I am going to place
further down the page (e.g. after a big photo).

I've basically done the same as @mbertschler (thanks!), but with the ability to have a couple of bits of content in different parts of the home page. I'm not 100% sure if I'll need that yet, but it's good to have the flexibility if I decide not to do the whole template in markdown.

Edit: I can probably do the whole home page in a single markdown file using Shortcodes for any complex bits like a Flickr carousel. Still, it might be useful to get bits of content from various places at times. ;)

[fazy]

This work-around doesn't seem to work for partials. For example, if including code like this:

<title> {{ .Title }} &middot; {{ .Site.Title }} </title>

.Title is not set.

How can I determine what page I am really on so as to display the correct title?

[bep]

Use The discussion site for questions.

[fazy]

If I delete my question above, will you re-open this feature request? I think a number of people would like to have an index page.

[bep]

My bad ... I thought this was a new topic... Yes, this will come at some point.

[fazy]

That's very good to know, thanks. :) And sorry to be lazy about signing up for the forums, but I've done that now.

[mbertschler]

I would like to fix this for the next release. The question is how this could be implemented.

My proposal would be that if there is an index.md file in the content directory, that the relevant single.html template file will be used instead of the index.html file from the template. I think the index file could be a special case because this is how it always worked with html files.

What are your thoughts?

[rhewitt22]

Simple, solid solution. I think the homepage should also fall back on default/single.html too if an index.md is present but an index layout isn't defined.

Roy

On Nov 27, 2015, at 3:08 PM, Martin Bertschler [email protected] wrote:

I would like to fix this for the next release. The question is how this could be implemented.

My proposal would be that if there is an index.md file in the content directory, that the relevant single.html template file will be used instead of the index.html file from the template. I think the index file could be a special case because this is how it always worked with html files.

What are your thoughts?

—
Reply to this email directly or view it on GitHub.

[spf13]

I think this may already be the case.
On Fri, Nov 27, 2015 at 3:36 PM Roy Hewitt [email protected] wrote:

Simple, solid solution. I think the homepage should also fall back on
default/single.html too if an index.md is present but an index layout
isn't defined.

Roy

On Nov 27, 2015, at 3:08 PM, Martin Bertschler [email protected]
wrote:

I would like to fix this for the next release. The question is how this
could be implemented.

My proposal would be that if there is an index.md file in the content
directory, that the relevant single.html template file will be used instead
of the index.html file from the template. I think the index file could be a
special case because this is how it always worked with html files.

What are your thoughts?

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
https://github.com/spf13/hugo/issues/330#issuecomment-160201026.

[spf13]

This may be part of the solution, but it doesn't resolve all the issues. it
doesn't treat index.md as the root. We also should have a general solution
for binding content to nodes.
On Fri, Nov 27, 2015 at 5:15 PM Steve Francia steve.[email protected]
wrote:

I think this may already be the case.
On Fri, Nov 27, 2015 at 3:36 PM Roy Hewitt [email protected]
wrote:

Simple, solid solution. I think the homepage should also fall back on
default/single.html too if an index.md is present but an index layout
isn't defined.

Roy

On Nov 27, 2015, at 3:08 PM, Martin Bertschler <
[email protected]> wrote:

I would like to fix this for the next release. The question is how this
could be implemented.

My proposal would be that if there is an index.md file in the content
directory, that the relevant single.html template file will be used instead
of the index.html file from the template. I think the index file could be a
special case because this is how it always worked with html files.

What are your thoughts?

—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
https://github.com/spf13/hugo/issues/330#issuecomment-160201026.

[bep]

See https://discuss.gohugo.io/t/node-improvements/1593

Please, no hacks just to get the home page to "somehow work".

[richie5um]

@mbertschler Thank you!

[bep]

Will be handled in #2297.