Quickstart

Greeting! Thank you for deciding to use this theme. In this guide, I will show you how you can get started with this theme very quickly. Here, I am going to assume that you want to start a fresh Hugo site using this theme. If you are already using Hugo for your site, then you must know how to use a theme. In that case, please follow this sample repo for further reference.

Enable Dark Theme

Enable Dark Mode Toha v3.6.0 has introduced dark theme. Thanks to @donfiguerres. This guide will show you how to enable it. At first, make sure you have updated the theme version to v3.6.0 or later. Then, add the following section under params section of your config.yaml file. darkMode: enable: true provider: darkreader default: system Here, enable: Specifies whether to enable the dark mode or not. provider: Specifies the underlying provider that will be used to provide the dark mode functionality.

Mermaid Support

This theme comes with built in mermaid support powered by maemaidj-js. To enable mermaid for a page, you have to put mermaid: true in your page front-matter. For example, this page has the following front-matter: title: "Mermaid Support" date: 2022-03-14T06:15:35+06:00 menu: sidebar: name: Mermaid identifier: writing-post-mermaid parent: writing-post weight: 60 mermaid: true Then, you can use mermaid short code to add your mermaid content. For example: {{< mermaid align="center">}} # your mermaid content here {{< /mermaid >}} The mermaid short code accept the following parameters:

Comments

Comments This theme has built-in support for comment on the posts. Currently, it support the following comment plugins: Disqus Valine Utterances Giscus Disqus Disqus is a popular comment plug-in. After signing up to Disqus you will need to provide your shortname under params.features.comment section of your config.yaml file as below: params: features: comment: enable: true disqus: shortName: <your-disqus-shortname> Valine Valine appears to be a Chinese comments comments plugin. You can enable valine comment plugin by adding valine section under params.

External Link on Sidebar

Supports Links

This theme supports adding various support/donation links in your site. Currently, supported support links are: Ko-fi Buy Me a Coffee Ko-fi You can add your Ko-fi floating button in your website. To add the floating button, add the support section under params.features section of your sites config.yaml file: params: features: support: enabled: true kofi: user: <your ko-fi user id> text: Tip Me textColor: '#f9fafc' backgroundColor: '#248aaa' Buy Me a Coffee You can add your “Buy Me a Coffee” floating button in your website.

Customizing the layout

We’ve all been there We all want to be able to customize the layout of a given theme, and in this short tutorial I will show you how. I stumbled my way through this, and I hope you won’t have to as well. Step 1 / CSS Finding what you are wanting to customize. The first thing I wanted to do was customize the css styles. I stumbled through a few git issues, and posts and found that truly the author made it easy, I just didn’t think it through (as I was new to Hugo as well).

Prepare Your Site

This doc is outdated. For up-to-date examples, please follow this sample repo. In this post, we are going to create a hugo site from scratch. Then, we will configure it with Toha theme, make it multilingual, add some example posts. At the end of this post, you should be able to run a fully functional hugo site with Toha theme locally. If you want a head start, you can just fork hugo-toha/hugo-toha.

Deploy site in Github Pages

In this post, we are going to deploy the site we have created in previous post in Github Pages. At first, make sure that your repository name is <your username>.github.io. Then, commit any local uncommitted changes and push into Github. Create gh-pages Branch At first, create a new branch named gh-pages. Github will automatically set respective configurations for Github Pages when it see a branch with this name. # create the gh-pages branch $ git checkout -b gh-pages # push the source branch into Github $ git push gh-pages gh-pages Enable Github Action We are going to automate the deploying process using Github Actions.

Deploy site in Netlify

Netlify offers an excellent and easy process for deploying hugo static site. You can deploy your site in matter of few clicks. Unlike Github Pages, you can name your repository whatever you want. You can also customize the site URL. In this post, we will show the step-by-step process of deploying a hugo site with netlify. Add Netlify Configuration At first, create a netlify.toml file at the root of your repository and add the following configuration there:

Automate Theme Update

This doc is outdated. We will be updating the doc soon. You might want to keep your site up-to-date with the latest version of theme to enjoy the latest features and fixes. In this post, we are going to setup a Dependabot Github app to automatically update the theme version. The app will check daily if there is any update in the submodules. If it finds any update in the theme, it will create a PR updating your site to the latest theme version.

Features

Test Link This theme has been designed from a personal point of preference. As a developer, I want to organize my portfolio in a way that will reflect my skills best. So, this theme may or may not meet your needs but I will be happy to have your feedback. This post will give you an overview of the features that this theme incorporates. Minimalist Design This theme has been designed to be minimalist and beautiful.