AB Hugo Theme is the theme made with Hugo, which is a static site generator made upon Golang Programming Language.

Advantage of using AB Hugo Theme

• Fast
• Responsive
• SEO Friendly
• Easy Customization
• Unique Design
• and many more.

How to Use this theme

Create Hugo Project

Hugo new site <project name>

Make sure you have hugo install. For installing Hugo check Hugo Documentation

At the root of your Hugo project, run:

git submodule add https://github.com/coder-Aayush/ab-hugo-theme themes/ab-hugo-theme

Add AB HUGO Theme at you config.toml file.

theme = "ab-hugo-theme"

Next, copy the contents of the config.toml to your site’s config.toml. Make sure to read all the comments.

Finally, Run

hugo server -D

Note: Note: If you see a blank page, it is probably because you have nothing in your content/ directory. Read on to fix that.

Configuring the Home Page

In the config.toml file you can customize homepage.

title = "Title of Your Website"

You can always override all the template in layouts folder

Confugring Paramaters

This paramaters are all over the site. If you don’t like confuging just copy & paste as same.

[params]
  bio = "I am Hugo Coder"
  discription = "Hola I am aayush"
  author = "Aayush Bhattarai"
  showcredit = true
  favicon = "img/ab-hugo-coder.ico"
  featuredImage = "" # add Featured Image inside assets/images and your path be like images/filename.jpg
  disqusShortname = "" # get username from disqus
  showComment = true # either true or false

Note Add your Images inside assets/images and path must be images/filename.jpg

Social Icons

In your config.toml file add

[[params.social]]
        url   = "https://twitter.com/"
        icon  = "twitter"
    [[params.social]]
        url   = "https://facebook.com/"
        icon  = "facebook-f"
    [[params.social]]
        url = "mailto:youremail@email.com"  # For a direct email link, use "mailto:test@example.org".
        icon = "paper-plane"

Note: Use Icon From Font Awesome

Creating a Blog Post

You can create a new blog post page by going to the root of your project and typing:

hugo new posts/<my-lifestyle-post>.md

Note: You Must Type Posts and Your FileName. If You don’t do so, then Your Post is not Visible

Now Open content/posts.md file and start writing post. Learn markdown Here

Creating About Page and Other Pages

You can simply create about page using this command.

hugo new about.md

Note: Here you shouldn’t write posts path. You can also add other file just using this command.

Example

hugo new gallery.md

Displaying Other Pages in Menu/Nav

For Displaying Your other files like gallery.md, Open config.toml file and type

[[menu.main]]
name = "Gallery"
url = "/gallery/"
# add  more same like this...

[[menu.main]]
name = "About"
url = "/about/"

[[menu.main]]
name = "GitHub"
url = "https://github.com/coder-Aayush"

Adding Favicon

Add you favicon at static/img also yo need to add in config.toml file

[params]
  ....
  favicon = "/img/ab-hugo-coder.ico"
  ....

You can also add Featured Image same as above. This is the configuration for AB Hugo Theme. For more you can see config.toml

Overriding Templates

For overriding templates please see official documentation.