Migrating from Wordpress to Hugo - Creating Your First Blog

Hugo, a popular static site generator, offers simplicity, speed, and flexibility for creating and maintaining websites. In this blog post, I will walk you through the process of creating a Hugo website from scratch. I will cover the installation of Hugo, setting up a theme, writing your first page, pushing changes to GitHub for version control, and configuring deployment using Netlify. Whether you’re using Windows or macOS, we’ll provide the necessary commands to ensure a smooth journey.

Installing Hugo

Begin by installing Hugo on your machine. Follow these steps based on your operating system:

For Windows:

Download the latest Hugo binary from the Hugo releases page (https://github.com/gohugoio/hugo/releases).
Extract the downloaded archive to a folder of your choice.
Open a command prompt and navigate to the folder where you extracted the Hugo binary.
Verify the installation by running the command: hugo version.

For macOS:

Open a terminal.
Install Homebrew if you haven’t already by running the command: /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)".
Install Hugo using Homebrew by running the command: brew install hugo.
Verify the installation by running the command: hugo version.

Installing a Theme

Once Hugo is installed, it’s time to select and install a theme for your website. Follow these steps:

Visit the Hugo Themes website (https://themes.gohugo.io/) to explore the available themes.
Choose a theme that suits your style and preferences.
In your terminal or command prompt, navigate to your Hugo website’s root directory.
Run the command: git init to initialize a Git repository.
Run the command: git submodule add <theme-repository-url> themes/<theme-name> to add the theme as a submodule. Replace <theme-repository-url> with the URL of the theme’s Git repository and <theme-name> with your desired name.
Open the config.toml file in your text editor and set the theme parameter to the name of the theme you installed.

Writing Your First Page

Now it’s time to create your first page. Follow these steps:

In your terminal or command prompt, navigate to your Hugo website’s root directory.
Run the command: hugo new <page-name>.md to create a new Markdown file for your page. Replace <page-name> with a descriptive name for your page.
Open the newly created Markdown file in your text editor and start writing your content using Markdown syntax.
Save the file when you’re done.

Pushing Changes to GitHub

Version control is crucial for maintaining your website’s codebase. Let’s push our changes to a GitHub repository:

Create a new repository on GitHub.
In your terminal or command prompt, navigate to your Hugo website’s root directory.
Run the following commands to add, commit, and push your changes to GitHub:

$ git add .
$ git commit -m "Initial commit"
$ git remote add origin <repository-url> (replace <repository-url> with the URL of your GitHub repository)
$ git push -u origin main

Configuring Deployment Using Netlify

Netlify offers a straightforward and efficient way to deploy your Hugo website. Follow these steps:

Sign up for a free Netlify account at https://www.netlify.com/.
Connect your Netlify account to your GitHub repository.
Configure your deployment settings by specifying the build command as hugo and the publish directory as public.
Netlify will automatically build and deploy your Hugo website whenever you push changes to your GitHub repository.

Conclusion

Congratulations! You have successfully created your Hugo website from scratch. By following the steps outlined in this guide, you’ve learned how to install Hugo, select a theme, write your first page, version control with GitHub, and deploy using Netlify. With Hugo’s simplicity and flexibility, you’re now equipped to create and manage dynamic and efficient websites with ease. Happy Hugo-ing!