PandaBear

A modern, minimal and responsive Hugo theme for blogging.

1. Features

• Responsive design using Bootstrap
• A customisable menu
• Social icons
• Indicated reading time of each post
• Multiplatform favicon support
• A custom 404 page
• Pagination
• Google Lighthouse
  • 💚 100% Performance
  • 💚 100% Accessibility
  • 💚 100% Best Practices
  • 💚 100% SEO

2. Getting Started

2.1 Requirements

Before starting, please be sure that you have installed Hugo. This theme has been tested against Hugo version 0.78.2.

$ hugo version
Hugo Static Site Generator v0.78.2-959724F0 linux/amd64 BuildDate: 2020-11-13T10:08:14Z

2.2 Installation

First create your Hugo website using the following command:

$ hugo new site <website-name>

If your Hugo website is under version control using git, the easiest way to install this theme is to add it as a submodule:

$ cd website-name
$ git submodule add https://github.com/rh0dy/hugo-theme-panda-bear.git themes/hugo-theme-panda-bear

Alternatively, you can clone the theme into your Hugo site:

$ cd website-name
$ git clone https://github.com/rh0dy/hugo-theme-panda-bear.git themes/hugo-theme-panda-bear

2.3 Configuration

config.toml is located in the root of your Hugo website and manages the theme's menu and social icons. It also manages a whole load of other useful settings, please read Hugo Configuration Settings for more information.

baseurl = "https://website-name.com/"
title = "Website Name"
theme = "hugo-theme-panda-bear"
paginate = 5

[params]
  website_description = "My website!"

Menu Configuration

Use and adapt the sample configuration below to create the menu. Each menu item requires a name, url and weight. Menu items are displayed in ascending weight order.

IMPORTANT NOTE: If you add a new page and want to display it on the menu make sure you add a menu item for it.

[menu]

  [[menu.main]]
    name = "Blog"
    url = "/"
    weight = 0

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

  [[menu.main]]
    name = "Contact Us"
    url = "/contact-us"
    weight = 2

Social Links Configuration

Use and adapt the sample configuration below to display social icons. Displaying these icons is optional. If you do use them, they will be appear on the right-hand side of the menu. The name value must match the name of any icon from Font Awesome's free set of icons.

[params]

  [[params.social]]
    name = "twitter"
    url = "https://twitter.com/your-profile"

  [[params.social]]
    name = "github"
    url = "https://github.com/your-profile"

2.4 Running Hugo

After the theme has been installed & configured, your Hugo website can be generated by running the following command from the root folder of your Hugo website, which outputs files & folders to the public directory (these get uploaded to your webserver):

$ hugo

Alternatively, for local development, run Hugo’s built-in local server from the root folder of your Hugo website and browse to localhost:1313 on your server:

$ hugo server

3. Adding New Content

All content should support the default Hugo Shortcodes.

3.1 Pages

To create a new page, in the root folder of your Hugo website, run the following command:

$ hugo new <page-name>.md

Pages are created within the content directory, e.g. content/<page-name>.md, and contain the title, the date it was created and a flag indicating whether or not the page is in draft.

If you want your page to appear in the menu, follow the Menu Configuration steps to add a menu item for it.

IMPORTANT NOTE: Make sure you change draft to false when you want to publish the page on your website. By default, pages & posts that are drafts won't be published/displayed on your website.

---
title: "Page Name"
date: 2020-11-23T18:12:28Z
draft: true
---

<Insert your page content here...>

3.2 Posts

To create a new post, in the root folder of your Hugo website, run the following command:

$ hugo new post/<post-name>.md

Posts are created within the content/post directory, e.g. content/post/<post-name>.md, and contain the title, the date it was created and a flag indicating whether or not the page is in draft.

Post also contain a few other optional parameters that are used to provide more information about the post, such as the author and the author_email . For grouping and organising posts categories & tags can be used.

---
## Important: If this is a draft, then next line should NOT begin with an #.
# draft: true
title: "Post Name"
date: 2020-11-23T18:24:13Z
# Below are your user-defined parameters.
author: "John"
author_email: "[email protected]"
categories: ["personal"]
tags: ["photography", "day trip"]
---

<Insert your post content here...>

4. Maintenance

4.1 Updating the Theme

If you have installed the theme as a git submodule, you can update the theme by running the following command inside the root folder of your Hugo website:

$ cd themes/hugo-theme-panda-bear
$ git submodule update --remote --rebase

If you have cloned the theme, you can run git pull inside the theme folder.

$ cd themes/hugo-theme-panda-bear
$ git pull

4.2 Contribute or Report Issues

If you would like to contribute, please make a pull request on the PandaBear Git repository

If you have found an issue, please report it by raising an issue on the PandaBear Git repository.

5. Roadmap

• Google Analytics
• Disqus Comments
• Multilingual Support
• Dark Theme
• Side Menu
• Social Sharing
• Custom CSS & JS

6. Third-Party Library Versions

Project	Version
Bootstrap	4.5.3
jQuery	3.5.1
Font Awesome	5.15.1

7. Attribution

The panda bear image used for the logo & favicon was sourced from the SVG Repo and has a Creative Commons CC0 1.0 Universal (CC-0) license.

8. License

This theme is open source under the MIT license, check the theme LICENSE for additional information.

9. Support

If you like what I've done, then please consider supporting me by grabbing me a tasty coffee - thank you!