Hugo é um dos mais populares geradores de sites estáticos de código aberto. Com sua incrível velocidade e flexibilidade, Hugo torna a construção de sites muito divertida e fácil de criar.
🔊 Nesse vídeo instalamos e configuramos o HUGO um Static Site Generator escrito na Linguagem de Programação Go (do Google), além de criarmos um arquivo de DEPLOY com SHELL SCRIPT utilizando WORKFLOWS para serem gerenciados pelo ACTIONS do GitHub.
Assista ao Vídeo
Instalação
01. Dependências
sudo apt install git
sudo snap install go --classic # Ou: sudo apt install golang-go
go version02. Construir o binário
mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended03. Instalação
sudo mv ~/go/bin/hugo /usr/local/bin/
hugo version04. Pós instalação
Limpando
cd
sudo rm -rf go src05. Crie um repositório com nome do seu usuário se não existir:
- https://github.com/SEU_USUARIO/SEU_USUARIO onde ficará o código fonte do seu blog.
Se quiser ainda adicione um
README.mdcustomizado para aparecer como apresentação do seu perfil do GitHub como nesse artigo.
06. Crie também um repositório de nome https://github.com/SEU_USUARIO/SEU_USUARIO.github.io para ser o seu blog.
07. Clone somente o repositório SEU_USUARIO
git clone https://github.com/SEU_USUARIO/SEU_USUARIO08. Gere seu site hugo dentro de SEU_USUARIO forçando;
hugo new site SEU_USUARIO --force09. Adicione um tema como submódulo, encontre um tema aqui: https://themes.gohugo.io/:
git submodule add https://github.com/niklasbuschmann/contrast-hugo.git themes/contrast-hugoUse como submódulo para não ter problemas futuros.
10. Configure seu config.toml na raiz de SEU_USUARIO com os seguintes dados:
baseURLprecisa estar configurado para o seu blog onlinelanguageCodeo idioma do seu blog
titleo título do seu blogthemeo nome do tema que você clonou[permalink]como deseja que as url do seu blog apareça, saiba mais aqui
Exemplo:
baseURL = "https://SUA_URL/"
languageCode = "en-us"
title = "My new blog made with Hugo: The Pinguim"
theme = "contrast-hugo"
[permalinks]
posts = "/:filename/"11. Verifique temporariamente seu site:
hugo serverE acesse o endereço: http://localhost:1313/, digite Ctrl + C para parar o servidor.
12. Crie e edite sua primeira postagem
hugo new posts/primeiro-post-exemplo.md
/home/user/SEU_USUARIO/content/posts/primeiro-post-exemplo.mdExemplo de postagem, remova a linha
draft: true:
---
title: "Primeiro Post Exemplo"
date: 2021-07-07T00:01:00-03:00
---
## Lorem ipsum dolor sit amet
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
> Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```cpp
#include <iostream>
int main( int argc , char ** argv ){
std::cout << "Olá, Mundo!" << '\n';
return 0;
}
```
+ Lorem ipsum dolor sit amet
+ consectetur adipisicing elit
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Ut enim ad minim veniam, quis nostrud exercitation ullamco13. Teste para ver se está tudo funcionando normalmente
hugo server14. Adicione seu https://github.com/SEU_USUARIO/SEU_USUARIO.github.io como submódulo e de nome public
git submodule add https://github.com/SEU_USUARIO/SEU_USUARIO.github.io publicAtenção ao nome da branch, a master não é mais a default e sim a
main. Saiba mais aqui.
15. Construa seu site estático rodando o comando hugo
hugo16. Entre no diretório public/ e adicione, commit e suba seu site:
cd public
git add .
git commit -m "first deploy"
git push origin main17. Acesse: https://SEU_USUARIO.github.io/ e veja se está tudo certo.
18. Utilizando Workflow para Actions e deploy
Crie um diretório e um subdiretório na raiz de SEU_USUARIO e dentro deles um arquivo de nome gh-pages.yml e insira esse conteúdo ao mesmo
mkdir -p .github/workflows
vim .github/workflows/gh-pages.yml19. Adicione, commit e suba todos os arquivos
git add .
git commit -m "my source blog"
git push origin main20. Monitore o Workflow
Vá no Actions do GitHub: https://github.com/SEU_USUARIO/SEU_USUARIO/actions e veja se o deploy foi gerado corretamente.
21. Automatizando tudo para novas postagens
Crie um arquivo de nome vim deploy.sh e insira esse conteúdo nele:
#!/usr/bin/env bash
hugo
commit="No comment for this commit"
[[ ! -z "${1}" ]] && commit="${1}"
cd public
git add -A
git commit -m "${commit}"
git push origin main
cd ..
git add -A
git commit -m "${commit}"
git push origin main22. Dê permissão de execução:
chmod +x deploy.sh23. Crie um postagem nova:
hugo new posts/meu-segundo-post.mdE preencha seu artigo como desejar
24. Publique
./deploy.sh "Minha nova postagem"25. Acompanhe se deu certo
Em https://github.com/SEU_USUARIO/SEU_USUARIO/actions e veja o novo artigo no seu site: https://SEU_USUARIO.github.io/.
26. Configurações
Se você criar uma nova postagem ou editar a que já existe, verificará que o Hugo ignorará suas tags HTML, por exemplo, um vídeo incorporado.
<iframe width="915" height="515" src="https://www.youtube.com/embed/SDtFO6ZZtMk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Se formos ver o código fonte da página, aparecerá somente essa linha no lugar do nosso HTML: <!-- raw HTML omitted -->
Para resolver isso: adicione esse toml ao seu config.toml e pesquise(Vim: /unsafe) a opçao: unsafe deixe como true .
Em outros vídeos ou postagens veremos mais dicas de Hugo, como criar páginas, templates próprios, inserir campo de comentários e outras coisas!
Acompanhe as novidades em: https://terminalroot.com.br/newsletter.
