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.
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 gratuitamente 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 --noconfirmE também distribuições que utilizam o APT (como o Ubuntu ou o Debian)
$ sudo apt install hugoInstalando 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 hugoInstalando 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 -confirmInstalando com Scoop…
$ scoop install hugoOutras 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 versionComeç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 gopherio.hugo.
$ hugo new site gopherio.hugoUma mensagem parecida com essa será exibida
E uma estrutura como está será criada
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.
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 config.toml.
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 -DAs seguintes informações devem aparecer no console
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 config.toml fique parecido com esse .
E o nosso primeiro resultado parcial ficará assim
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.
Leia mais sobre o assunto…
Ultima atualização: 22/02/2020
