It’s April 2020. Covid19 forced us to quarantine at home (New York City) and I find myself with some time on my hands. The perfect time to tackle all the nice projects I told myself I would complete some day.
Why not start with a blog? Meet Hugo:
Alright let’s give it a shot.
If you are only interested in creating a Hugo based website from a github repo, just run the following commands from this github repository:
If you are interested in learning what the script does, the following is an explanation.
Let’s get started. We need to build the source code of our blog, somehow.
We will need some basic tools first:
Now for the fun part
Just like that! This is already a fully functional website, smooth right? Let’s see how it looks with
This command will launch a local version of the website on your machine.
Now open a web browser and navigate to localhost:1313
you will see the prototype version of your website come to life with a live preview
directly on your computer, one of my favorite features of
Now let’s upload our project online.
At the time of writing, Github is an amazing place to do this, mainly for its
github pages feature. Basically Github will allow you to host a static webpage
(basically what we are creating with hugo), completely for free at the address
Pretty cool huh? So, let upload our project to github (you’ll have to create a repo first)
Our project is now online and uses version control, this is going to be super helpful when editing in the future.
Now that the source code is online, we want other people to see it as well!
We are going to do this using github pages, specifically, by creating a branch
gh-pages in our repo, where we will place the code
hugo generates when
translating content we write in
hugo works by generating all the files needed by a real website and placing them
<project>/public folder on your computer.
You can see this process in action by running
hugo -t terminal and looking into
public folder generated.
Now we want to set up the
git repo so that every time that we generate new
content in public, it will be automatically pushed to the
Let’s get to work:
Now your public folder will host the
gh-branch of your repo, perfect! To
publish the changes to the website to that branch we can just:
https://<username>.github.io/<repo> and look at your website!