image description

Having a personal website is not just a luxury—it’s a necessity for standing out in the competitive job market. Beyond simply listing your skills and experiences like a traditional resume, a personal website offers a dynamic platform to showcase your projects, passions, and personality to potential employers.

In this article I will show you how you can create your personal website in the easiest and fastest way possible, without costing a penny.

Prerequisite: Although it is not needed in this tutorial, it would be better if you are familiar with CLI (Command Line Interface) and know how to do version control using Git to update your website afterwards.

Step 1: Install some tools Link to heading

For Windows User: Link to heading

  1. Install Chocolatey, a package manager for Windows
  2. Install Git, a version control tool

Make sure Chocolatey and Git were install properly by typing choco and git respectively in your command prompt (CMD)

  1. Install Hugo, the open-source static site generator by typing choco install hugo-extended in your CMD.

Type hugo version in your CMD to make sure its installed properly

For Mac User: Link to heading

  1. Install Git, a version control tool
  2. Install Hugo, the open-source static site generator by typing brew install hugo in your terminal.

Type hugo version in your CMD to make sure its installed properly

Step 2: Building your website Link to heading

  1. Choose a location on your pc where you want to store your website folder, in your CMD/terminal, type cd C:\Users\<your username>\<location>,
    eg: I want to save it on Desktop: cd C:\Users\ACERPC\Desktop
  2. Create a hugo site: hugo new site yoursite, this will create a new folder named ‘yoursite’.
  3. Go into the directory: cd yoursite
  4. Initialise an empty Git repository: git init
  5. Clone the Ananke theme into the themes directory, adding it to your project as a Git submodule:
    git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

The Ananke theme is just for demo purpose, you can choose any theme you like from here and replace the GitHub link.

  1. Append a line to the site configuration file, indicating the current theme:
    echo "theme = 'ananke'" >> hugo.toml

hugo.toml is the configuration file of your website.

  1. Start Hugo’s development server to view your website: hugo server
  2. You should now be able to view your website in your browser at http://localhost:1313 .
  3. If something show up, Kudos! You have just create your website, press Ctrl+C in the terminal to stop Hugo.

Step 3: Publish and Deploy Link to heading

You would most likely want to add some content to your website before publishing, since the ways for adding content varies from theme to theme, I won’t go into the details here, you might want to refer to each theme’s docs.

  1. Type hugo in the terminal, make sure the current directory is inside the project’s folder cd C:\Users\<your username>\<location>\yoursite
  2. You will see a public folder appear inside ‘yoursite’, it contains all the HTML, CSS, … etc file generated by Hugo.
  3. Create a new repo on GitHub, go to https://github.com/new, name the repo <yourusername>.github.io
image description
  1. Upload the content in your public folder to GitHub, go to your terminal and insert:
    cd public
    git init
    git add .
    git remote add origin https://github.com/username/username.github.io.git
    git commit -m “first commit”
    git push origin master
  1. On your GitHub repo, go to settings>Pages>Build and deployment, choose Deploy from a branch and save.
image description
  1. Go to your repo and create a new file call _config.yaml

image description
7. Add this line theme: minima in the file and commit (save).
8. Go to settings>Pages, it should shown that your website is live:

image description

GitHub pages is not the only option to host your website, more options can be found here

Step 4: Add a custom domain (Optional) Link to heading

While using the free domain ‘.github.io’ to host your website is good enough, adding a more recognisable domain like .com, .ai makes your website looks more professional, the only downside is that it is not free.

  1. Check the availability of your preferred domain name, I personally would recommend you to get your domain from NameCheap because I found it cheaper than other domain seller.
  2. Checkout your domain name with the default option.
  3. Go to your github repo > settings>pages and add your custom domain.
image description

Note: This will create a file CNAME in your repo. 4. Go to your domain mangement dashboard > advanced dns (here I use NameCheap as example)

image description
  1. Add the following to your host records one by one, (type-A Record, Host-@):
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
image description
  1. You are good to go! Your should be able to visit your website by custom domain within 24 hrs, the dns will generally propagate through the world within 24hrs, you can check the status at www.dnschecker.org

Hope you find this article helpful 😄. If you have any question, you’re welcome to leave a comment below, or email me at jtan515@e.ntu.edu.sg.

References Link to heading

  1. https://gohugo.io/documentation/
  2. https://medium.com/gitconnected/build-a-personal-website-with-github-pages-and-hugo-6c68592204c7
  3. https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site