How to Create a Blog Without VPS

Hi, welcome to my blog and say hello to my first blog post. I will guide you how to create a blog using Hugo without needing a VPS (Virtual Private Server).

Table of Contents

• Table of Contents
• Pre-requisite
• Installation
  • NixOS
  • Ubuntu / Debian
  • MacOS
• Creating New Repository
• Creating a New Blog
• Managing the Blog
  • Adding Posts
  • Changing the Blog Theme
    • Clone PaperMod repository using git
    • Update Hugo Configuration
• Building Hugo
• Live Preview
• Deploy Hugo and Go Live!
  • GitHub Pages

Pre-requisite

Before proceeding with this post, readers are expected to have the following requirements:

1. Internet connection

2. GitHub account

   To create a GitHub account, go here.

3. Visual Studio Code text editor

   To install Microsoft Visual Studio Code, go here.

Installation

NixOS

Install Hugo using nix-shell

nix-shell -p hugo git

Ubuntu / Debian

Install Hugo using apt

sudo apt update && sudo apt install hugo git

MacOS

Install Hugo using homebrew

brew install hugo
brew install git

Creating New Repository

Before starting to create a blog, we need to create github repository in Github.com named my-new-site

Creating a New Blog

Clone the repository to local. In my case, my repository is in https://github.com/BangDevOpsCom/my-new-site. So i’ll clone the repository using command below:

git clone https://github.com/BangDevOpsCom/my-new-site

To create a new website, you can use the command hugo new site $WEBSITE_NAME. Here is an example to create a new website named my-new-site

hugo new site my-new-site --force

After executing the above command, hugo will create a new directory named my-new-site.

Managing the Blog

In this section, we will start managing the new blog named my-new-site, such as adding blog posts, changing the appearance (themes), building static assets, and configuring the blog as we desire.

Adding Posts

Before starting to create a new post, we can use Microsoft Visual Studio Code as our development tool. Here is the command to start using Microsoft Visual Studio Code in the terminal

code my-new-site

To create a new post titled Hello World, type the following command in the Microsoft Visual Studio Code Integrated terminal

hugo new content/posts/hello-world.md

The above command will create a new file named hello-world.md in the content/posts directory.

If the Integrated Terminal does not appear, use the following keyboard shortcut to display it

MacOS

⌃`

Linux

Ctrl `

To start writing the content of the hello-world.md post, we can use vscode

code content/posts/hello-world.md

Don’t forget to save it.

Changing the Blog Theme

To change the blog theme using PaperMod, follow these steps

Clone PaperMod repository using git

git clone https://github.com/adityatelange/hugo-PaperMod themes/PaperMod --depth=1

Update Hugo Configuration

To update the Hugo configuration to use the PaperMod theme, we can add this to the hugo.toml file

Building Hugo

After the post file is saved and the theme is configured, we can try to build the static assets of our blog and directly see the live preview by using the following command in the integrated terminal

hugo server --cleanDestinationDir -D

Once the build is complete, we can see the live preview of our blog at http://localhost:1313. We can view it using a browser.

Live Preview

Here is the live preview of the main page of the blog built using hugo

Here is the live preview of the Hello World post built using hugo

Deploy Hugo and Go Live!

There are many options to deploy the blog and go live. You can choose anything that suits with you

GitHub Pages

To deploy your blog with GitHub pages, go here