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
Greeting! Thank you for deciding to use this theme. 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.
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. Setup Default Branch GitHub don’t serve a site from hugo templates directly. Instead, we have to provide the generated (HTML, CSS, JS etc.) files after building the site. From now, we are going to maintain two branches for our site.
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.
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 except it will not have any sections on the homepage. Those sections are added via some data files. In the next few posts, I am going to show you how you can add those sections by providing the data files. In this post, I am going to show you how you can change the site parameters to change background, logo, author information, and enable/disable various features.
Configuring About Section
The About section should give the viewer a brief idea about yourself. In this post, we are going to configure the About section of your website. At first, create about.yaml file in the data/en/sections directory of your site. Then, follow the following instructions. 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.
Configuring Skills Section
Warning: New breaking changes has been introduced in the master. This guide is now outdated. It will be updated soon. Now, your site configuration files should be in data/en/sections directory and should follow this format. The Skills section should give the viewer an idea about not only the list of skills you have but also an idea of the depth of your knowledge on a particular skill. In this post, we are going to configure the Skills section of your site.
Configuring Experiences Section
Warning: New breaking changes has been introduced in the master. This guide is now outdated. It will be updated soon. Now, your site configuration files should be in data/en/sections directory and should follow this format. The Experiences section has been designed to truly reflect your career background. It should give the viewer an idea about the responsibilities you have handled in various stages of your career. In this post, we are going to configure the Experiences section of your site.
Configuring Projects Section
Warning: New breaking changes has been introduced in the master. This guide is now outdated. It will be updated soon. Now, your site configuration files should be in data/en/sections directory and should follow this format. The Projects section has been designed to showcase your projects in a meaningful way. In this post, we are going to configure the Projects section of your site. At first, create a projects.yaml file in the data directory of your site.