Up Your Blogging Game: Three Enhancements to Hugo Apero

1. Change your Theme

The colour theme for Hugo Apero can be changed by editing your config.toml or config.yaml file. The exact one would depend on your template version.

In your config.yaml file, you will find an option for theme. Edit it to suit your needs! There are six themes available by default.

# use a built-in color theme
# one of: forest / grayscale / peach / plum /
#         poppy / sky / violet / water 
theme = "violet"

Default colour themes in Hugo Apero.

Michael McCarthy also created four new themes: Earth, Paper (Grayscale alternative which I like more), Magma (“dark” mode) and Primer (another dark one based on Github’s “primer” theme).¹ As of today (April 16, 2023), I use “Earth”. If you want to use any of these, you will have to do some additional work.

Before I describe what you need to do to use them, take a look at these themes.

I’ve found Magma and Primer (dark themes basically) to be bad at showing kable and DT tables. Just something to keep in mind.

To identify the changes needed to your site’s configuration, one can look at the pull request. Here are the steps:

1. First, head over to assets/scaffold.scss and add the theme name you want to use to the following line.

{{$themes := (slice "earth" "forest" "grayscale" "paper" "peach" "plum" "poppy" "sky" "violet" "water")}}

2. Then create a theme_name.scss file in assets/theme/ folder. You can look at the pull request for exact content of the files. (Earth and Paper, Magma, and Primer)

3. Go to your config.yaml or config.toml file and change the theme name as described earlier. (Whether is “=” or “:” would depend on whether is yaml or toml.)

    theme: "sky"

2. Add a Search Bar

Another simple addition is to add a custom search bar in your site. Having a search tab on a website is useful because it allows users to quickly and easily find the information they are looking for. It also helps users who may not be familiar with the website’s organization or navigation, allowing them to quickly locate information without having to spend time browsing through different pages.

It is super simple to do in Hugo Apero.

1. Head over to cse.google.com. Create a new search engine by clicking “Add”.

   

2. Give your custom search engine a cool name. Add you website’s URL in “What to Search”. Would you like to include images for search and use safe-search? Choose appropriately.

3. Following this, you will get a public URL for your custom search engine. It would be something like “https://cse.google.com/cse?cx=7d9698c281e7d2001”.

4. I’ve added my search box to About page. To do that, you can head over to /content/about/_index.md. Then in the outro section, add the following HTML code.

    outro: |
      <i class="fas fa-mug-hot pr2"></i>If my blog has helped you, you can [buy me a coffee](https://www.buymeacoffee.com/harsh17)!
      <script async src="https://cse.google.com/your_search_url"></script>
      <div class="gcse-search"></div>

Make sure that show_outro is set to true. Enjoy your new search engine!

3. Changing Fonts

This subsection largely follows the official documentation. There are six fonts included out of the box. You can choose them in config.toml or config.yaml.

  textFontFamily = "courier"
  headingFontFamily = "baskerville"

You like it spicy? Me too. Let’s play with some nontraditional fonts from Google Fonts.² We will be using this Webapp to get the files in the right format.

1. First, decide which fonts you want for your heading and text. This is likely going to take a lot of trials but to understand the process, you can choose any from Google Fonts site.
2. Once you know which font you want, search it’s name in the Webapp. The app will show you the custom CSS as well as prepare the ZIP file.
3. Create a static/fonts folder and add the font files (that you got from Download files option) to that folder.
4. Finally, head back to config.toml or config.yaml and edit the font name.

  customtextFontFamily = ""
  customheadingFontFamily = "Nanum Myeongjo"

Push the commits to Github and enjoy your new fonts! If you’re not sure which fonts to choose, my advice is experiment, experiment and experiment. Jonathan Hoefler, who created fonts for Apple, Obama’s Change campaign, and more, did an episode on typeface design: “Abstract: The Art of Design” (Netflix).³ The linked site is an introduction to typeface fundamentals.

And that’s a wrap!

In this post, we have traversed a number of essential changes that can truly enhance your Hugo Apero site, ensuring it stands out. From switching up the theme and adding a custom search bar, to refining the fonts, these tips serve to unlock the potential that resides in the Blogdown template.

Experimenting is key – so go ahead and try out various themes, search bars, and fonts until you find the perfect fit. Remember, your website is a reflection of you, so don’t be afraid to show off your style!