Step 1: Install Hugo

Before diving into website creation, you need to install Hugo on your computer. Hugo is compatible with Windows, macOS, and Linux. Visit the official Hugo website (https://gohugo.io/) for detailed installation instructions. Once installed, open your terminal or command prompt and verify the installation by typing hugo version.

Step 2: Create a New Hugo Site

With Hugo installed, create a new site by running the following command in your terminal:

1

hugo new site mywebsite

Replace “mywebsite” with your desired site name. This command generates a new Hugo site with a basic structure.

Step 3: Choose a Hugo Theme

Hugo offers a variety of themes to give your website a polished look. Visit the Hugo Themes website (https://themes.gohugo.io/) to explore available themes. Once you find one you like, download it or add it as a submodule to your site’s repository.

To add a theme as a submodule, navigate to your site’s root directory and run:

1

git submodule add <theme-repository-url> themes/<theme-name>

Step 4: Configure Your Site

Hugo uses a configuration file (config.toml, config.yaml, or config.json) to manage site settings. Customize this file in your text editor to define parameters like the website title, description, and other theme-specific configurations. Refer to the theme’s documentation for guidance.

Step 5: Create Content

Now it’s time to add content to your site. Create a new post or page using the following command:

1

hugo new <section-name>/<post-title>.md

Edit the generated Markdown file to include your content. Hugo uses Markdown for easy content creation, supporting text, images, and more.

Step 6: Preview Your Site

To see your site in action, run the following command in your terminal:

1

hugo server -D

This command starts a local development server, allowing you to preview your site at http://localhost:1313/. The -D flag includes drafts in the preview.

Step 7: Customize and Style

To truly make your personal website yours, dive into customization. Explore the theme’s documentation and adjust the layout, styling, and content as needed. Hugo’s simplicity and flexibility make it easy to tailor your site to your preferences.

Step 8: Build and Deploy

Once satisfied with your site, build the static files using:

1

hugo

This command generates the final HTML, CSS, and JavaScript files in the public directory. You can deploy these files to any web hosting service that supports static websites, such as Netlify, GitHub Pages, or Vercel.