Hugo 101

Websites for little guys

Add me on LinkedIn! You can cite this post as a reason if you're shy.

Hugo 101 :: (optional) Steal His Look

I like making sure other people can get exactly the same access to all the tools I use. If anything you see me do today looks interesting, feel free to ask me how I did it! Or you can grab all the tools I will use at once by following these simple steps.

  1. Install VirtualBox
  2. Download Ubuntu
  3. Create an Ubuntu virtual machine - great official instructions!
    • “Virtual machine” = a computer that runs inside your computer like a normal program
  4. Run the 3 scripts at https://github.com/hiAndrewQuinn/shell-bling-ubuntu

Hugo 101 :: these slides live at https://andrew-quinn.me/hugo-101-slidy.html

Hugo 101 :: what i hope you leave with

Hugo 101 :: what i need from you

Minimum viable terminal programs:

Recommended terminal programs:

Hugo 101 :: about me

Hugo 101 :: What is Hugo?

https://gohugo.io/ | https://github.com/gohugoio/hugo

Hugo 101 :: Installing Hugo

Much more complex instructions @ Installation | Hugo!

Hugo 101 :: Minimum Viable Hugo [1/9]

⚠️: Most of the shorter commands work in PowerShell too. ChatGPT comes in really handy here.

Hugo 101 :: Minimum Viable Hugo [2/9]

Hugo 101 :: Minimum Viable Hugo [3/9]

⚠️: Anything which starts with hugo is built into the hugo program itself and should work identically on both PowerShell and other shells.

1 2 3 4 5 6 # Hugo 101 :: Start a new Hugo website! # Hugo 101 :: The dot '.' means "Start it right here, not in a folder in here." # Hugo 101 :: The '--force' means "Even if this isn't empty" (although it _should_ be). hugo new site . --force # Hugo 101 :: ... oh, and these things are comments. # Hugo 101 :: You can paste them into the shell harmlessly. In fact I recommend it!

Hugo 101 :: Minimum Viable Hugo [4/9]

Hugo always needs a theme before it will make anything show up at all. Let’s give it one!

1 2 3 4 5 # Hugo 101 :: Make a new theme, called minimum-viable-hugo. hugo new theme minimum-viable-hugo # Hugo 101 :: Tell Hugo we want to use minimum-viable-hugo. echo "theme = 'minimum-viable-hugo'" >> hugo.toml

hugo.toml is a TEXT FILE that should appear where we are. It tells Hugo all the settings for the whole project. We can open it in any text editor we want, even Notepad if that’s all we have!

.toml = Tom’s Obvious Minimal Language. Easy to read!

You can see what’s in it with gc hugo.toml (PowerShell) / cat hugo.toml (shell) / bat hugo.toml (Shell Bling Ubuntu).

Hugo 101 :: Minimum Viable Hugo [5/9]

1 2 3 # Hugo 101 :: GOTCHA #1: Your root page is called _index.md. hugo new _index.md echo "Lorem ipsum dolor sit amet" >> content/_index.md

.md = Markdown. Because writing HTML by hand sucks.

1 2 3 4 5 6 7 # Hugo 101 :: An H1 heading in Markdown ## An H2 heading in Markdown *Italics* and **bold** in Markdown. ![Alt text:A place to an image in Markdown](image-in-markdown.jpg)

We can open _index.md in any text editor we want, and in fact we will!

Hugo 101 :: Minimum Viable Hugo [6/9]

1 2 3 # Hugo 101 :: GOTCHA #1: Your root page is called _index.md. hugo new _index.md echo "Lorem ipsum dolor sit amet" >> content/_index.md

Hugo 101 :: Minimum Viable Hugo [7/9]

1 2 3 # Hugo 101 :: GOTCHA #2: Hugo needs to be explicitly told to # Hugo 101 :: serve content from _index.md. echo "{{ .Content }}" >> themes/minimum-viable-hugo/layouts/index.html

Hugo 101 :: Minimum Viable Hugo [8/9]

1 2 # Hugo 101 :: Serve the site. Don't leave out the -D yet. hugo server -D

Hugo 101 :: Minimum Viable Hugo [9/9]

If you look at content/_index.md, with cat or gc or opening it in a text editor, it will look like

1 2 3 4 5 6 7 --- title: "" date: 2023-02-27T18:21:50+02:00 draft: true --- Lorem ipsum dolor sit amet

Change draft to false. Then you’ll be able to run your site with just

1 hugo server

Hugo 101 :: Workshop time!!

Time set aside to answer questions, try out some of the ‘advanced’ stuff on Minimum Viable Hugo, just generally let people try things they think would be neat, etc.

Hugo 101 :: CONGRATS THAT’S HUGO 101 YOU MADE IT

Hugo 102 :: GET IT ONLINE

Hugo 102 :: Introducing Github

Time set aside to set up Github accounts for anyone who needs one.

Hugo 102 :: Setting up git

Time set aside to install Git for anyone who needs it.

Hugo 102 :: Setting up gh [1/2]

Time set aside to install cli.github.com.

Hugo 102 :: Setting up gh [2/2]

Check: Run gh auth status. If it shows your username, you’re golden!

Hugo 102 :: Putting our Hugo website on Github

Time set aside to get a new Git repo online.

Hugo 102 :: Building the Github Pages

Time set aside to follow the Procedure at GoHugo.IO.

Hugo 102 :: Changing the Website on the Fly [1/3]

I do this exact thing dozens of times a day in the real world. add, commit, push. That’s it. It’s literally how I built this whole presentation!

Hugo 102 :: Changing the Website on the Fly [2/3]

Hugo 102 :: Changing the Website on the Fly [3/3]

Hugo 101 :: Workshop time!!

Time set aside to answer questions, help people who ran into issues, let people try things they think would be neat, etc.

Hugo 102 :: DONE. ONTO 201

Hugo 201 :: Learning From Others

Time set aside to get fireship.io running locally and start tweaking it live in front of people.

Thank you