Recommended Reading Reference


#1

Web development has so many facets that it can feel daunting at first, so if you’re picking up Hugo as a relative beginner, you need to “do the work”, spending time to learn the basics. This wiki post contains a list of references that might help you with that.

Command Line and Text Editor

Git

Tutorial Site
Chacon & Straub’s Pro Git Book git-SCM
Learn Enough Git to be Dangerous Learn Enough
Learn Git Atlassian
Git Handbook Github
Git Basics Course Treehouse

HTML and CSS

Frameworks

Framework Description
Bootstrap Comprehensive CSS and Javascript
Tachyons Minimalist “Atomic” CSS
Bulma Flexbox-based CSS
HTML5 Boilerplate A ‘professional front-end template for building fast, robust, and adaptable web apps or sites.’

Color

Site Description
Paletton A “powerful tool to create color combinations and palettes of colors that work together well.”
Color Hexa A “a free color tool providing information about any color and generating matching color palettes for your designs.”
Colors A “nicer color palette for the web.”

Type

Site Description
TypePlate A typographic starter kit that defines basic type markup.
Type Scale Generate a modular scale for your type.

Terminal Utilities

Utility Description
s3deploy A ‘simple tool to deploy static websites to Amazon S3 and CloudFront with Gzip and custom headers support (e.g. “Cache-Control”)’ by Hugo’s own bep.
jq A ‘lightweight and flexible command line JSON processor’

Config File Formats

Format Description
toml “Tom’s Obvious, Minimal Language”, by Tom Preston-Werner, co-founder of Github. Ironically, Github does not format front matter TOML in a nice table format.
yaml “YAML Ain’t Markup Language”, a ‘human friendly data serialization standard for all programming languages. If you format your content front matter in YAML, Github formats it in a nice table format.’
json “JavaScript Object Notation”, a ‘lightweight data-interchange format.’

Go

Item Description
Go Golang is ‘an open source programming language that makes it easy to build simple, reliable, and efficient software.’ What Hugo is developed in.
Go Templates What Hugo leverages to assemble your site.

Hugo Tutorials

Text Editor Software

Because the Notepad on Windows and TextEdit on Mac editors come free with the OS, they are not very good. You need to get a good programmer’s editor to use. Here are some examples that might be helpful in your quest to find the perfect one.

Editor Name (Link) Purpose Windows Mac Linux Markdown Comment
Notepad++ General Programmer’s Editor O Simple Windows editor that is “Notepad that works.”
Sublime Text General Programmer’s Editor O Plugin Atom copied this but Sublime is higher performance by far.
Atom.io General Programmer’s Editor O O O Plugin Copy of Sublime text by Github. Some trouble with large files.
Adobe Brackets General Programmer’s Editor O O O Plugin Really good for front end developers (HTML, javascript, css).
Microsoft VS Code General Programmer’s IDE O O O Plugin Well-regarded editor / IDE in general, but especially suitable if you also program for Windows.
VSCodium General Programmer’s IDE O O O Plugin Same as VSCode but with all the Microsoft telemetry/tracking removed.
BBEdit General Programmer’s Editor O Native High performance, excellent “grand daddy” editor on Mac. Perhaps a bit old fashioned, but beloved.
Jedit Ω General Programmer’s Editor O Made in Japan so, good Japanese support.
Chrome Caret General Programmer’s Editor O O O Chrome app.
VIM General Programmer’s Editor O O O Plugin One of the oldest editors that runs in your terminal.
Emacs General Programmer’s IDE O O O Plugin One of the oldest IDEs that runs in your terminal. Basically an OS.
Hidemaru General Programmer’s Editor O Made in Japan, so has good Japanese support.
Typora Markdown Editor O O O Native Excellent modern interface for markdown editing. Design concept is you type markdown, and it immediately converts to formatted version.
Caret Markdown Editor O O O Native Excellent modern interface for markdown editing. Design concept allows you to switch between seeing markdown or seeing the preview.
Markdown Pad 2 Markdown Editor O Native Standard tabbed interface for markdown editing, with an edit pane (showing markdown syntax) and a preview pane.
Writemonkey Markdown Editor O Native Minimalist editor for markdown, with ability to show preview pane.
Marked2 Markdown Previewer O Native Mac markdown preview software that lets you write in any editor you like.

Theme mainroad: how to hide posts in the main page?
Comprehensive hugo tutorial for beginners?
Just a new by in need
Requesting Help
Add linkedin as an option to share posts
Two kinds of pages in one site?
Can I version a hugo site with git locally
Error on quick start
Hugo 101: variables
Commentbox and coder theme
HTML & CSS edition + FTP
#2

Thanks @zwbetz for your links in the other post. I thought they deserved their own post so I made this one, and converted it to a wiki post so that others can add.


#3

The auto-preview doesn’t work for all sites, so I’m converting to a list-in-table style.


#4

Glad to help. This is a good idea.


#5

@zwbetz Sorry ‘Jachary’, I mean Zachary, for munging up your name!


#6

All good :slight_smile:


#7

Impressive! Thanks @RickCogley for gathering all this and starting this wiki!


#8

thanks a lot for for share this all file. i may useful for someone


#9

If you are listing paid courses like teamtreehouse, then I highly recommend Udacity’s intro to programming course (now renamed to Learn to code) - https://eu.udacity.com/course/intro-to-programming-nanodegree--nd000.

This is the route I took when learning coding, and the Python aspects of the course were invaluable when it came to picking up the GoLang templating language, especially when coupled with the 2 hour Golang overview course in teamtreehouse (https://teamtreehouse.com/library/go-language-overview)


#10

Didn’t really think about paid vs free. By all means please edit and add! (Should be editable).


#11

@ RickCogley even you can add following site in your reference list. It’s offering free online tutorials from basic to advanced level.

https://www.tutlane.com


#12

@budparr I added your “awesome hugo” link.


#13

Which tutorials in that site are good? For this page, the top 3 sections are specific courses that might help people, so I think we can add them there. Let me know.


#14

The link to TOML is incorrect. It should be https://github.com/toml-lang/toml .


#15

The link to “Go Templates” is incorrect. It should be https://golang.org/pkg/text/template/ .


#16

@David263 Good catches. Feel free to update the links, it’s a community wiki.


Went ahead and updated the links.