If you’re looking to create a fast, lightweight static website with images, custom designs, and content management, Hugo is one of the best tools out there! Whether you’re building a portfolio, a personal website, or a business site, Hugo’s flexibility and speed will get you up and running quickly.
In this blog post, we will walk through how to create a Hugo website with images, apply custom designs, and deploy it to the web.
Why Use Hugo?
Hugo is a static site generator that allows you to build websites with great speed and efficiency. It’s incredibly popular for personal blogs, portfolios, documentation websites, and more. Since Hugo generates static HTML files, your website will be fast and easy to deploy. Plus, it works well with themes, images, and custom CSS.
Step 1: Set Up a New Hugo Website
The first step is to set up a new Hugo website. If you’ve already worked with Hugo before, you might have created a blog site. For this tutorial, we will build a complete website with dynamic pages, images, and custom designs.
1.1 Create a New Hugo Site
- Open PowerShell on your system and navigate to the folder where you want to create the site:
cd C:\Users\YourUsername\Documents - Run the following command to create a new Hugo site:
hugo new site mywebsite - Navigate to the newly created
mywebsitedirectory:cd mywebsite
Step 2: Choose a Theme for Your Website
Hugo uses themes to define the design and layout of your website. To get started, we’ll choose a simple and elegant theme called Ananke.
2.1 Install the Theme Using Git
- Initialize the Git repository:
git init - Add the Ananke theme:
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke - Open the
config.tomlfile and add the theme configuration:notepad config.toml - Add this line at the top:
theme = "ananke" - Save and close the
config.tomlfile.
Step 3: Add Content to Your Website
Now that your theme is set up, let’s start adding content to your website, such as pages and images.
3.1 Create Pages
To create a new page like an About Us page, run this command:
hugo new about.md
This will create a new file called about.md in the content folder.
3.2 Edit the Content of the Page
Open the about.md file to add your content:
notepad content/about.md
Here’s an example of content you might add:
---
title: "About Us"
date: 2025-02-14T10:00:00+05:30
draft: false
---
## Welcome to Our Website!
We are a team of professionals dedicated to delivering the best services to our customers. Our mission is to provide **high-quality** resources to help you make informed decisions.
Feel free to explore the rest of the website, and let us know if you have any questions!
3.3 Add Images
- Create an images folder inside the
staticdirectory:mkdir static/images - Upload your images (e.g.,
team.jpg) into thestatic/images/folder. - In your content (like the About Us page), use the images like this:
Step 4: Customize Your Website’s Design
Let’s make your site truly unique by customizing the CSS and HTML files.
4.1 Edit the CSS
Themes come with predefined CSS files, but you can easily modify them to suit your needs.
- Navigate to the
themes/ananke/static/css/folder:cd themes/ananke/static/css/ - Open the style.css file and add your own styles. For example:
body { background-color: #f8f8f8; font-family: 'Arial', sans-serif; } h1 { color: #2c3e50; } .custom-header { background-color: #008CBA; padding: 20px; color: white; }
4.2 Edit HTML Layouts
To further customize the layout, navigate to:
themes/ananke/layouts/
You can modify the header, footer, or sidebar files to fit your design.
Step 5: Run the Hugo Server Locally
Let’s see how your site looks by running the Hugo server.
- In PowerShell, run:
hugo server -D - Open your web browser and go to:
http://localhost:1313
Your site should now be live locally with your images, content, and custom design!
Step 6: Build the Site for Deployment
Once you’re happy with the local preview, you can build the site into static HTML files ready for deployment.
- Stop the Hugo server by pressing
Ctrl + C. - Generate the static files with the following command:
hugo - This will generate a
public/folder containing the HTML files of your site.
Step 7: Deploy Your Website
Now that you have the static HTML files in the public/ folder, it’s time to deploy your site to the web!
7.1 Deploy to GitHub Pages
You can use GitHub Pages to host your Hugo site. Follow the official GitHub Pages deployment guide to get started.
7.2 Deploy to Netlify
- Go to Netlify.
- Drag and drop your
public/folder into the dashboard to deploy the site instantly.
7.3 Deploy to Any Web Hosting
Upload the contents of your public/ folder to any web hosting provider of your choice (e.g., via FTP, cPanel, etc.).
Conclusion
Building a Hugo website with images and custom designs is a simple process that offers great flexibility and speed. By following these steps, you’ve created a customized static website that’s ready for deployment. Whether you’re using GitHub Pages, Netlify, or any hosting provider, you can now easily share your website with the world!
