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.
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.’
Tailwind CSS A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
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.”
Color Shades Generate different color shades from a base color.
Site
Description
TypePlate A typographic starter kit that defines basic type markup.
Type Scale Generate a modular scale for your type.
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’
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.’
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.
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.
42 Likes
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.
1 Like
The auto-preview doesn’t work for all sites, so I’m converting to a list-in-table style.
zwbetz
October 21, 2018, 12:47am
4
Glad to help. This is a good idea.
@zwbetz Sorry ‘Jachary’, I mean Zachary, for munging up your name!
regis
October 23, 2018, 9:05pm
7
Impressive! Thanks @RickCogley for gathering all this and starting this wiki!
2 Likes
thanks a lot for for share this all file. i may useful for someone
1 Like
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 )
Didn’t really think about paid vs free. By all means please edit and add! (Should be editable).
@ 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
@budparr I added your “awesome hugo” link.
1 Like
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.
The link to “Go Templates” is incorrect. It should be https://golang.org/pkg/text/template/ .
zwbetz
January 8, 2019, 10:06pm
16
@David263 Good catches. Feel free to update the links, it’s a community wiki.
Went ahead and updated the links.
Jura
October 21, 2020, 12:10pm
17
Can you add my Hugo tutorials to the list, if they are good enough?
1 Like
Done! Couldn’t find your full name for attribution, let me know if you want me to change the entry.
2 Likes
