Site Estático on Tiago Costa

📝 Shortcodes no Hugo: Como Incorporar Jogos e Conteúdo Interativo

Fri, 28 Nov 2025 18:40:00 -0300

O Hugo é um gerador de sites estáticos conhecido por sua velocidade e flexibilidade. Embora seja excelente para conteúdo estático, muitas vezes queremos adicionar funcionalidades dinâmicas e interativas, como jogos, formulários ou visualizações de dados.

A solução mais elegante e poderosa no ecossistema Hugo para isso é o uso de Shortcodes.

O que são Shortcodes no Hugo? Link para o cabeçalho

Shortcodes são pequenos pedaços de código que você pode chamar diretamente dentro do seu conteúdo Markdown. Eles são essencialmente templates (arquivos .html ou .html com <script> e <style> inline) que o Hugo processa e injeta no lugar da chamada do Shortcode.

📝 Hugo - Integração de site com sistema de comentários

Sat, 14 Dec 2024 15:25:00 -0300

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

📝 Hugo - Integração de site com Pagefind

Mon, 09 Dec 2024 12:05:00 -0300

Criar um site em Hugo framework é muito fácil e nesse tutorial faremos a integração do site com o Pagefind. Isso deixará nosso site mais interessante e funcional através de um buscador rápido e extremamente eficiente.

Pagefind é uma biblioteca de pesquisa totalmente estática, que faz baixo uso de largura de banda, não precisa de infraestrutura e que tem uma excelente performance, seja em pequenos sites, ou sites de grande porte.

📝 Hugo - Hospedando site no Firebase

Thu, 28 Nov 2024 08:44:00 -0300

Hospedar um site do Hugo framework é algo bem fácil rápido e por ser um site estático existem diversos provedores onde você consegue hospeda-lo de forma gratuita.

Nesse artigo vou mostrar como hospedar no Firebase que é uma plataforma da Google e ainda vou mostrar como fazer o CI/CD usando o Git Actions do Github.

Pré-requisitos:

Site em Hugo

Caso não tenha o site em Hugo, nesse tutorial ensino como criar

📝 Hugo - Integração de site com o DecapCMS

Wed, 20 Nov 2024 01:07:00 -0300

Criar um site com Hugo Framework é extremamente rápido e fácil, mas um site fica melhor ainda e mais funcional quando inclui um gerenciador de conteúdo (CMS), e é justamente isso que iremos fazer nesse tutorial.

Faremos a integração do DecapCMS a um site feito em Hugo Framework que está hospedado no Netlify.

DecapCMS é um CMS bem versátil e flexível, pois possuí diversas opções de configuração, tanto para campos, estruturação dos arquivos de postagens entre outros.

📝 Hugo - Integração de site com o TinaCMS

Sun, 17 Nov 2024 21:44:00 -0300

Faremos a integração do TinaCMS a um site feito em Hugo Framework que está hospedado no Netlify.

TinaCMS é uma ótima opção, pois já traz diversos recursos prontos para uso como toda uma client para editar suas páginas e autenticação na nuvem via Tina Cloud para ser usado em produção.

📝 Hugo - Hospedando site no Netlify

Sun, 17 Nov 2024 18:38:00 -0300

Hospedar um site do Hugo framework é algo bem fácil rápido e por ser um site estático existem diversos provedores onde você consegue hospeda-lo de forma gratuita.

Nesse artigo vou mostrar como hospedar na Netlify que é um plataforma com bastantes recursos legais para você hospedar, gerenciar, fazer deploys usando CI/CD e muito mais, e tudo já incluso na versão gratuita.

Pré-requisitos:

Site em Hugo

Caso não tenha o site em hugo, nesse tutorial ensino como criar

📝 Hugo - Criando o primeiro site

Fri, 15 Nov 2024 13:38:00 -0300

Criar site no Hugo é algo extremamente rápido e fácil, com poucos comando você consegue criar toda um base para seu site com um código fonte bem leve e totalmente preparado para SEO.

Pré-requisitos:

Hugo
Git

Presumindo que você já tenha o Hugo instalado no seu sistema operacional, caso não tenha, veja o tutorial abaixo para instalação no Windows ou linux Ubuntu.

https://tiagoscosta.com.br/posts/hugo-framework-instalação-no-windows

https://tiagoscosta.com.br/posts/hugo-framework-instalação-no-ubuntu

Criando o site Link para o cabeçalho

Observação: Se estiver usando Windows, não use o CMD ou PowerShell, use o Git Bash, pois assim você não terá problema de enconding de arquivo (caracteres estranho).

📝 Hugo - Instalação no Ubuntu

Mon, 28 Oct 2024 20:15:00 -0300

Hugo é um framework poderoso para gerar sites estáticos, é muito leve e é bem intuitivo para que se propoe.

Velocidade é o carro chefe dele, tanto na velocidade de construção, quanto na de build (compilação do site) do site, oferece diversos recursos extremamente úteis, que abordarei em tutoriais futuros, e é muito, muito flexível, o que é ótimo, pois nos dá diversas possibilidades de customização do nosso site.

Isso possibilita uma curva de aprendizado bem baixa o que acaba resultando no desenvolvimento de sites, muitas vezes, em poucos minutos.

📝 Hugo - Instalação no Windows

Sun, 27 Oct 2024 12:47:00 -0300

Hugo é um framework poderoso para gerar sites estáticos, é muito leve e é bem intuitivo para que se propoe.

Isso possibilita uma curva de aprendizado bem baixa o que acaba resultando no desenvolvimento de sites, muitas vezes, em poucos minutos.