Building a Personal Website (Mini-Series Part 3)

3 min readDec 16, 2020

Hosting a Website

Now that we’ve built our website, we need to host it somewhere. Web hosting is when a hosting provider allocates space on a web server for a website to store its files. Web hosting happens when the files that make up a website are uploaded from a local computer on to a web server. There are many options for hosting your website but in this example, we will be using Github Pages.

Architecture

You will be creating two repositories, one which hosts your Hugo code (the project repository) and the other which hosts the static files that Hugo produces (the static file repository) to showcase your website. In the project repository, we will have adeploy.shscript that will create the static files for your project and upload them to your static files repository. These are the files that will be presented to the world.

Setting up the Project Repository

Create a new GitHub repository. For example personal_website

2. Change directory into your site folder locally

$ cd ~/code/blog/personal_website

3. Now let’s add the deploy.shwith the following content to your repository

4. Stage files that need to be committed to the newly created repository

$ git add --all

5. Commit files that have been staged in your local repository

$ git commit -m “Initial commit”

5. Copy the remote repository URL and add your GitHub repository as remote

$ git remote add origin git@github.com:tkrishnan91/personal_website.git

6. Set the branch as main

$ git branch -M main

7. Push your initial commit

$ git push -u origin main$ Counting objects: 25, done.Delta compression using up to 4 threads.Compressing objects: 100% (20/20), done.Writing objects: 100% (25/25), 11.05 KiB | 2.21 MiB/s, done.Total 25 (delta 3), reused 0 (delta 0)remote: Resolving deltas: 100% (3/3), done.To github.com:tkrishnan91/personal_website.git* [new branch]      main -> mainBranch main set up to track remote branch main from origin.

Congratulations! You finished setting up your project repository. Now onto the static files repository.

Setting up the Static Files Repository

Create a <USERNAME>.github.io repository
Change directories into your site directory
Create a submodule for the public folder (this is where Hugo puts the static files when you run the compile command)

git submodule add -b main https://github.com/<USERNAME>/<USERNAME>.github.io.git public

4. Navigate to your repository settings, scroll down to Github Pages, and select source as main

9. Select the theme chooser and select the Caymantheme (even though this is not a Jekyll project, GitHub needs a default theme to be set)

Congratulations! You finished setting up your static files repository.

Deploy your website

Navigate to the site repository and edit the baseURL attribute of theconfig.toml file in your site folder and update it to be <USERNAME>.github.io

Anytime you want to make updates to your personal website you can make changes locally, run deploy.shand it will send changes directly to Github.

Your site should now be published at https://<USERNAME>.github.io.

Continue following this mini-series to learn how to create a custom domain name for your personal website. Go to Part 4 of the mini-series.