Hello friends, This my step by step guide to build and deploy blog site with Hugo and Vercel that I used for my blog site and I hope this might be some use for you too.

1. Install Hugo

Installing Hugo on Linux. If your distribution support snap

snap install hugo --channel=extended

Or you can use apt-get

sudo apt-get install hugo

Check if hugo is successfully installed.

hugo version

If you get response similar to below, Hugo is successfully installed.

hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended linux/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=snap:0.105.0

If you are using windows follow this instruction hugo-windows

2.Create new Site

After installing Hugo lets create our blog site

1. Open up your terminal.
2. cd to your prefered directory to work.
3. Create new Hugo site with your blog site name

hugo new site blog-site

This will give us short instruction on how to add a theme and content to our site. We will see all of them in detail.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

3.Use Hugo theme

Hugo has nice configuration to add our preferd them and manage the UI/UX of our site. once we select a Hugo-Themes we can proceed to add a theme to our site using one of these two methods.

1. Make the selected theme git repository a subtree to our site

   • if want to follow the change to the parent and update accordingly.

2. Manually download the theme git repository and unzip it in our site under theme directory or use git clone.

   • use this approach if you are satisfied with the current change and doesnot intend to follow the change of the parent (theme) repository.

For our site lets use m10c a theme similar to this blog site.

cd themes
git clone https://github.com/vaga/hugo-theme-m10c.git ./m10c

4.Update the config.toml

Now we have to tell the config.toml file

* the theme used
* about the author of the blog
* available menus
* social media links and more

Open up your config.toml file and add this information

Remember to change the data to your own information.

languageCode = "en-us"
title = "Daniel's Blog"
theme = "m10c"

[[menu.main]]
  identifier = "tags"
  name = "Tags"
  url = "/tags/"
  weight = 2

[[menu.main]]
  identifier = "home"
  name = "Home"
  url = "/"
  weight = 1

[params]
  author = "Daniel Demelash"
  description = "The little things I know about software development."
  avatar = "images/profile_pic.png"
  #add avatar image
  menu_item_separator = "|"
  favicon = "images/favicon.ico"
  #add favico image

  [[params.social]]
    icon = "github"
    name = "GitHub"
    url = "https://github.com/danielddemissie"

  [[params.social]]
    icon = "linkedin"
    name = "Linkedin"
    url = "https://linkedin.com/in/danielddemissie"

  [[params.social]]
    icon = "twitter"
    name = "Twitter"
    url = "https://twitter.com/danielddeme"

For this to work properly you have to add favico and the avatar image inside public/images folder and static/images folder with same file name.

5. Create first post

Now it’s time to add our first blog to our site to do this first go back to main directory and run this command.

cd ..
hugo new posts/first-post.md

This command create posts directory with name first-post.md inside the content folder. When you open this file in text editor you will see a fragment of code darft = true which means the post is in a draft mode or so add some content to this file and change draft = false after doing that save your changes and run these commands.

hugo
hugo server

The hugo command will generate the neccessary configuration and html files to render the app.

Start building sites …
hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa+extended linux/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=snap:0.105.0

                   | EN
-------------------+-----
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  1
  Processed images |  0
  Aliases          |  2
  Sitemaps         |  1
  Cleaned          |  0

Total in 94 ms

hugo server will start up the application at port 1313 If no other service is running on that port. Now that our blog site is up and running lets open http://localhost:1313 in our browser.

6. Push to gitHub

Create new Github repository with the site name and copy the url. The only reason i rename the main branch from master to main is I like main better unlike github's reason.

git init
git add -A
git commit -m "START: first commit"
git branch -M main
git remote add origin url-to-your-blog-repository
git push -u origin main

7. Deploy to vercel

Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.Beside that They offer one of the best Hobby(Free) account service.

If you don’t have vercel account, create free vercel account and come back here!.

To deploy your Hugo sites to vercel does not require any additional configuration. All you have to do is just push the change you want to deploy to main branch of the project repository and vercel will do its own configuration for Hugo site and deploy the change.

Lets deploy. first check If everything is saved then

git add .
git commit -m "DEPLOY: deploy to vercel"
git push

Open your vercel dashboard and Add new project

Import from Github

Select the project to deploy and click deploy.

Congrats 🎉 your blog site is LIVE!.

Now whenever you made some change to the main branch vercel will update your site.

Thanks for reading my blog.