New Site
Creating your first website
Windows
Please create a folder named Sites
in C:\Hugo
, i.e., when you’re done, you should have a structure like C: > Hugo > Sites
. There will be 2 folders in C:\Hugo
named Sites
and bin
.
Navigate to the newly created Sites
folder. Then click the line with the folder list, it should turn editable.
Type in powershell
and press Enter.
You should see a terminal window appear.
macOS
Please create a folder named Sites
in your home directory. You can use Finder to do this.
Open a Terminal app. You can do this via your launcher, e.g., Cmd+Space, then type in Terminal
and press Enter.
Type in cd ~/Sites
Generating a basic site
On either platform, in your terminal type in
hugo new site my-codef-site
It should print some information, but a basic site is now generated.
Sending the site to Github
GitKraken
Open your GitKraken.
It’ll ask some irrelevant info, like picking an avatar, or your name. Fill in whatever you want, they don’t have to be your real details.
Say no to the paid version or trial of the Pro version, the free version is actually free.
You should be greeted with the home screen.
Pick Start a local repo
Select the Init
tab. Fill in
my-codef-site
forName
- find your
Sites
folder for theInitialize in
Click Create Repository
.
This should open a window with some blue bubbles, saying main
and Initial commit
.
We now want to replicate this to Github. To do this, we
- find the section on the left that says
Remote
- click the green
+
sign
Choose Github
. Leave all values as is and just click Create remote and push local refs
In a short while it should show a success message
Adding a basic theme
For Hugo to display any content for your site, we need to pick a “theme”. A theme determines how Hugo displays your content.
We’ll explore themes in more detail later, but for now let’s add the Ananke theme to our site so we can see it.
In GitKraken, find the Submodules
section on the left side, and click the +
button.
Input https://github.com/theNewDynamic/gohugo-theme-ananke.git
for Remote URL
and themes/ananke
for Name/Path
.
Click Add submodule
, you’ll see some progress animations, and ultimately a success message.
Then navigate to your site’s folder, go to themes > ananke > exampleSite
, and copy the file named config.toml
to your site’s folder. You might get a prompt saying the file already exists, choose to replace / overwrite it.
Finally, start Sublime. Pick File > Open Folder
, and find the folder your site is in (C:\Hugo\Sites\my-codef-site
for Windows and Sites/my-codef-site
for Mac).
You should see Sublime open up a folder structure, listing all the files.
Find and open the config.toml
file you just created.
We’re interested in changing 3 lines here.
- we need to change
theme = "gohugo-theme-ananke"
totheme = "ananke"
themesDir = "../.."
tothemesDir = "themes"
- and
resourceDir = "../resources"
toresourceDir = "resources"
Save the file.
Seeing your website
Switch back to your terminal window.
Enter
cd my-codef-site
followed by
hugo server -D
You should now have a running website.
Commit it to Git
Finally, we’ll “commit” what we’ve done so far, so that if we break something, we can always go back to our working version of the site.
First, open your Sublime, and create a new file.
Type in public/
Save the file with the name .gitignore
Find your GitKraken window.
On your right is a column talking about “changes” and “stage”.
Click the button that says “Stage all changes”.
You should now see a bunch of files listed in the “Staged files” box.
In the box that says Commit Message
type in something like “First site”. This can be free text, it’s just a description of the state we’re saving.
Then click the green button under the box that says Commit changes to X files
You should now see a new entry in the log with the message you entered.
Click the Push
button in the top row to replicate these changes in Github.
If it asks about “references” and “remotes”, just leave the values default and click Submit
, it should say origin / main
.
Further reading
Everything past this point is optional, and these are just some topics for further exploration.
We’ve saved the state of our site with Git, so you can safely experiment and explore. Whatever you do, we can always get back to the working version we have. We encourage you to try making some changes and just seeing what happens.
Sublime plugins
Sublime supports a wide, wide array of plugins. There is one for Hugo as well, feel free to install it and play around.
If you find others you think might prove useful, feel free to install them, share with others, or both.
Git tutorial
Github has an extensive set of guides on what Git is, and how to use it. A good starting point that covers the basics is their Git handbook
Hugo
Hugo has extensive documentation as well. We’ll cover the bits needed for us to make a functional site in the course, but feel free to explore the official documentation and try anything you find interesting.
If you make some content, Hugo uses a format called markdown
. We’ll cover this in our next lesson, but for now – any text is valid markdown, so you can just type some things up and they should show on your site.
Configuration
Have a play with the values in the configuration. Ananke supports a variety of options, documented on the project’s Github page.
For example, you can swap out the background image, change the font, customise the social media links.