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

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 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!

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 o Git e o Go 1.11 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 gopherio.hugo.

$ hugo new site gopherio.hugo

Uma mensagem parecida com essa será exibida

Retorno de sucesso ao criar um novo projeto Hugo

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.

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 config.toml.

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

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

As 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 .

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

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



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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade