Giter Club home page Giter Club logo

Warning: This theme is going through a heavy re-write. The main branch contains some undocumented changes. Please, do not use main branch. Use latest release instead. We will release a new version once the re-write is done and the changes are documented.

Toha

Netlify Status Build Status Repository Size Lines of Codes Contributor Latest Release Last Commit Open Issues Open Pull Requests License Security Headers This project is using Percy.io for visual regression testing.

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

Thumbnail

Features

  • 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

For more details about the features please visit here.

Available Translations

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

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

Screenshots

Here are few screenshots from the example site.

Home Page Sections

Home Page Sections

List Page

List Page

Reading Page

Reading Page

Requirements

  • Hugo Version 0.109.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.

Usage

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:

1. Initialize Hugo module on you repo

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>
2. Add this theme as your module dependency

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.

3. Update your module

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

hugo mod tidy

Running Locally

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

1. Generate node dependency configuration

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
2. Install dependencies

Install the node dependencies using following command:

npm install
3. Run your site

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.

Shortcodes

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

Contributing

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.

Local Development

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

Fork

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

Using the forked theme in your own site:

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

# add the original theme as a submodule of your site if you haven't done already
$ git submodule add https://github.com/hugo-toha/toha.git themes/toha
# navigate into the toha theme folder
$ cd themes/toha
# add your own fork as a remote
$ git remote add my-fork https://github.com/<your-github-user>/toha
# create a new branch for your changes
$ git checkout -b my-feature-branch

Using the forked theme in the example site:

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

# clone the example site along with the submodules
$ git clone [email protected]:hugo-toha/hugo-toha.github.io.git --recursive
# navigate into the toha theme folder
$ cd themes/toha
# add your own fork as a remote
$ git remote add my-fork https://github.com/<your-github-user>/toha
# create a new branch for your changes
$ git checkout -b my-feature-branch

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

Open a PR

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.

Attribution

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

Dhanu N Joy's Projects

awesome icon awesome

:sunglasses: Curated list of awesome lists

docs icon docs

The MongoDB Documentation Project Source.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.