My second website, and my own personal one at that. This one took quite a lot of effort, and is still an active project. I have planned many more features for this one.
Introduction
I wanted a simple and clean website, which would be easy to both maintain and navigate and would also be fast. Since I had a little bit of experience with hugo after building Portfolio Project 1. I chose to go along with it.
I selected Hugo Liftoff theme, as it suited my need. It was simple, light and extremely fast. It also had a lot of prebuilt features which I could adapt without much modifications. And due to its simple design, it was easy to customize, without breaking too many things in the process.
Tech Stack
-
Hugo - Hugo is a static site generator built using Go. It has a really great documentation. The website was based on the Hugo Liftoff.
-
HTML, CSS and JavaScript
-
SCSS
-
Github Pages - I hosted the website on github pages, it provides a free hosting service for static websites, and also a really easy way to deploy websites using Github Actions.
-
Github Actions - I automated deployment using Github actions, it provides a pre-built template to automate your workflow for Hugo and many other different tech stacks, and you can configure then as per your need, and a lot more.
-
Pagefind - I used Pagefind to index the website after build and add search functionality to it.
Process
Planning
I had to first sort out what was the minimal need I had in the website in the first go. This included a simple front page, a blog, a projects page and a contact page. The functionalities I wanted were, social-link sharing, responsiveness to both scale and dark/light themes, and a search functionality.
Hugo Liftoff fullfilled most of these criterias and thus I decided to finalize this theme for the base of my website.
Building
Even though it had a lot of the features and the structure I was looking for it still lacked in several aspects. It lacked a search functionality, the dark mode toggle was an issue, the menu structure wasn’t as per my need and several other things.
Thus, I had to make a few changes as per my convinience, and the simple nature of this theme made it really easy for me to do that.
I used Pagefind to add search functionality to the website. I had to make several changes to accomodate for it, though most of the UI part is handled by Pagefind itself, which can be a both a pleasure and a nightmare to work with. For what I wanted to do with this website - it was a nighmare. Primarily, because I needed a high level of customization, for the kind of look and fucntionality I wanted. Thus, in the end I had to make a compromise, due to the deadline I had set for this project.
Deployment
As I mentioned above, I used Github Actions to automate the deployment of the website. I had to made changes so as to run pagefind after the Hugo build process as Pagefind works on generated HTML to index the pages.
Conclusion
This was also a great learning oppertunity, I learned several new things and had a lot of practice with CSS and SASS as well as JS. I learnt how to build search functionality, but I haven’t applied that on this website, I just used a prebuild idexing tool as I mentioned, as well as it’s UI.
I have several changes planned for future which include:
- Custom Search UI
- ToC in the project pages