Como criar uma página web estática com Hugo

Aprenda como criar sua própria página web, estática e facilmente personalizável com Hugo.io.

Provavelmente você já teve vontade de criar uma página pessoal, um blog — ou alguma coisa do tipo para dar mais visibildiade ao seu trabalho — , mas ou não tem tempo, ou ficou com medo de sair caro. Enfim. Motivos e medos não faltam quando pensamos em disponibilizar alguma coisa na internet. Pois bem, aqui eu irei publicar uma sequencia de textos que vão tentar te ajudar nesse sentido e esta é a Parte 1 da nossa série sobre como criar uma página pessoal com Hugo e Github Pages.

Image for post
Image for post

O que esperar dessa série?

A ideia nessa sequencia de artigos é mostrar como qualquer pessoa consegue criar um site e publicá-lo de forma rápida e fácil. Para isso, vamos utilizar alguns recursos que estão disponíveis na internet. Para que não fique cansativo, esse conteúdo será dividido em, inicialmente, 3 partes podendo, eventualmente ter outras no futuro.

Nessa primeira parte vamos começar com o ambiente de desenvolvimento de um projeto construído com base no Hugo. Para isso, vamos criar um site utilizando um de seus diversos templates disponíveis e gerar um conteúdo estático pronto para ser publicado.

Na segunda parte, utilizaremos um recurso do Github para publicação de páginas estáticas chamado Github Pages. Falaremos sobre algumas características específicas do recurso oferecido e configurações importantes que devem ser levadas em conta na hora de configurar nosso projeto.

Na terceira parte, mostraremos também como configurar um domínio próprio para que seu site não fique com um endereço padrão do Github Pages. Esse será o único momento em que precisaremos de algum tipo de investimento — além do nosso tempo, claro — , pois precisaremos comprar um domínio e para isso usaremos o Registro.BR. Também comentaremos alguns dos problemas que tivemos no processo.

Antes de qualquer coisa… Por que Hugo?

O Hugo se mostrou uma solução muito rápida e prática para construção de sites estáticos. Com ou sem a utilização de um template pre-existente, você cria rapidamente uma solução para sua página web. Como veremos, temos soluções muito simples de instalação não dependendo, por exemplo, de um ambiente Go configurado previamente em sua máquina. Suas informações são baseadas em arquivos de propriedades e seu processo de geração é bem simples. Além disso tudo, sua documentação é completa e fácil de entender. Ah! E o mais importante: é gratuito!

Bom. Sem mais enrolação, vamos colocar a mão na massa.

Instalando e configurando o ambiente Hugo

Apesar do Hugo ser escrito em Go, não é necessário que ele esteja instalado em sua máquina. Dessa forma é necessário apenas instalar o Hugo. Vale lembrar também que o Hugo é multiplataforma então é possível instalar em sistemas Linux, Windows, MacOS etc. É possível encontrar a última versão lançada no Github do projeto.

Importante ressaltar que estamos usando para esses artigos a versão 0.50 do Hugo. https://github.com/gohugoio/hugo/tree/v0.50

Instalando em um ambiente Linux com Apt-get ou Pacman

Vamos usar como modelo de instalação duas distribuições:

Distribuições que utilizam o Pacman (como o Arch Linux)

$ sudo pacman -S hugo --noconfirm

E também distribuições que utilizam o APT (como o Ubuntu ou o Debian)

$ sudo apt install hugo

Instalando em um ambiente MacOS com Homebrew

Se você está usando ambiente MacOS com Homebrew você pode instalar o Hugo com o seguinte comando

$ brew install hugo

Instalando em um ambiente Windows com Chocolatey ou Scoop

Se você está usando um ambiente Windows e utiliza um gerenciador de pacotes como o Chocolatey ou o Scoop, você também pode instalar o Hugo com um dos comandos abaixo:

Instalando com o Chocolatey

$ choco install hugo -confirm

Instalando com Scoop

$ scoop install hugo

Outras formas de instalação…

Como mencionado anteriormente você pode fazer o download do binário da última release que pode ser encontrada no Github do projeto. Outra forma também é baixar o código do projeto e fazer o build. Nesse último caso é preciso ter uma versão do GIT e do Go instalados no seu ambiente.

Você pode ver mais detalhes de como instalar o Hugo no seu ambiente na documentação oficial do projeto.

Versão do Hugo

Para verificar se o Hugo foi instalado corretamente você pode verificar sua versão utilizando o comando

$ hugo version

Começando um projeto

Como base para esse artigo, vamos criar o projeto do site do GopheRio, nosso meetup de Go no Rio de Janeiro.

