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.
sudo apt install git
sudo snap install go --classic # Ou: sudo apt install golang-go
go version
mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install --tags extended
sudo mv ~/go/bin/hugo /usr/local/bin/
hugo version
Limpando
cd
sudo rm -rf go src
Se quiser ainda adicione um
README.md
customizado para aparecer como apresentação do seu perfil do GitHub como nesse artigo.
SEU_USUARIO
git clone https://github.com/SEU_USUARIO/SEU_USUARIO
SEU_USUARIO
forçando;hugo new site SEU_USUARIO --force
git submodule add https://github.com/niklasbuschmann/contrast-hugo.git themes/contrast-hugo
Use como submódulo para não ter problemas futuros.
config.toml
na raiz de SEU_USUARIO
com os seguintes dados:baseURL
precisa estar configurado para o seu blog onlinelanguageCode
o idioma do seu blog
title
o título do seu blogtheme
o nome do tema que você clonou[permalink]
como deseja que as url do seu blog apareça, saiba mais aquiExemplo:
baseURL = "https://SUA_URL/"
languageCode = "en-us"
title = "My new blog made with Hugo: The Pinguim"
theme = "contrast-hugo"
[permalinks]
posts = "/:filename/"
hugo server
E acesse o endereço: http://localhost:1313/, digite Ctrl + C para parar o servidor.
hugo new posts/primeiro-post-exemplo.md
/home/user/SEU_USUARIO/content/posts/primeiro-post-exemplo.md
Exemplo 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 ullamco
hugo server
public
git submodule add https://github.com/SEU_USUARIO/SEU_USUARIO.github.io public
Atenção ao nome da branch, a master não é mais a default e sim a
main
. Saiba mais aqui.
hugo
hugo
cd public
git add .
git commit -m "first deploy"
git push origin main
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.yml
git add .
git commit -m "my source blog"
git push origin main
Vá no Actions do GitHub: https://github.com/SEU_USUARIO/SEU_USUARIO/actions e veja se o deploy foi gerado corretamente.
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 main
chmod +x deploy.sh
hugo new posts/meu-segundo-post.md
E preencha seu artigo como desejar
./deploy.sh "Minha nova postagem"
Em https://github.com/SEU_USUARIO/SEU_USUARIO/actions e veja o novo artigo no seu site: https://SEU_USUARIO.github.io/.
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.