u915

Daniel Cano Merchán - Hacking & Tech

Hello world, how to create a new static web site blog using Hugo

Instead to make another Hello world page or enumerating the reasons of writting a new blog, this is a writeup of how this site was build. Is a good way to make the first page useful and serve as work a memory. Maybe i can help me or someone in the future.

Choosing CMS

  • Learn something new
  • Durable and easy to maintain
  • Portable
  • Simple
  • Secure ?

Technology involved

This site is based of using static plain text files written in Markdown.

I will not talk about the pros and downsides about using this type of CMS vs the most popular CMS like Wordpress, Blogger etc is just a personal choice.

Hugo

Hugo is the file generator CMS, as an open-source static site generator.

Hugo themes

I wanted something simple,clean and easy to read, so i was testing a plenty of themes and finally i used this Simple style

Simple style modified

I did some tweaks to the theme to adjust it, because i didn´t like the search bar so i just added a property to hide the search bar. Also i modified some chinese words on the tags bar.

Source code is available here: Spartan-Style

Firts steps

Based on Hugo Quickstart guide

I used the precompiled version, Releases


hugo new site quickstart

cd quickstart
git clone https://github.com/u915/Spartan-Style themes/

hugo new posts/my-first-post.md

Config example

[params]
# Hugo common variables
baseurl = ""
title = ""
author = ""
copyright = ""
languageCode = "" #example en-us

# Google analytics
# googleAnalytics = ""

# Theme to use
theme = "spartan-style"

# Pagination
paginate = 10
paginatePath = "page"

# Taxonomies
[taxonomies]
  tag = "tags"
  category = "categories"

# Menu
[menu]
  # Header
  [[menu.main]]
    url = "/"
    name = "Index"
    weight = 1
  [[menu.main]]
    url = "/posts/"
    name = "Posts"
    weight = 2
  [[menu.main]]
    url = "/tags/"
    name = "Tags"
    weight = 3

  # Footer
  [[menu.footer]]
    url = ""
    name = "GitHub"
    weight = 1
  [[menu.footer]]
    url = ""
    name = "Linkedin"
    weight = 2
  [[menu.footer]]
    url = "/posts/index.xml"
    name = "RSS"
    weight = 3
  [[menu.footer]]
    url = "/sitemap.xml"
    name = "Sitemap"
    weight = 4


# Links format
[permalinks]
  posts = "/posts/:year/:month/:title/"

[params]
# General
datefmt  = "2006-01-02"
subtitle = ""

# Metadata
description = "" 
ogdescription = ""
ogurl = ""
ogtitle = ""

keywords = ""
referrer = ""
author = ""


# Footer and license with copyright enabled
licensepage = "/license/"
licensetext = ""
licenselink = "https://creativecommons.org/licenses/by-nc-sa/4.0/"


# Blog images
favicon = "/images/favicon.png"
bloglogo = "/images/logo_small.png" #prepared to 100px

# CSS 
csslocation = "/css/main.css"

Generate static source code

Finally to generate the web content:

hugo -D

With this, the site is build under the folder public you can place these files under the server of your choice to publish the blog.