Creating your site for free in 5 minutes

fernandosolivas — Sun, 01 Mar 2020 15:11:32 +0000

Let's create a site in 5 minutes with Hugo

Who never wanted to have a website, curriculum or even a completely customized portfolio, with your face and your own description? Many use Wordpress to achieve these points but end up demanding a server to run or pay for it to work. Here, I will explain how I used Hugo to make this site in less than 5 minutes using, Github Pages and an editor text, in my case VSCode.

Github Pages

In case you don't know Github, it is a code control version that uses Git as a system. If you do not know one of the two, I recommend further reading for further study. For now, we will need to install Git on your local machine and create an Github account

Installing Git

To install Git is very simple and you can choose which version you want. Be it Windows, Mac OS X or Linux.

After installing, you will need to perform some basic settings. Open your operating system terminal and run the command below.

$ git config --global user.email "me@domain.com"

$ git config --global user.name "Your Name"

There, your Git client is set up!

Creating your Github account

Go to Github, click Sign Up to create an account.

Then create your account by filling out the form and select the free Github plan.

And ... Shazaam !! Your account is created, but don't close Github now, we will need it soon! :)

Go

Install Go on your machine before proceeding. We will need it to install and perform the next step.

Hugo

Hugo is a go framework designed to create websites using templates, abstracting as much logic as possible. You can create a template and make it available in the community for others to use. Soon, other (very cool) people have already created templates for us to use. If you want to take a look at the options, you can find them by clicking here.

Remember, before installing/running Hugo, you will need to have go installed!

Starting our website

The first thing we will need to do is create a repository on Github. A repository is a "directory" in the cloud with history and from that history, it is possible to do a lot of things. Then, on your Github homepage, click on the green button in the left corner to create a new repository, like the image below.

In the form to create a new repository, you * must * create a repository in the format nomedasuaconta.github.io, otherwise, it will not work.

You will then be redirected to a page with a tutorial to start modifying your repository.

We will use the first example and we will start making our edits with Hugo.

Using our repository as a website

Now, open the command line of your operating system and run the command

$ git clone https://github.com/<yourreponame>/<yourreponame>.github.io.git

By default, git will ask for your password to access Github. Relax, this is normal. Enter your password and soon you will see that a folder has been created with the name_positure_name_.

Enter that passata and we will begin to perform the magic.

Installing Hugo

First, we will install Hugo, you will need to have installed go 1.11+ and Git. Those are the only prerequisites. Now run one of these options on your terminal.

Mac OS

$ brew install hugo

Linux

$ brew install hugo

If you don't have Homebrew installed on Linux, install it first.

Windows

$ choco install hugo -confirm

If you don't have Chocolatey installed on Windows, install it first.

Running Hugo

After the installation has been completed, we will be able to execute the following command in the terminal to create our websites.

$ hugo new site. --force

The -- force argument is necessary because the directory already exists and Hugo confirms that we want to write to that destination folder. After running you should have the following structure:

$
├── archetypes
│ └── default.md
├── config.toml
├── content
├── date
├── layouts
├── static
└── themes

Choosing a theme

This is a basic structure of the framework that we don't need to worry about now. Let's choose a theme on the community page. I will use the Cactus theme.

At the root of our project, we will execute the two commands below:

$ cd themes
$ git clone https://github.com/digitalcraftsman/hugo-cactus-theme.git

This will make us download the Cactus theme to our repository and we can customize it. Notice that at the root of your project, there is a file called config.toml. We will add a line indicating which theme we will be using. The file should look like this:

baseURL = "http://example.org/" <- change this value to https://<yourreponame.github.io>
languageCode = "en-us"
title = "My New Hugo Site"
theme = "hugo-cactus-theme"

Now, we will execute the following command hugo server at the root of the project. This will run a local server so that you can see a preview of your site. At the moment, we will only have one example because we haven't changed anything yet. If you access the url: http://localhost:1313 through the browser you will see a page similar to this

Great, now we have something visual! We now need to customize as we prefer to make our website more beautiful. There are many ways to customize the Cactus theme. We can see more details by clicking here.

Customizing our theme

The first change we are going to make is to copy to the root of our project, a file called config.toml (yes, just like yours) which is in ./themes/exampleSite. This file already contains many configuration options and there you can change the name, title, description, and others.

We will set up a section together, which is social. At the end of the file we will add the following content:

[social]
    twitter = "https://www.twitter.com/fernandosolivas"
    github = "https://www.github.com/fernandosolivas"
    linkedin = "https://www.linkedin.com/in/fernandosoliva/"
    medium = "https://medium.com/fernandosolivas"

And choose a really cool photo to put in the center of the page, you will need to move it to ./themes/static/images/avatar.png. It must have the same name, otherwise, it will not work.

In the end, we will have something like this.

Adding more information

Now, our page is still a little raw, so let's add a page with a description of you. The Hugo framework expects that all created pages will be inside the <project>/content folder, so let's create an about folder inside content and a file called _index.md inside the new folder created.

├── archetypes
│ └── default.md
├── config.toml
├── content
│ └── about
│ └── _index.md
...

You may not be familiar, but this file suffix .md represents a file of type Markdown and here has a list of examples and tips of how to use it.

Let's start by editing the file and adding the following text at the top of the file:

+++
date = "2015-06-20T14: 02: 37 + 02: 00"
title = "About"
hidden = false
menu = "main"
+++

Each item is self-explanatory but let's take a look at them:

Date: Date of publication of the page
Title: Title / Page name
Hidden: Should appear or not in the menu
Menu: Which menu it should be related to

After that we can only start writing, my _index.md file looks like this:

+++
date = "2015-06-20T14: 02: 37 + 02: 00"
title = "About"
hidden = true
menu = "main"
+++

Software Developer at [Calindra](https://calindra.tech/), Coordinator of [Meetup GopheRio](https://www.meetup.com/pt-BR/GopheRio), volunteer at [Poder do Voto](https : //poderdovoto.org), Founder of [Simbah](https://www.simbahdc.com/), writer in his spare time, father of an amazing girl and husband of the best illustrator in Brazil [link](https://www.instagram.com/aruizilustra/)!

I like to develop in many languages and use each one for its correct purpose. The languages I am most familiar with are: Java, Go, Python, JavaScript (TypeScript).

TDD, Clean Code, CI and CD enthusiast and good development practices.

***

Making our website available on the internet

Now, back to Git. We will send the changes we made to the files there to the repository we created. For this, we will execute the following commands at the root of the project.

$ hugo -d.
$ git add *
$ git commit -m "Submitting site with description"
$ git push origin master

Now if you access https://yourrepository.github.io you will see your website online, for free and without having to write 1 line of code, only texts.

Conclusion

There are some ways to create a website for free without having to write code, like wix.com, WordPress * and others. Hugo is a good tool for those who already program or are starting because it requires little (if any) knowledge in the development and tools to be able to make a website.

Hugo has several amazing themes and easy to use, if you want to try to modify yours, go for it!

I hope you enjoyed the post and send your questions on my twitter.

To the next!

DEV Community: fernandosolivas