Theme Installation

Prerequisites

You need to fulfill some prerequisites to configure your machine, before starting the development process of your static site via Hugo.

1. Install Hugo
2. Install Go
3. Install Nodejs

Install Hugo

Install Hugo with the following command on your Terminal according to your operating system.

winget install -e --id Hugo.Hugo.Extended

hugo version

brew install hugo

hugo version

hugo version

Or

Go to the official site to Download and Install Hugo Extended.

Install Go

Install Go with the following command on your Terminal according to your operating system.

winget install -e --id GoLang.Go

go version

brew install go

go version

go version

Or

Go to the official site to Download and Install Go.

Install Nodejs

Install Nodejs with the following command on your Terminal according to your operating system.

winget install -e --id OpenJS.NodeJS.LTS

node -v

brew install node@18

node -v

node -v

Or

Go to the official site to Download and Install Nodejs.

Setup Your Project

1. Unzip the downloaded file, and the unziped folder is your main theme, which you will be working with.

   📂 dot-hugo-master (Unzipped Folder)
   

   After unzipping, your folder should have a -master or -main suffix. remove the suffix from the folder name. like from dot-hugo-master to dot-hugo.

2. Launch the Terminal on the specific directory where you prefer to save your project.

3. Use the following command to create a new site. It will add a folder with your given PROJECT NAME.

   hugo new site my-project
   

4. Delete the hugo.toml file from the my-project folder.

5. Copy the Main Theme into the my-project/themes folder. Resulting in a folder structure like my-project/themes/dot-hugo/

   

6. Copy all files from the my-project/themes/dot-hugo/exampleSite folder into the root folder (my-project/). This action will overwrite any existing files and folders. You can delete the exampleSite folder afterwards.

   

7. Additionally, copy the package.json file from my-project/themes/dot-hugo to the root folder (my-project). If your theme doesn’t have a package.json file, you can proceed to the next step.

Run Your Project

1. Open the terminal on the my-project/ folder.
2. Run npm install to install all the dependencies. If you don’t have a package.json file, you can proceed to the next step.
3. Then, run npm run dev to serve this theme on your localhost. If you don’t have a package.json file, run hugo server instead.
4. After successfully serving the theme, you will receive a localhost address. Open this address in your browser to see the theme.

Build Your Project

After completing your development process, you can build your project for production. To build your project, run npm run dev. If you don’t have a package.json file, run hugo instead.