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.
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:
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.
This theme supports adding various support/donation links in your site. Currently, supported support links are: Ko-fi 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'
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
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.
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.
This is a sample post intended to test the followings: Default hero image. Different shortcodes. Alert The following alerts are available in this theme. This is sample alert with type="success". This is sample alert with type="danger". This is sample alert with type="warning". This is sample alert with type="info". This is sample alert with type="dark". This is sample alert with type="primary". This is sample alert with type="secondary".