Search code examples
gostatic-sitehugo

Modify index.html in hugo

I'm just getting started in the hugo quickstart tutorial.

Looking here, it suggests I ought to be able to modify the home/default/root index.html by creating an _index.md file.

$ hugo new site quickstart
Congratulations! Your new Hugo site is created in ~/quickstart.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Ok, let's try to modify the home page!

[~/quickstart]$ hugo new index.md
[~/quickstart/content/index.md created

[~/quickstart]$ hugo new _index.md
[~/quickstart/content/_index.md created

I've edited both of those, to the effect of:

---
title: "Welcome"
date: 2017-10-13T20:31:39-05:00
draft: false
---

# This is a website!

Why nothing appears?

But when I run

[~/quickstart]$ hugo server -D
Started building sites ...

Built site for language en:
0 draft content
0 future content
0 expired content
1 regular pages created
6 other pages created
0 non-page files copied
0 paginator pages created
0 tags created
0 categories created
total in 5 ms
Watching for changes in ~/quickstart/{data,content,layouts,static}
Serving pages from memory
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

I see this, no content:

Blank screen

Is there anything else I need to do? A build or markdown or render step or something?

Solution

  • You don't need the index.md but you do need the _index.md. You can delete it.

    In your layouts folder create a file named index.html. That's your template html file for the site's root page. Now add your basic boilerplate doc/html markup. That allows the the server to inject a Javascript auto-reload script. Now refresh your browser to pickup the script.

    Now you are ready to play. in the body tag add {{.Title}} and watch the browser update.