Create a Portfolio site with a Blog using Hugo and GitHub Actions

In this article I will be demonstrating on how to create a personal portfolio site + blog with hugo, github pages, and github actions. After creating your site will be like this iqbalpb01.github.io

Fork the Repository

I have created a customized portfolio with a blog in GitHub Repository(project) using a theme Hugo Coder

https://github.com/iqbalpb01/iqbalpb01.github.io

You can find in the top-right corner of the page, click Fork

Change Repository Name

Change Repo Name

⚠️Note

  • Repo name should be username.github.io in my case iqbalpb01 is my user name, so my repo name is iqbalpb01.github.io. You can find username top right corner

Activate GitHub Pages

⚠️Note

  • Make Sure that branch is gh-pages & folder is /(root), after changing make sure to save

Customize your Site

You can customize your site by editing config.toml file in the repository

To customize config.toml file

Step 1: Click on config.toml

Step 2: Click on edit button

Step 3: Add your own contents by replacing my contents, to know more about Configuration click here

Change Favicon

You can change by creating and add it into images folder in static

Generate Favicon

Favicons can generated easily from online favicon generating website in this tutorial I’m using favicon.io

Delete favicons from the Repository

You can find the favicons files inside static/image folder

Delete the existing favicon files

Delete this .png files

You can delete this file by selecting each file and a delete icon will be visible in the next page

Click on Delete icon

After pressing Delete icon click on Commit Changes

Click on Commit Change to Delete the file

Upload your favicon files

Click on Add file Button

Add your Photo

You can add your by replacing avatar.jpg file static/image folder

Replace avatar.jpg file with your photo(name of the uploaded file should be avatar.jpg)

Delete & Add Photo

You can find how delete and upload a file in above section(favicon deleting adding steps)

⚠️ Note

  • Photo name should be avatar.jpg, you should rename before uploading and make sure that it is a jpeg file

Publish the site

Create a GitHub Action to generate static site

Github Actions enables you to create custom software development life cycle workflows directly in your Github repository. 

Add Repo Secrets before Creating Actions

Create a personal token

Link to generate Token -> github.com/settings/tokens/new

Create new Repository Secret
Make Sure Name should be TOKEN

Add Username and Email as Repository Secret

Mail Secret
Add a new secret

Make sure that your Name value should be MAIL

Enter your mail and Name should be MAIL
Username

Make sure that Name value should be USERNAME

Enable Actions

Click on Actions tab
Create New Workflow

Update Actions Files

You can replace auto generated template with the main.yml file mentioned below

After replacing the content click on Start Commit

Your site is Ready