Setup a Blog with Hugo

In this post we will setup a blog on hugo and using the theme pickles.

What is Hugo

Hugo is a Open-Source Static Site Generator which runs on Golang.

Installing Hugo

Im using a mac so I will be installing hugo with brew, for other operating systems, you can have a look at their documentation

$ brew install hugo

Create your new site:

$ hugo new site myblog

Install a Theme

We will use a 3rd party theme, go ahead and install the pickles theme:

$ git clone -b release https://github.com/mismith0227/hugo_theme_pickles themes/pickles

Custom Syntax Highlighting

Generate syntax highlight css, for a list of other styles see this post

$ mkdir -p static/css
$ hugo gen chromastyles --style=colorful > static/css/syntax.css

Append this below style.css in themes/pickles/layouts/partials/head.html

<link rel="stylesheet" href="/css/syntax.css"/>

set pygments settings in config.toml:

baseURL = "http://example.org/"
languageCode = "en-us"
pygmentsCodeFences = true
pygmentsUseClasses = true
title = "My Hugo Site"

Create your First Blogpost

Create your first post:

$ hugo new posts/my-first-post.md
/Users/ruan/myblog/content/posts/my-first-post.md created

Populate your page with some data:

---
title: "My First Post"
date: 2019-04-23T09:39:23+02:00
description: This is an introduction post to showcase Hugo.
slug: hello-world-my-first-post
categories:
- hugo
- blog
tags:
- helloworld
- hugo
- blog
draft: false
---

![](https://hugo-simple-blog.work/images/uploads/gopher_hugo.png)

Hello world and welcome to my first post

## New Beginning

This is a new beginning on my blog on hugo and this seems pretty cool so im adding random text here because I dont know **what** to add here. So im adding a lot more random text here.

This is another test.

## Code

This is python code:


from random import randint
from faker import Fake
randint(1, 2)

destFile = "largedataset-" + timestart + ".txt"
file_object = open(destFile,"a")
file_object.write("uuid" + "," + "username" + "," + "name" + "," + "country" + "\n")

def create_names(fake):
    for x in range(numberRuns):
        genUname = fake.slug()
        genName =  fake.first_name()
        genCountry = fake.country()
file_object.write(genUname + "," + genName + "," + genCountry + "\n")
..


This is bash code:


#!/usr/bin/env bash
var="ruan"
echo "Hello, ${var}"


## Tweets

This is one of my tweets, see [configuration](https://gohugo.io/content-management/shortcodes/#highlight) for more shortcodes:



## Tables

This is a table:

|**id**    |**name**|**surname**|**age**| **city**     |
|----------|--------|-----------|-------|--------------|
|20-1232091|ruan    |bekker     |32     |cape town     |
|20-2531020|stefan  |bester     |32     |kroonstad     |
|20-4835056|michael |le roux    |35     |port elizabeth|

## Lists

This is a list:

* one
* two
* [three](https://example.com)

This is another list:

1. one
2. two
3. [three](https://example.com)

## Images

This is an embedded photo:

![](https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500)

Run the Server

You can set the flags in your main config as well. Go ahead and run the server:

$ hugo server \
  --baseURL "http://localhost/" \
  --themesDir=themes --theme=pickles \
  --bind=0.0.0.0 --port=8080 --appendPort=true \
  --buildDrafts --watch --environment production