Criando uma página web estática com Hugo

Esta é a Parte 1 da nossa série de artigos sobre como criar uma página pessoal com Hugo e Github Pages.

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!

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.

Instalando em um ambiente Linux com Apt-get ou Pacman

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

$ sudo pacman -S hugo --noconfirm
$ 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:

$ choco install hugo -confirm
$ 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 o Git e o Go 1.11 instalados no seu ambiente.

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 gopherio.hugo.

$ hugo new site gopherio.hugo
Retorno de sucesso ao criar um novo projeto Hugo

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.

Exemplo de como ficará o projeto utilizando o tema Devfest Toulouse Theme
  • Inicie um repositório Git; e
  • Adicione um submódulo do Git com o projeto do tema escolhido.
$ 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
$ mkdir themes$ git submodule add https://github.com/GDGToulouse/devfest-theme-hugo.git themes/devfest-theme-hugo
baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "devfest-theme-hugo"

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

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 .

baseURL = "https://gopherio.github.io"languageCode = "pt-br"title = "GopheRio"# Themetheme = "devfest-theme-hugo"# ParamsenableEmoji = trueenableRobotsTXT = trueenableMissingTranslationPlaceholders = true#googleAnalytics = "UA-143083330-1"[params]title = "GopheRio - Golang meetup no Rio de Janeiro"date = "2019-10-03"description = "O GopheRio é uma comunidade de usuários Golang no Rio de Janeiro"images = ["/images/social-share.jpg"]email = "gopheriomeetup@gmail.com"keywords = "event, google, programming, go, golang, developers, web, cloud"copyright = "GopheRio Meetup"cfpUrl = "https://forms.gle/YhqM93oHFXDLn2K48"subscriptionUrl = "http://meetup.com/gopherio"appleTouchIcon = "/apple-touch-icon.png"favicon32 = "/favicon-32x32.png"favicon16 = "/favicon-16x16.png"manifest = "/manifest.json"safariPinnedTab = "/safari-pinned-tab.svg"themeColor = "#673ab7"[params.logos]jumbo = "/images/logos/devfest_color_text.png"header = "/images/logos/devfest_color_text.png"footer = "/images/logos/devfest_gray_text.png"[menu][[menu.main]]identifier = "meetup"name = "Meetup"url = "http://meetup.com/gopherio"weight = 200external = true

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.



Responsive

Software Engineering Blog & Programming Tutorials

Marco Paulo Ollivier

Written by

Software Developer, futuro físico, entusiasta de Economia, Política e Filosofia. Também é Vascaíno, fã do GnR. Metido a fotógrafo e guitarrista meia-boca😜

Responsive

Software Engineering Blog & Programming Tutorials