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
- Install Chocolatey, a package manager for Windows
- Install Git, a version control tool
Make sure Chocolatey and Git were install properly by typing
choco
andgit
respectively in your command prompt (CMD)
- 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
- Install Git, a version control tool
- 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
- 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
- Create a hugo site:
hugo new site yoursite
, this will create a new folder named ‘yoursite’. - Go into the directory:
cd yoursite
- Initialise an empty Git repository:
git init
- 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.
- 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.
- Start Hugo’s development server to view your website:
hugo server
- You should now be able to view your website in your browser at http://localhost:1313 .
- 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.
- Type
hugo
in the terminal, make sure the current directory is inside the project’s foldercd C:\Users\<your username>\<location>\yoursite
- You will see a
public
folder appear inside ‘yoursite’, it contains all the HTML, CSS, … etc file generated by Hugo. - Create a new repo on GitHub, go to https://github.com/new, name the repo
<yourusername>.github.io
- 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
- On your GitHub repo, go to settings>Pages>Build and deployment, choose Deploy from a branch and save.
- Go to your repo and create a new file call
_config.yaml
theme: minima
in the file and commit (save).8. Go to settings>Pages, it should shown that your website is live:
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.
- 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.
- Checkout your domain name with the default option.
- Go to your github repo > settings>pages and add your custom domain.
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)
- 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
- 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.