Hugo themes for beginners - 001 Yourfolio
Welcome to the first episode of “Hugo themes for beginners”. In this series, I’ll be testing out each theme available on the Hugo website from a beginners perspective. We’ll test each theme out, so you can decide which one to choose for your next project.
So what is Hugo? Hugo is a static site generator. Basically, it’s a tool that helps us create static websites. Unlike popular CMS websites like Wordpress and Drupal which are dynamic, A Hugo site doesn’t have a database. If your site doesn’t need a database, it can be beneficial to use Hugo. Static sites are fast, secure and can be hosted almost anywhere cheaply and also for free for some uses.
Here are the things we will do:
- We will install each theme on a new Hugo site
- Find out what how to edit the content
By the end of each video you’ll know how to edit the theme and whether it suits your need.
What we won’t do in this series:
- Any coding
You can add extra features to each theme but we’ll skip that to make each video short. Also, since this series is for absolute website beginners, we won’t be coding at all.
We will be copying and pasting files and replacing text for the most part. We’ll also run 2 or 3 commands from the command line but everything will be explained.
Each Theme is unique
I will try to analyze each theme accurately so that we can see who it’s for. I understand that a lot of thought is put into building these themes. If you think my explanation of a theme was incorrect of insufficient, please do let us know in the comments so that we can address it.
Let’s get started
So, let’s begin the series with our first theme!
So first off you will need Hugo installed on your PC. If you haven’t yet installed it, please check my other guide on how to install hugo your PC. I’ll assume you have Hugo installed, as well as git and a text editor. I’m using the atom text editor, I suggest you try it if you’re not sure which one to use.
Theme Intro - Yourfolio
The first theme we will be looking at is Yourfolio from Sergey Furtak. It’s a simple and responsive theme for personal websites and to showcase your portfolio.
In the frontpage, we have a hero space for some large visuals, an Introduction space followed by large images for your portfolio. We also have a menu with links to the about & contact page.
A. Install Hugo
Let’s begin by creating a Hugo site. You can follow along step by step.
- I’ll create a folder called ‘websites’ on my desktop and open it.
- Right click inside the folder and select “Git Bash Here”.
- Inside git-bash, type:
hugo new site demosite
note: replace demosite with whatever name you want, it’s just the website folder’s name.
You should now see a new folder with whatever name you chose. That’s how easy it is to create a Hugo website. Let’s take a look inside this folder and I’ll briefly explain what each file and folder is for.
- The config file (config.toml or config.yaml)
- An important file for settings such as website name, languages, theme as well as some customizations.
- archtypes folder
- We can define default values for posts & pages here. We won’t use archtypes in this series.
- content folder
- This is where we create posts & pages. In hugo we use markdown (.md) files for content.
- data folder
- We can also store content here as data files. This can be very useful for large data. Hugo is not only for small sites.
- layouts folder
- This is where the html(templates) files are stored. Themes you download will also have a layouts folder. We won’t touch the code but I’ll talk about this folder later.
- static folder
- This is where you should save your images. Themes you download will also have a static folder where css and js files will be stored. I’ll talk about this folder too.
- themes folder
- Finally we have the themes folder.
Our site has no content so we’ll start by installing a theme.
B. Install a Hugo theme - part 1
We’ll run another command but this time from inside the themes folder.
return to git-bash and change directory to the themes folder by running:
cd demosite cd themes
Note: If your uncomfortable with the previous step, close git-bash. Go to the themes folder in your file explorer, right-click inside the folder and select “Git Bash Here”. It does the same thing.
Let’s go back to the Yourfolio theme page, click “Download” to reach the theme’s github page.
We basically want to download this folder into our themes folder.
Click the “Clone or download” button and copy the repository link by clicking on the clipboard icon.
Return to the git-bash terminal and run:
git clone https://github.com/serg/yourfolio.git
Note: Make sure you run this command in the themes folder.
Note 2: To paste text in the terminal, press shift + insert.
Note 3: To copy text in the terminal, select text by dragging the mouse and type ctrl + insert.
You should now have the yourfolio theme installed inside your themes folder.
Let’s look inside the yourfolio folder. You should notice that it looks very similar to our Hugo websites folder.
C. Install a Hugo theme - part 2
Theme’s usually include sample content just like in their demo. Let’s use the files from the sample folder to save us some time.
Here’s what we’re going to do.
Notice inside the yourfolio theme folder there is a folder called exampleSite. Let’s refer to this exampleSite folder as B.
Let’s refer to our Hugo website folder as A.
- Drag the config file from B to A, replacing A’s config file.
- Drag the contents of B’s content folder into A’s content folder.
- Drag the contents of B’s static folder into A’s static folder.
return to git-bash and change directory to the hugo website folder by running:
You can also use the file explorer and right-click from inside the website folder clicking “Git Bash Here”.
Let’s run our server by running:
A bunch of text should scroll down without any errors and you’ll be given an address like something like http://localhost:1313.
Open up your browser and take a look at your new site.
Testing out the theme - yourfolio
Now that we have our site running, let’s take a look at the features it provides and how we can edit the content.
I’ll open up my text editor so we can compare the files with what we see in the actual website. I’m going to open up atom and the first thing I’ll do is add the hugo website folder as a project by going to File->Add Project Folder then selecting our hugo website folder.
We can also achieve the same thing by opening the terminal in the hugo website folder and running:
A project folder in Atom is just like a file explorer. We can open files directly within atom rather than the file explorer.
The Static pages - About
The first file to look at is the about.md page in the content folder. In your browser click on the ‘about’ link in the top menu and compare the page with the about.md file. You should be able to tell which parts of the file corresponds to that of the website.
All we need to do is replace the dummy text with actual text making sure to stay consistent with the files format.
Do you notice the 3 dashes at the top and bottom of the file? Everything between these dashes are metadata that Hugo calls frontmatter. Frontmatter has to be written in a certain way. Notice some of the words are indented to the right. This is called indentation and is done by pressing ‘tab’ in front of the text. Indentation is important in frontmatter so it’s best to just copy and paste the examples and see if works.
Every time you save a file, Hugo will update the information which you can check in the git-bash. Check the git-bash terminal frequently and see if Hugo throws any error message.
Below the 3 dashes is where you can type some content in markdown although we won’t need to do so in this episode.
Notice that there is the url tag beneath the image tag. That is the link to the image being used on this page. This img/profile_img.png file resides in the static folder, you should take a look inside the folder and confirm it’s location. You can replace this image to have your own image display instead.
A bit down the file we see the responsive_sources tag with a link to 3 images. These are the exact same images but smaller versions of the file that the theme developer prepared.
When someone visits the website with a smaller device like a smartphone, the smaller image will get served instead reducing bandwidth.
Further down the file we can see the text_groups tag with the ‘name’ and ‘description’ tags being repeated. Feel free to add more of these tags if you need them.
You’ll notice the GET IN TOUCH area contains an email address. We can replace this with our own email.
I said we won’t touch coding but let’s see how we can edit this email address:
<a class="blue-text bold-text" href="mailto:email@example.com?subject=Hello,%20Yates!%20Lets%20make%20something%20great%20together!">firstname.lastname@example.org</a>
This is called an ‘a’ tag or a link tag and looks like this:
We put text between the tags so people can click on it, In this case we can put an email address so people know it’s an email.
This link doesn’t work yet because we haven’t it told where to go.
To do this, we add the href attribute:
<a href="http://google.com">Contact Me</a>
links are commonly used to send people to other webpages. However, it can also be used to help people send emails:
<a href="mailto:email@example.com">Contact Me</a>
Click this and it will open an email client with the “to” field filled in.
We can even have the email subject filled in:
<a href="mailto:firstname.lastname@example.org?subject=Hello%20from%20contact%20form">Contact Me</a>
Try clicking on this link, the email subject should be filled with : “Hello from contact form”.
Since url’s can’t contain spaces, they’re represented with the characters: %20.
This theme didn’t include a contact form as of this recording so we’ll have to use this method.
You can also create your own contact form using html later on.
The Static pages - Index page
Editing the index page will be almost the same with the about page. We can just replace the text and images to that of our own. One thing I don’t like about the current set up is that if you click on one of the projects, the user gets sent to an external site. I think it might be better to send them to one of our own pages, perhaps a new page will more detail about the project.
All we need to do is edit the link tag, let’s change it to port1. Next we need to create a file in the content folder called port1.md. Now we can just add the content in this file and the user will get sent to this page.
Publishing the website
Once we’re happy with our website, we can export our website and upload where ever we want. First we need to stop the hugo server by going to git-bash and running ctrl+c. Then make sure in the config file the baseURL is set to the correct url you will be using. Finally go back to git-bash and run:
This will create a public folder where the final static version of the website is saved. Go ahead and copy the contents of this public folder to the www or public_html folder of your webhost to publish your website.
You can also publish your website for free on Netlify using github but I think I will save that for another tutorial.
So this concludes our first episode of “Hugo themes for beginners - Yourfolio”.
This episode was a bit long because I wanted to explain some of the Hugo concepts but the following episodes should be much quicker.
I hope you found this tutorial helpful, if so please mash that like button.
Questions, comments and constructive criticisms are always welcome.
If you want to see more videos related to websites and photography, please subscribe to my channel : https://www.youtube.com/user/vidafuku.
I will see you all in the next video.