Now we have Hugo installed, let’s start with a very simple webpage. First you have to create two files. First you create an empty file called ‘config.yaml’. Then you create a file called ‘index.html’ with some simple HTML: This is a very simple webpage You have to store the ‘config.yaml’ file in the root of your project and the ‘index.html’ file in a directory called ’layouts’.| Hugo Codex
Now we have an ‘index.html’ file, we are going to separate the code from the content. Hugo uses Markdown for this. All content is saved in ‘.md’ (Markdown) files in a ‘content’ directory in the root of your project. Create a Markdown file, called ‘_index.md’, that looks like this: --- title: My first content file --- My first paragraph in Markdown Save the file in the ‘content’ directory. Now change your ‘/layouts/index.| Hugo Codex
A website typically consists of a few elements that get repeated on every page, like a header with a menu and a footer. Instead of adding them to every page, you can use a ‘partial’. Partials need to be saved in the ‘/layouts/partials’ directory. Create a ‘header.html’ file that looks like this: Create a ‘footer.html’ file that looks like this: Store both files in the ‘/layouts/partials’ directory.| Hugo Codex
Our website is taking shape ;-). But we are missing a nice contact page. To create it, we should create a file ‘/content/contact.md’. This file should look like this: --- title: Contact page --- Send me an email at joost@vdschee.nl We already had a layout file (index.html), but that file was only valid for the homepage. Therefore we now need another file. This file can be an exact copy of the ‘index.| Hugo Codex
Every website has a news section or a blog. That is why are going to add a ‘posts’ directory to our content folder. In this new directory we create a markdown file named ‘hello-world.md’, which is our first post. This file should look like this: --- title: Hello world date: 2016-02-01 10:00:00 --- This is my first blog post The date should be the current date. The time is optional. Additionally we are going to add a (new) layout file for our blog overview (a list view of our posts).| Hugo Codex