Criar um site em Hugo framework é muito fácil e nesse tutorial faremos a integração do site com alguns sistemas de comentários. Isso possibilitará que os visitantes possam interagir deixando comentários nas postagens.
Mostraremos como realizar a integração com o Emote e o GraphComment. Ambos são aplicações de comentários que possuem uma fácil integração com sites estáticos.
Pré-requisitos:
-
Site em Hugo
Caso não tenha o site em Hugo, nesse tutorial ensino como criar
https://tiagoscosta.com.br/posts/hugo-framework-criando-o-primeiro-site/
Ou você pode clonar esse repositório, com o submódulo, pois é ele que uso nesse tutorial
git clone https://github.com/tiagotsc/hugo-first-site.git --recurse-submodules -
Emote
Crie um conta nesse serviço de comentários, pois faremos a integração e demostração de uso. É gratuito.
-
GraphComment
Crie um conta nesse serviço de comentários, pois faremos a integração e demostração de uso. É gratuito.
Integração com Emote Link para o cabeçalho
Acesse sua conta no Emote, clique no seu domínio no lado esquerdo da tela, depois clique em Installation Guide e do lado direito, copie o código disponibilizado, conforme figura abaixo:
Agora na pasta raiz do seu site, entre na pasta de themes e depois na pasta do tema que está usando.
No meu caso estou usando o tema Ananke.
Copie a pasta layout e cole da raiz do seu site, pois iremos editar e sobrepor o conteúdo existente.
Seu diretório deve ficar mais ou menos assim:
first-site/
├── archetypes/
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/ <-- a pasta que copiamos e colamos
├── public/
├── resources/
├── static/
├── themes/
└── hugo.toml
Abra o arquivo que está em layouts > _default > single.html. Dentro da tag article ao fim dela, coloque o seguinte conteúdo:
<script defer src="https://i.emote.com/js/emote.js"></script>
<div id="emote_com"></div>
Deve ficar da seguinte forma:
Agora no terminal, na pasta raiz do seu site, rode o comando:
# para compilar o site e disponibilizar o site
hugo server -D
Acesse o navegador em http://localhost:1313.
Clique em qualquer postagem que tenha e ao fim da página você verá que será aberto um campo de comentário.
Observação Link para o cabeçalho
Para que possamos prosseguir para a integração com o GraphComment, recomendo que remova o código / script colocado anteriormente no arquivo layouts > _default > single.html para o exemplo do Emote.
Integração com GraphCommnent Link para o cabeçalho
Acesse sua conta no GraphComment e clique em Add a new website e no formulário preencha da seguinte forma:
Depois clique em Save.
Agora clique encima do projeto de site que acabou de criar, conforme figura abaixo:
Na tela que se abre, clique na opção Universal code, conforme figura abaixo:
Na tela role até a parte do código de integração, copie ele.
Abra o arquivo que está em layouts > _default > single.html. Embaixo da tag article, coloque o código que copiou:
<div id="graphcomment"></div>
<script type="text/javascript">
/* - - - CONFIGURATION VARIABLES - - - */
var __semio__params = {
graphcommentId: "first-site", // AQUI VAI SEU ID GERADO NO GRAPH COMMENT
behaviour: {
// HIGHLY RECOMMENDED
// uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
},
// configure your variables here
}
/* - - - DON'T EDIT BELOW THIS LINE - - - */
function __semio__onload() {
__semio__gc_graphlogin(__semio__params)
}
(function() {
var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
})();
</script>
Deve ficar da seguinte forma:
Agora no terminal, na pasta raiz do seu site, rode o comando:
# para compilar o site e disponibilizar o site
hugo server -D
Acesse o navegador em http://localhost:1313.
Clique em qualquer postagem que tenha e ao fim da página você verá que será aberto um campo de comentário.
Nesse tutorial, você viu duas formas de fazer integrações de comentários no seu site!
Teste, interaja, veja qual goste mais e te atenda melhor.
A partir de agora as pessoas já podem interagir com suas postagens e isso vai deixar a experiência bem mais interessante🙂!
Em breve abordarei mais recursos sobre o assunto.
Comandos úteis
# COMANDOS HUGO
# Compila o site, o resultado fica diponível na pasta public
hugo
# Sobe o site localmente sem exibir postagens de rascunhos (padrão do Hugo)
hugo server
# Sobe o site localmente exibindo postagens de rascunhos
hugo server -D
# Sobe o site localmente deixando-o acesssível de qualquer dispositivo na rede
# Bom para acessar de outra máquina ou visualizar no celular
hugo server --bind 0.0.0.0 --baseURL http://0.0.0.0 --port 1313 -D
Ou
hugo server --bind=0.0.0.0 --baseURL=http://0.0.0.0:1313 -D
# Cria uma nova postagem
hugo new content content/posts/my-first-post.md
# Listar comandos
hugo -h
# Mais detalhes dos comandos na documentação oficial
https://gohugo.io/commands
Links úteis
Documentação oficial do Hugo
https://gohugo.io/documentation
Emote
Graph Comment