Building a devblog with Site.js and Hugo static site generator
Published: 2021-01-31 19:50:45

## Introduction

Some days ago i stumbled upon the amazing [small-tech.org](https://small-tech.org) project by Aral Balkan and Laura Kalbag. I have been following their work for a while and i'd like to support them a bit by using and exploring their [Small Web construction set](https://sitejs.org). It comes bundled with the [Hugo static site generator](https://gohugo.io), so I was immediately able to use the nice [Ghostwriter Theme](https://github.com/jbub/ghostwriter) for this blog.

## Installing Site.js and Initiating a Hugo project

Everything started with the installation of [Site.js](https://sitejs.org) as recommended by the developer. Type the following code in your favourite command line tool (i use [Hyper](https://hyper.is/) or the built-in terminal from VSCode).

```
curl -s https://sitejs.org/install | bash
```

Now you are ready to create a folder for your Hugo project and jump into it:

```
mkdir my-hugo-blog
cd my-hugo-blog
```

and create a new site using the following command:

```
site hugo new site .hugo
```

Now you'll find the Hugo folder structure in the directory you created. Open this in your favourite code editor. 

## Installing a Hugo Theme

For starters i chose the Ghostwriter Theme from https://themes.gohugo.io, but this is really up to you. 
Instead of cloning the repo into my directory i chose to download the .zip from the [Github Page](https://github.com/jbub/ghostwriter/archive/master.zip) and unpacked it in the **themes**-folder of my Hugo project.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/guqk7nbvchu8uo46ohmd.png)

Now we have to tell our project that we want to use the installed Theme. Open the **config.toml** file in the projects root directory. Mine looks like this:

```
baseURL = "/"
languageCode = "en-us"
title = "SubGuy's Devblog"
theme = "ghostwriter-master"
paginate = "10"

[Author]
name = "Subliminal_Guy"


[Params]
mainSections = ["post"]
intro = true
headline = "subguy's devblog "
description = "babbeling code since 2017" 
github = "https://github.com/SubliminalGuy"
gitlab = "https://gitlab.com/subliminal_guy"
twitter = "https://twitter.com/SubKid"
opengraph = true
shareTwitter = true
dateFormat = "Mon, Jan 2, 2021"
authorbox = true

[Permalinks]
post = "/:filename"
```

Copy everything. The most important part for now is, that you set the **title** as you like and the **theme** to "ghostwriter-master" (or whatever the directory name for your installed theme is - it has to be verbatim). 
Take a look at the [Params]. Most of them are pretty self-explanatory. You can play around with them later.

Now you can copy the **post**-folder in "themes/ghostwriter-master/exampleSite/content" *(respectively "themes/YOUR-THEME-FOLDER-NAME/exampleSite/content")* into the **content**-folder of your projects root directory.

## Launching the blog

Now start the development server by typing the following command into the terminal. This should work from your root directory.

```
site
```

If you now check your browser at <https://localhost> you should see the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8eiexdv7fqb8jgnqvv7z.png)

I deleted all the blogposts and created a new one with the following prompt:

```
site hugo new post/building-a-devblog.md
```

In this file I finally entered the Markdown for my first blog post that you're currently reading.

## And now?

The deployment of this blog on a VPS of your choice is as easy as it gets. Simply install [Site.js](https://sitejs.org) in the designated directory, upload the files we created and enter:

```
site enable
```

Your blog should be live immediately. Enjoy!