Prerequisites

Before we start, you will need to have installed :

Creating the blog

1. Create a new Hugo project.

hugo new site "blog-name"
cd "blog-name"

2. Add a theme for your blog.

For my blog I used Gokarna. You can find a list of themes on the hugo website.

git init 
git submodule add https://github.com/526avijitgupta/gokarna.git themes/gokarna

3. Configure and custom your blog.

Each theme comes with a config.toml file that you can use to configure your blog. For mine, I decided not to change a lot of things and just added my socials and an avatar.

[params]
  avatarURL = "/path/to/avatar.png"
[menu]
  [[menu.main]]
    identifier = "github"
    url = "https://github.com/roxxorarc"
    weight = 3
    pre = "<span data-feather='github'></span>"

  [[menu.main]]
    identifier = "mail"
    url = "mailto:mberrah42@gmail.com"
    weight = 4
    pre = "<span data-feather='mail'></span>"

4. Create your first post.

hugo new posts/first-post.md

At this stage you can push your blog to github with the given commands on your empty repository.

5. Using FrontMatter

FrontMatter is a tool that allows you to create and edit your blog posts directly from your VSCode.

All you have to do is install the VSCode extension and click on Initialize Project in the extension tab.

You can now select hugo as your framework and choose the folder where you want to create your posts, which is the content folder in your hugo project.

To test it, let's edit the first-post.md file that we created earlier.

---
title: first post
date: 2023-02-06T01:51:37.036Z
draft: false
description: ""
tags:
type: post
showtableofcontents: true
slug: first-post
keywords: []
---

# First post
This is my first post.

## Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet 
nisl, eget aliquam nisl nisl

Voilà ! You can now create and edit your posts directly from VSCode.

6. Deploying the blog

We will now see how to deploy our blog to Firebase.

Note that deploying to Firebase is not mandatory, you can deploy your blog to any hosting service you want, the easiest being Github Pages.

1. Create a Firebase project.

Go to the Firebase Console and create a new project.

2. Initialize Firebase in your project.

Go to your project folder root and run :

firebase login

This will open a browser window where you will have to login to your firebase account.

Then run :

firebase init hosting

This will ask you a few questions, here are the answers I gave :

What do you want to use as your public directory? public
Configure as a single-page app (rewrite all urls to /index.html)? No
File public/index.html already exists. Overwrite? No

3. Build your blog.

Now that everything is well set up, we can build our blog and deploy it.

hugo
firebase deploy

You can now access your blog at the url given by firebase.

7. Set up Github Actions for continuous deployment.

Now that we have our blog deployed, having to manually build and deploy it every time we make a change is not very practical, for this we will use Github Actions.

Github Actions is a tool that allows you to automate your workflow, in our case we will use it to build and deploy our blog every time we push to the master branch.

1. Create a new workflow.

Go to your repository and click on Actions in the top bar.

Then click on New workflow and select Set up a workflow yourself.

Name your workflow as you want and now you'll have to write the workflow file, which we won't do manually because people have already done it for us.

2. Write the workflow file.

When I realized that writing a workflow file from scratch was not my cup of tea, I searched for a it in Github Actions Marketplace and I found this one made by Javi Pulido which is exactly what we need.

Copy the content of the file and paste it in your workflow file, then commit and push it.

3. Test the workflow.

Now that we have our workflow file, we can test it by pushing a change to the master branch and you will see that it won't work because we didn't set up the FIREBASE_TOKEN secret.

To do so, go to your repository settings and click on Secrets in the left bar.

Then click on New repository secret and add a new secret named FIREBASE_TOKEN and paste the value of your firebase token which you can find by running :

firebase login:ci

Now you can push a change to the master branch and you will see that the workflow is running correctly !