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 For a complete list of supported support links, please refer the sample hugo.yaml file. 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 hugo.yaml file: support: enable: true services: 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. To add the floating button, add the support section under params.features section of your sites hugo.yaml file:

Customizing the layout

If you customize the layout of an existing component, you will not receive any future updates for that component when the theme is updated. You will need to manually update the component in your repository. In this tutorial, I will guide you on how to customize the layout of a theme. I have personally gone through the process and will share my insights to make it easier for you.

Prepare Your Site

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.github.io repo, rename it and update with your own data. This repo has already been configured to deploy in Github Pages and Netlify.

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. At first, make sure that Github Action is enabled in your repository. Go to Settings > Actions of your repository and make sure Action permissions is set to Allow all actions. Here, is a screenshot of the respective setting:

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

To ensure your site benefits from the most recent features and corrections, it’s crucial to keep it updated with the latest theme version. This article will guide you through the process of establishing a GitHub workflow that will automatically update the theme version. This action will perform daily checks for any updates to the theme. If an update is detected, it will generate a PR to update your site to the most recent 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. The color scheme has been chosen to be simple but yet powerful. The post page has been designed to be as distraction-free as possible. Thanks to Anup Deb for his design guidance.

Shortcodes

This is a sample post intended to test the followings: Default hero image. Different shortcodes. Alert The following alerts are available in this theme. Success Code: {{< alert type="success" >}} This is sample alert with `type="success"`. {{< /alert >}} Result: This is sample alert with type="success". Danger Code: {{< alert type="danger" >}} This is sample alert with `type="danger"`. {{< /alert >}} Result: This is sample alert with type="danger". Warning Code:

Configuring Site Parameters

After installing this theme, when you first run your site, it will start with the default parameters. It should look similar to this example site, but it won’t have any sections on the homepage. Don’t worry, you can easily add those sections by providing the necessary data files. In the upcoming posts, I’ll guide you on how to add those sections and customize your site. But first, let’s start with changing the site parameters. You can modify the background, logo, author information, and enable/disable various features.

Configuring About Section

The purpose of the About section is to provide a brief introduction about yourself on your website. In this post, we will guide you on how to configure the About section. For a complete reference, please check out the sample about.yaml file. To get started, create an about.yaml file in the data/en/sections directory of your website. Then, follow the instructions below. Add Section information section: name: About # Title of section (default: "") id: about # url id/slug of section *Required* enable: true # Boolean to determine if this section is enabled (default: false) weight: 1 # Order to display section in (default: alphabetical followed by weight) showOnNavbar: true # Boolean to determine if a link should be shown for this section on the navbar template: sections/about.html # allows you to point to a specific template. Template setting You have the option to customize the partial used for this section by specifying the template property. Simply save the new template in your layout/partials directory.

Configuring Skills Section

The Skills section is designed to showcase your skills and provide insights into your expertise in each skill. In this post, we will guide you on how to configure the Skills section of your site. For a complete reference, please check out the sample skills.yaml file. To begin, create a skills.yaml file in the data/en/sections directory of your site. Then, follow the instructions below. Add Section Information Add the following section metadata to your skills.yaml file: