This was the first full-fledged website project I took up after learning the basics HTML, CSS and JS. I made this website for a friend of mine, who wanted a personal blog. I was quite excited as this was my first somewhat real web project.
Note: Hereafter I would refer to my friend as the client.
Introduction
The website was build using Hugo and the Bootstrap Theme for Personal Blog and Documentations. It took 6 days to complete, and I learned a lot about Hugo and static site generators in the process. I also learned about more practical aspects of JS and DOM manipulation.
I also learned how to setup Github Workflows using Github Actions to automate the deployment of the website to Github Pages. I faced several difficulties in the process of building and deplying this proccess, but I learned a lot from them.
One of the most notable things I was able to experience hands on - as I mentioned above - the use of Github Action for automating deployment. This saved me a lot of efforts as I didn’t have to manually build and deploy the website every time I made a change, and I could simply deploy from my repository itself.
Another important experience I gained from this was the fundamentals of DNS, DNS configuration and propagation.
Tech Stack
-
Hugo - Hugo is a static site generator built using Go. It has a really great documentation. The website was based on the Bootstrap Theme for Personal Blog and Documentations. I made several customizations to the theme to suit my clients needs.
-
HTML, CSS and JavaScript
-
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.
Process
Planning
I started by first asking my client regarding the requirements of the website, and what they wanted. According to the needs I sortlisted some themes and asked my client to pick one. I did this as creating a theme from scratch would have taken a lot of time, since I’m inexperienced, and the deadline was just a few days away.
Initial Setup
After that I created the project repository on Github, added the theme to the repository made some initial configuration and configured Github Workflow.
I secured the domain name the client wanted, and configured the DNS records to point to Github Pages.
After that I started working on the website.
Building the Website
I started by making some initial changes to the theme, like adding the client’s name, and other details. Made several configuration changes, added new fucntionalities to the theme, and made several other changes to the theme to suit the client’s needs.
I modified the form so it maybe compatible with Google Forms. Removed unwanted functionalities. Cleaned the code a bit and deployed.
Deployment
The Github workflow was configured to be triggered at push to the master branch, and it would build the website and deploy it to Github Pages.
Conclusion
This was a great learning experience for me, and I learned a lot from this project. I was able to learn a lot about Hugo and static site generators, and also about Github Actions and DNS configuration.