Creating Portfolio Tutorial

Curious how I customized my website? I created the easiest step by step guide for beginners to get started!

1. Install Homebrew

2. Install Hugo Run these commands!

   • • /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”
   • brew install hugo

3. Run hugo to deploy website

   • Follow this website:
     • https://gohugo.io/getting-started/quick-start/
   • Use VSC to open folder
   • Now you should have some base code to work with. Feel free to pick a theme online that suits you!

4. Transfer to Github

   • Create empty repository on github (make sure to have completely empty repo or it will throw conflict errors)
   • Run these commands in terminal to initialize repository and set url to push to github
     • git init
     • git add .
     • git commit -m “Initial commit”
     • git remote add origin
     • git branch -M main
     • git push -u origin main

5. Configure GitHub Pages

   • On Github go to ‘Settings’ > ‘Pages’
   • In the “Source” section:
     • Select /docs
   • Now this should work!
     • https://.github.io//

6. Adding a domain [optional]

   • Buy a domain (I used Cloudflare, any DNS works)
   • add records for DNS management
   • Add the sections for ‘CNAME, AAAA, A’
     • Follow this guide for more info
     • https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site

7. Connecting domain to GitHub Pages

   • add this line to config.toml or config.yml of your repo
     • publishDir = “docs”
   • You also need a CNAME file with the website domain
   • rebuild the site in terminal with this command:
     • hugo
   • run these commands to push changes
     • git add .
     • git commit -m “Generate site in docs folder”
     • git push
   • add custom domain and test it
   • Enable HTTPS

8. Visit < domain name website > to confirm the site works.

Common mistakes:
Github hosts the pages thru reading from the docs/ repository
Therefore, we tell Hugo that we want to publish the autogenerated files into docs
However, it removes the CNAME file in docs everytime we push a new change that requires us to regenerate the docs file
Therefore, we need to add CNAME back everytime we want to push a new change if we regenerated the docs file!