Building a Personal Website with Hugo and Bootstrap

by

Creating a personal website is a great way to showcase your skills, portfolio, or personal blog. Using Hugo, a fast static site generator, combined with Bootstrap, a popular CSS framework, makes the process efficient and customizable. This guide will walk you through the essential steps to build your website using these tools.

Getting Started with Hugo

First, install Hugo on your computer. Visit the official Hugo installation page for instructions tailored to your operating system. Once installed, open your terminal or command prompt and create a new site:

hugo new site my-website

This command creates a new directory with all the necessary files. Navigate into your project folder:

cd my-website

Adding a Bootstrap Theme

Next, integrate Bootstrap into your Hugo site. You can do this by adding Bootstrap’s CDN links to your site’s head section. Edit the layouts/_default/baseof.html file or create a custom layout:

Insert the following inside the tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

And before the closing tag, add:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Creating Content Pages

Now, create your content pages. Use the Hugo command to generate a new page:

hugo new posts/about-me.md

Edit the newly created file in content/posts/about-me.md and add your content using Markdown. Use front matter to set the title:

Example front matter:

++

title = "About Me"

++

Follow with your content in Markdown format. Hugo will convert it to HTML during build.

Customizing Your Website

Customize your site’s appearance by editing the CSS or creating your own styles. You can also modify Bootstrap classes to match your design preferences. Use Hugo’s templating system to include common elements like headers and footers across pages.

Building and Deploying

Once your content and design are ready, build your static site with:

hugo

This command generates the static files in the public directory. You can deploy these files to any web hosting service, such as GitHub Pages, Netlify, or your own server.

Conclusion

Using Hugo with Bootstrap offers a powerful combination for building fast, responsive, and customizable personal websites. With a bit of setup, you can create a professional online presence that is easy to maintain and update. Start experimenting today and showcase your unique story to the world!