hugo 0.24

Let's Start from the Basics: Part 5

Customize Your Site

The way we left “My new Hugo Site” wasn’t perfect. We added some content, created a new type of posts… but we don’t have a menu to see that new post type that we called “news”.

So, on the last article we learned how to use our theme. Now we know we can use Syntax highlighting, Disqus for comments, include Google analytics… now let’s create a menu to navigate through the different section on our site.

Add a menu to your site

How do we add a menu? Well, the theme we chose can helps us. If you go to my-new-site\themes\beautifulhugo\exampleSite You can see they give us an example of site that we can create with this theme. On the config.toml file you can see an example for the menu that they already support. An adaptation to our site would be:


    [[menu.main]]
        name = "Blog"  // name that will show up on the menu
        url = "/"      // url where the link will take you
        weight = 1     // order on the menu

    [[menu.main]]
        name = "News"
        url = "/news"
        weight = 2

    [[menu.main]]
        name = "Tags"
        url = "tags"
        weight = 3

Adding this, you’ll see your brand new menu on the top of the site, on the right hand side.

shoot of the menu

Now we can navigate to our new post type (news) and back to our main blog.

See that there is also a “Tags” item on the menu. How to add content here? Adding tags to your content, on the front matter. For example in one of the post we wrote:


    ---
    title: "One More Post"
    date: 2017-07-10T18:24:49+02:00
    draft: false
    subtitle: ""
    tags: ["intro", "post"]
    ---

Those terms will show up on the page like so:

tags page

More data on my site

If you want to add your email on the site, your twitter account, your logo… “Beautiful Hugo” got you covered. Take a look to the example site they offer. You can add something like this to your config.toml:


    [Params]
      subtitle = "Build a beautiful and simple website in minutes"
      logo = "img/avatar-icon.png"
      favicon = "img/favicon.ico"
      dateFormat = "January 2, 2006"
      commit = false
      rss = true
      comments = true

    [Author]
      name = "Aida Martinez"
      email = "hello@developinonthego.com"
      twitter = "aida_41d4ma"

and get some cool extras on the site:

tags page

Avatar author

Web developer. Always learning.

Let's share this!