Criando um novo site

Vamos começar executando o comando abaixo para criar a estrutura básica de um projeto Hugo. No caso, criaremos uma projeto com o nome .

$ hugo new site gopherio.hugo

Uma mensagem parecida com essa será exibida

Image for post
Image for post
Retorno de sucesso ao criar um novo projeto Hugo

E uma estrutura como está será criada

Image for post
Image for post

Pronto! Temos uma estrutura básica de um projeto Hugo criada.

Adicionando um tema

O próximo passo é adicionar um dos temas disponíveis em themes.gohugo.io para incorporar ao nosso site pessoal. Para esse exemplo, vamos usar o Devfest Toulouse Theme.

Image for post
Image for post
Exemplo de como ficará o projeto utilizando o tema Devfest Toulouse Theme

Os passos seguintes devem ser feitos para que possamos adicionar da forma correta o tema:

  • Entre na pasta do projeto;
  • Inicie um repositório Git; e
  • Adicione um submódulo do Git com o projeto do tema escolhido.

OBS: quando queremos adicionar um projeto Git de terceiros ao que estamos trabalhando garantindo que ambos sejam atualizados de forma independente, criamos um submódulo dentro do projeto. Para isso precisamos que você tenha o Git instalado na sua máquina de desenvolvimento e que o nosso projeto já esteja, pelo menos, iniciado como um projeto Git.

“Sub módulos permitem que você mantenha um repositório Git como um subdiretório de outro repositório Git. Isso permite que você faça o clone de outro repositório dentro do seu projeto e mantenha seus commits separados.” — Documentação oficial do Git

Vamos aproveitar e commitar o que temos até agora

$ cd gopherio.hugo$ git init$ echo "# gopherio.hugo" >> README.md$ git add README.md$ git commit -m "Adiciona arquivos basicos do Hugo"$ git remote add origin git@github.com:gopheriomeetup/gopherio.hugo.git$ git push -u origin master

E agora sim vamos adicionar o sub-módulo do tema

$ mkdir themes$ git submodule add https://github.com/GDGToulouse/devfest-theme-hugo.git themes/devfest-theme-hugo

Agora adicione a linha theme = "devfest-theme-hugo" ao arquivo de configuração .

O esperado é que o arquivo esteja com algo parecido com isso

Executando localmente o projeto

Bom. Com o que temos até aqui já é possível visualizarmos o primeiro contato com o projeto que criamos. Agora vamos executar o comando abaixo para executar o projeto.

$ hugo server -D

As seguintes informações devem aparecer no console

Image for post
Image for post

Depois disso acesse o site no endereço http://localhost:1313

Pronto. Já temos um projeto básico feito em Hugo.

Algumas informações adicionais de configuração

Alguns parâmetros adicionais podem ser utilizados no arquivo de configuração para que seja possível personalizar o site que criamos, por exemplo: se quisermos adicionar novos links ao menu do projeto que estamos criando, basta fazer com que o fique parecido com esse .

E o nosso primeiro resultado parcial ficará assim

Image for post
Image for post

Pode não parecer muito bonito (hehe), mas podemos ver que algumas informações que definimos nas propriedades já estão na página.

Normalmente conseguimos ver com mais detalhes o que pode ser configurável no template que escolhemos no próprio projeto do tema no Github.

Conclusão da primeira parte

Com isso encerramos a primeira parte. Vimos nesse momento como instalar o Hugo em ambientes diferentes, como é fácil criar um projeto, adicionar um template, alterar o conteúdo e dessa forma já conseguir ver nossos primeiros resultados. No próximo artigo veremos como publicar o projeto que geramos no Github.

Ah! Importante! Quer ver como ficou o projeto? Dê uma olhadinha no nosso Github

Próximos passos…

Agora que já temos o nosso projeto base criado, podemos pensar em publicar, certo? Então corre na continuação da nossa série e vamos disponibilizar na internet o que criamos.

Ultima atualização: 22/02/2020

Responsive

Software Engineering Blog & Programming Tutorials

Marco Paulo Ollivier

Written by

|| Software Engineer @nubank || Gopher || @gopheriomeetup organizer || @VascodaGama fan /+/ || Carioca da Gema +5521 || Trying to be a physicist

Responsive

Software Engineering Blog & Programming Tutorials

Marco Paulo Ollivier

Written by

|| Software Engineer @nubank || Gopher || @gopheriomeetup organizer || @VascodaGama fan /+/ || Carioca da Gema +5521 || Trying to be a physicist

Responsive

Software Engineering Blog & Programming Tutorials

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store