Ruan Bekker's Blog

From a Curious mind to Posts on Github

Setup a Blog With Hugo

image

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

1
$ brew install hugo

Create your new site:

1
$ hugo new site myblog

Install a Theme

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

1
$ 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

1
2
$ 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

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

set pygments settings in config.toml:

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

Create your First Blogpost

Create your first post:

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

Populate your page with some data:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
---
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:

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

Screenshots

When you access your blog on port 8080 you should see your post. Some screenshots below:

image

image

image

image

References:

Comments