Rewriting my website with HUGO

Henrique Lopes
3 min readMar 31, 2019

Hi everyone, today I'll share my new web site, written in simple steps with Hugo. You can see the old site on my github wrote in python with flask and my old blog wrote in python with pelican.

Why I rewrite with Hugo?

I had two different applications in two different environment. The website was on DigitalOcean and the static blog on github pages. But the two applications has the same focus, share my personal opinion about something. And Why Hugo? I watched a Portuguese talk about it, and I thought very interesting. It was very fast for rewrite my new static site, the Hugo has a complete documentation and many blog posts about it. It was very simple to understand.

How to create your Hugo blog and to integrate with github pages and travis

In my old pelican blog I had an integration with travis to compile my markdowns in html. To rewrite my sentence for Hugo it's not difficult, below I will share the steps necessary, to create your first blog and integrate with travis.

Install Hugo and create your static website:

If you use macOS and brew it's so simple, you can use the command bellow; for another OS I'll add the link for documentation.

$ brew install hugo

Few minutes later, You can already create your first blog, for this use the command below:

$ hugo new site personal-site

The Hugo should be create a structure equal be below;

└── personal-site
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

Automatization your blog posts:

I’m a have user of github and I try to use all tools that it has. The github pages is good tool to create a static site for your project. You need just create a repository and turn on the feature below; I'll add the link for complete documentation about it.

Before of integrate your github with the travis, You need create a personal access token, that's necessary for give permission for the travis automate your deploy. Below a print screen of github page to create your token:

Adding your personal access token on travis:

To automate your deploy, you need of environment variables below and the travis.yml file. I have two branches to work master and hugo. The hugo branch it's where my Hugo application running and the master branch it's where I'll send my compilation code. Inside of hugo branch I created a public package for compile the application, but you can give any name for that package. Every git push that I give, the travis get compile merge with master branch and to my github. Ps: Don`t merge hugo and master branches, The travis need of two branches to work.

  • CNAME_URL: domain of your application.
  • GITHUB_EMAIL: Email that you used for create a token.
  • GITHUB_TOKEN: Token that you created on github.
  • GITHUB_USERNAME: User that you used for create a a token.

Where is my website?

You can access my new static web site in https://henriquelopes.com.br, there you'll see all informations about me, contacts, open source projects and etc. If you thought my post interesting, you can see the code here. Thank u to read till here. Thanks axdlog, I got many references on my post of your post.

--

--

Henrique Lopes

Software developer who likes to solve software problems using an old technique, the conversation. http://henriquelopes.com.br