A Hugo theme for a personal portfolio with minimalist design and responsiveness.

• Example Site: hugo-toha.github.io
• Documentation: toha-guides.netlify.app

• Minimalist Design
• Fully Responsive
• Multiple Language Support
• Carefully Designed Cards
• Experience Timeline
• Achievement Gallery
• Sidebar to Categorize the Posts
• Short Codes
• Analytics Support
  • GoatCounter
  • counter.dev
  • Google Analytics
  • Matomo/Piwik
• Comment Support
  • Disqus
  • Valine
  • Uttarances
  • Giscus

For more details about the features please visit here.

• English
• বাংলা
• Français
• Indonesian
• Deutsch
• Español
• 简体中文
• हिन्दी
• Italiano
• 日本語
• 한국어
• русский
• suomi
• Tiếng Việt
• Turkish
• Arabic (العربية)
• Português Europeu
• Català
• Português Brasileiro
• Nederlands
• Hebrew

To know more about how to translate your site, please visit here. Follow, the data and post format from this example site.

Here are few screenshots from the example site.

• Hugo Version 0.118.0 (extended) or higher
• Go language 1.18 or higher (require for hugo modules)
• Node version v18.x or later and npm 8.x or later.

The easiest way to use this theme is to fork hugo-toha.github.io sample repo.Then change the configurations according to your need.

If you want to start from scratch, then follow these steps:

At first, initialize Hugo modules in your repo. This will create a go.mod file.

hugo mod init github.com/<your username>/<your repo name>

Now, in your config.yaml file, add a module section.

# Use Hugo modules to add theme
module:
  imports:
  - path: github.com/hugo-toha/toha/v4

Check this sample config.yaml for further reference.

Now, run this command to load this theme as your module.

hugo mod tidy

Now, you can run your hugo site locally with the following steps:

Now run the following command to generate node dependency configuration. This will create the a package.json file in you repo.

hugo mod npm pack

Install the node dependencies using following command:

npm install

Now, run you site locally using following command.

hugo server -w

When you run your site for first time, it will start with the default parameters. It should look similar to the example site. However, it will not have any sections in the homepage as we haven't configured them yet. You can configure your site by following the guides from here.

Here, are some handy shortcodes you can use with this theme.

• Alert
• Image
• Split
• Vertical Space
• Video
• Mermaid

You can contribute to this theme in various ways. You can report a bug, file an feature request, send a PR, share your thoughts etc.

Pull requests are most welcome and I will be happy to review. Just follow the following principles:

• Keep it simple.
• Keep it consistent with the design.
• Use as few dependencies as possible.
• Have patience.

I am not a web developer. I have created this theme for my personal needs. So, it is reasonable to have some flaws in the codes. Feel free to open issues and PRs acknowledging the problems.

For local development, you can make changes in the theme submodule and test the changes against your own site or this example site locally.

At first, fork this repo. Then, follow the following steps to use the forked theme for local developments,

If your want to run your local development against this example site, follow the following steps:

# go to exampleSite directory
$ cd exampleSite
# install hugo modules
$ hugo mod tidy
# install dependencies
$ hugo mod npm pack
$ npm install
# run the example site locally
$ hugo server -w

Now, you can make change in the theme and they will be reflected immediately on the running site. If you need to change any configuration, you can do that in the config.yaml file inside exampleSite folder. If you need to add any content or data, you can create the respective folder inside exampleSite directory and add your desired content or data there.

If you want to run your local development against your own site, follow the following steps:

Replace the theme module:

Open your site's go.mod file and replace the github.com/hugo-toha/toha/v4 with your forked repo's path. For example, if your forked repo is github.com/<your-github-user>/toha, then replace the github.com/hugo-toha/toha/v4 with github.com/<your-github-user>/toha/v4.

module github.com/hugo-toha/hugo-toha.github.io

go 1.19

require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect

replace(
    github.com/hugo-toha/toha/v4 => github.com/<your-github-user>/toha/v4 <git branch>
)

For interactive development, you can replace the theme with your locally cloned fork. For example, if you have cloned your fork in /home/my-projects/toha, then replace the github.com/hugo-toha/toha/v4 with /home/my-projects/toha.

module github.com/hugo-toha/hugo-toha.github.io

go 1.19

require github.com/hugo-toha/toha/v4 v4.0.1-0.20231229170427-d3968ca711ef // indirect

replace(
    github.com/hugo-toha/toha/v4 => /home/my-projects/toha
)

Update dependencies:

# update hugo modules
$ hugo mod tidy
# install dependencies
$ hugo mod npm pack
$ npm install

Run your site locally:

$ hugo server -w

From there you can make changes to the source code of the theme while testing with your running Hugo site or the example site.

When the changes look good, commit and push them to your fork.

# stage all the changes
$ git add .
# commit the changes with a meaning full commit message
$ git commit -m "A meaningful commit message"
# push the commit to your fork
$ git push my-fork my-feature-branch

Then, open a PR against main branch of hugo-toha/toha from the my-feature-branch branch of your own fork.

• Thanks Anup Deb for his design guidance.
• Many of the illustrations have been taken from iconscout.