In today’s digital world, having a personal website is a great way to showcase your skills and talents. As a software professional, it is more important than ever to have a website that highlights your portfolio, resume, and blogs.
Creating a personal website can be a daunting task, but with the right tools and resources, it can be a rewarding experience. In this blog post, we will discuss how to create a personal website using Hugo software and its themes, as well as the importance of having a personal website as a software professional.
Firstly, let’s talk about why having a personal website is important in the modern IT world. With so many software professionals competing for jobs, it’s essential to stand out from the crowd. A personal website allows you to showcase your skills, experience, and expertise in a way that a traditional resume cannot.
Moreover, a personal website can be a platform for your blog posts. This can help you establish yourself as an expert in your field and provide valuable insights to others. This can help you gain credibility and increase your visibility among potential employers and clients.
In the world of web development, there are countless tools and platforms available to help developers create beautiful and functional websites. One such tool is Hugo, a popular static site generator that is used by developers all over the world to build fast and secure websites. Hugo and its themes helped me to build this beautiful website quickly and easily.
Hugo and its themes
Hugo is an open-source static site generator that is written in the Go programming language. It was first released in 2013 and has since gained a reputation as one of the fastest and most efficient static site generators available. Hugo works by parsing plain text files, such as markdown files, and converting them into HTML pages that can be served by a web server.
One of the major benefits of using Hugo is its flexibility. With Hugo, developers can create websites of any kind, from simple personal blogs to complex e-commerce sites. Additionally, Hugo allows for easy customization and is designed to work seamlessly with a wide range of themes. Themes are pre-built templates that developers can use to quickly create a beautiful and functional website. Hugo has a vast theme gallery with a wide variety of themes to choose from. These themes can be customized to suit your specific needs, making it easy to create a website that matches your style and branding.
When selecting a Hugo theme, there are a few things to consider. First, you should consider the purpose of your website. If you’re creating a personal blog, you may want a theme that focuses on typography and readability. Alternatively, if you’re creating a portfolio or business website, you may want a theme that features a lot of visual elements and calls to action. Another factor to consider is responsiveness. In today’s mobile-first world, it’s essential to have a website that is optimized for all devices, including smartphones and tablets. Fortunately, most Hugo themes are designed with responsiveness in mind, so you can rest assured that your website will look great on any device.#
Now, let’s discuss how I created a personal website using Hugo software and its themes.
Building a Website
To get started, you’ll need to download Hugo from their website and install it on your local machine. Once installed, you can start creating your website by choosing a pre-built theme from the Hugo theme gallery or building your custom theme. To create your website, you’ll need to create a new project directory and navigate to it in your terminal. Once there, you can initialize a new Hugo site using the following command:
$ hugo new site my_website
This will create a prebuilt configuration and folders required to launch the static website when you run locally. To install a theme of your choice, you can follow the instructions on the Theme documentation page. Now, let’s say you have chosen a theme. Do the following to set up your project with the chosen theme
- Download the theme from the Hugo Themes Website. It will be in the
zipformat - Unzip the downloaded file. You will find similar folders and files as in your project
- Copy the extracted theme from
<extracted-theme>/themes/<theme-hugo>into thethemesfolder of your Hugo project - Your project folder structure will not be
my-website/themes/<theme-hugo> - Inside the
<theme-hugo>, you can find theexampleSitefolder. Copy everything in that folder and paste it into themy-websiteroot folder
Your basic setup is done!
Running a Hugo Website
At this stage, you can expect to run only the example site of the theme that you chose. This is the first step. In the my-website folder where all the files and folders from exampleSite are copied, run the following command in the terminal.
$ cd my-website
$ hugo server -D
The default URL for the Hugo website, when run locally, is http://localhost:1313. You can change the port with the flag -p <port number>. For more options, run hugo --help
Configurations
Hugo Website default configuration file is called config.toml which can be found in the root folder of the project. The location of this configuration differs for some themes but as far as I have seen, they are in the root folder. Some themes will have additional files with toml extensions. I am not going to go into details about the changes I made as they will differ for each theme so my suggestion would be is to go through the theme documentation page to get a better understanding.
The theme I use for this website has only one configuration file and all the parameters required by the theme were in that single config.toml file. Well, I chose this theme for that very reason.
Content Creation
Once you have made all the custom configurations for your website, the next step would be is to add content to your website. All the content you might be looking at in the example site comes from the .md files in the content folder of your project. For example, all of my experience and skills section on my website comes from about.md file.
The content folder will have subfolders depending on the theme setup. The theme I use has blog and portfolio as subfolders while other links are straightforward .md files in the content folder. Generally, Hugo themes have two types of pages - a list page and a single page. The list page contains all contents on the same page grouped as a list. For example, the landing page of my website contains the banner information to the contact details which can be scrolled down to view them. The single pages are the ones like blog and portforlio pages. When a link is clicked, it will open a separate single page on your browser to display the information.
To continue building your website, you need to add content that is relevant to you and your profile. You can either delete all the files in the content folder and create each file as and when required. This method would require you to understand how the theme works and rely heavily on the theme documentation. Instead, you can choose to edit the existing files, which is what I did, with my information. For blogs and portfolios, the best way is to remove all files and start fresh. If you’re using IDE to create content for your website, you can create files on the content page with .md extension. If you’re a terminal lover, run hugo new <page-name>.md.
Congratulations 🎊🎉! You now have your website running locally. Let’s see how to run them on AWS Infrastructure in my next blog post.
