Using Hugo for this website

A step by step description on how the bluish capsule was born.

Installing Hugo

Detailed instructions are available at the official Hugo site

Download the deb package from Hugo Releases

sudo dpkg -i hugo_0.36.1_Linux-64bit.deb

Test if everithing works

hugo version

Atom Plugins

Nice autocomplete for hugo shortodes language-hugo

For example typing youtube and hitting tab the following snippet will be generated:

\{\{< youtube id class="" >\}\}

Some key combination for common Hugo activities atom-hugo

For example CTRL+SUPER+N will create a new content item.

Initialize Hugo website

Hugo will create a new site with the basic site structure. Then we initialize git and add a theme as a git submodule.

hugo new site bluish-capsule
cd bluish-capsule
git init
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

Other themes are available at Hugo themes

Configure the beautifulhugo theme

Each theme has a sligtly different configuration. Inside the theme folder there is a theme.toml and inside the folder exampleSite there is another theme.toml with some advanced configuration.

Here is the configuration needed for the first run.

baseURL = "https://gabrieleteotino.github.io/"
languageCode = "en-us"
title = "Bluish capsule"
theme = "beautifulhugo"

metaDataFormat = "yaml"

[params]
  subtitle = "Some inspirational quote here"
  logo = "img/avatar-icon.png"
  favicon = "img/favicon.ico"
  dateFormat = "January 2, 2006"
  commit = false
  rss = true
  comments = false
  readingTime = true
  useHLJS = true
#  gcse = "012345678901234567890:abcdefghijk" # Get your code from google.com/cse. Make sure to go to "Look and Feel" and change Layout to "Full Width" and Theme to "Classic"

[author]
  name = "Gabriele Teotino"
  website = "http://www.teosoft.it"
  github = "gabrieleteotino"
  stackoverflow = "users/2085504/deramko"

Add a post and test the site

Add a new post using the command line.

hugo new post/hello-world.md

Start the development server. The -D tells Hugo to pubblish draft pages.

hugo server -D

Now open the borwser and got the home page and the Hello World.

Write some content inside hello-world.md. The live reload should immediatly show the new text.

Change the front matter draft to false, making the file ready for publishing.

Github repository

Be sure to have your private keys configured for Github. See here for the configuration.

The following steps are taken from whipperstacker instructions

Create a new repository in Github named bluish-capsule. Add a description, select public and don’t create any readme, gitignore and license.

Stop Hugo if it is running, in the terminal goto the root folder of the site. Confirm it is already initialize with

git status

Add the new remote origin

git remote add origin [email protected]:gabrieleteotino/bluish-capsule.git

Create a new repository for Github Pages named gabrieleteotino.github.io, add a description. This time check Initialize this repository with a README leaving no gitignore and no license.

Optional Delete the public/ directory with rm -r public/.

Add the “pages” repo as a submodlule

git submodule add [email protected]:gabrieleteotino/gabrieleteotino.github.io.git public

It is time to stage all the changes and commit to the local git.

git add .
git commit -m "Initial setup"
git push -u origin master

Create content

Create the content in public folder

hugo -t "beautifulhugo"
cd public/
git add .
git commit -m "Generate site"
git push origin master