$ cd themes
$ git clone https://github.com/digitalcraftsman/hugo-freelancer-theme
For more information read the official setup guide of Hugo.
After installing the Freelancer Theme successfully it requires a just a few more steps to get your site running.
The config file
Take a look inside the exampleSite folder of this theme. You’ll find a file called config.toml.
It contains detailed information about the setup of the contact form (or see below) and the customization of all strings in this theme.
To use it, copy the config.toml in the root folder of your Hugo site. Feel free to change strings as you like.
Make the contact form working
Since this page will be static, you can use formspree.io as proxy to send the actual email. Each month, visitors can send you up to one thousand emails without incurring extra charges. Begin the setup by following the steps below:
Enter your email address under ‘email’ in the config.toml
Upload the generated site to your server
Send a dummy email yourself to confirm your account
In the footer you can link some of your social network accounts. Search for [params.footer.social.networks] at the bottom of the file. The configuration should look similar to this one:
icon = "fa-github"
link = "//github.com/spf13/hugo"
The variable ‘icon’ represents the shown icon of the social network. It’s a CSS class of Fontawesome’s popular icon font. Search here if you need a particular icon.
Create your portfolio
Beside the config file, there is in data another subfolder called projects which hosts the files that will appear as your projects in the portfolio section. Such a project file might look like this one written in YAML:
title: Project Cabin
client: Start Bootstrap
category: Web Development
description: Use this area of the page to describe your project. The icon above is part of a free icon set by [Flat Icons](//sellfy.com/p/8Q9P/jV3VZ/"). On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!
Copy the folder projects inside the data folder in the root directory of your site. Let’s make some changes to show your work.
Pay attention to the modalID. It must be a unique integer and be incremented with each new project you want to add to the portfolio. Otherwise, the corresponding modal can’t be rendered.
Furthermore, you can use Markdown syntax for URLs like here [text](//url.to/source) in the description. Copy the image of an project inside static/img/portfolio and just enter the filename.
In order to see your site in action, run Hugo’s built-in local server.