How to Create a Hugo Website Using an Existing Theme

Hugo is a fast and flexible static site generator written in Go. It allows you to build websites quickly and efficiently. One of the great features of Hugo is its support for themes, making it easy to create a professional-looking website with minimal effort. In this guide, you’ll walk you through the steps to create a Hugo website using an existing theme.

Prerequisites

Before you begin, ensure you have the following:

Hugo installed on your computer. You can download and install Hugo from the official website: Hugo Installation.
Basic knowledge of the command line.

Step 1: Choose a Theme

The first step in creating a Hugo website using an existing theme is to choose a theme that suits your project. You can find a wide variety of Hugo themes on the Hugo Themes website. Browse the themes, and when you find one that you like, take note of its name.

Step 2: Create a New Hugo Site

Open your command line interface.
Navigate to the directory where you want to create your Hugo website using the cd command.
Use the following Hugo command to create a new site:

hugo new site your-website-name

Replace your-website-name with the name of your website.

Step 3: Add the Theme

Once your site is created, navigate to your site’s root directory using the cd command:

cd your-website-name

Add the theme to your site. You can do this using Git if the theme is hosted on GitHub. Use the following command to add a theme:

git submodule add https://github.com/author/theme-name themes/theme-name

Replace author with the theme author’s username, and theme-name with the theme’s repository name.

If the theme is not hosted on GitHub, you can simply copy the theme’s folder into the themes directory.

Step 4: Configure Your Website

Hugo uses a configuration file named config.toml (or config.yaml or config.json) to set up your website. You can create this file in your site’s root directory if it doesn’t already exist.
Customize the configuration to your liking. You’ll need to specify the theme you want to use in your config.toml file. For example:

theme = "theme-name"

Replace theme-name with the name of the theme you added in step 3.

Step 5: Create Content

Now that your site is configured with a theme, you can start creating content. Hugo uses content files written in Markdown, HTML, or other supported formats.

Create a new content page:

hugo new posts/my-first-post.md

This command will generate a new Markdown file in the “content/posts” directory. You can replace “my-first-post” with your desired page name.

Edit the content of the newly created file with your content, and Hugo will render it according to the theme’s style.

Step 6: Build Your Website

To build your website, run the following Hugo command in your site’s root directory:
```
hugo
```
Hugo will generate your website in the “public” directory.

Step 7: Preview Your Website

To see your website in action before deploying it, you can use Hugo’s built-in server:

Run the following command:
```
hugo server
```
Open your web browser and navigate to the URL displayed in the command line output (usually http://localhost:1313/). You should see your Hugo website with the selected theme.

Step 8: Customize and Deploy

You can further customize your website by modifying the theme’s templates, styles, and other configuration options. Once you are satisfied with your website, you can deploy it to your preferred hosting platform.

Congratulations! You’ve successfully created a Hugo website using an existing theme. You can continue to add content, make customizations, and deploy your site to make it live on the web.