path: root/content/post/host-a-blog-with-hugo.md

+++
date = '2025-09-30T03:09:52-03:00'
draft = false
title = 'Host a Blog With Hugo'
tags = ["blog", "hugo", "server"]
categories = ["web", "self-hosted"]
description = "Tutorial de como criar um blog com Hugo e integrar comentários usando Comentario."
+++

Hoje vou mostar como fiz para setar um blog com comentários usando [Hugo](https://gohugo.io/) e [Comentario](https://comentario.app/en/).

- **Hugo** é um framework open source para construção de websites estáticos, extremamente rápido e flexível.  
- **Comentario** é uma engine open source de comentários, fácil de integrar e auto-hospedável.

## 1. Utilizando o Hugo
### Instalando o hugo
Se sua distribuição linux for baseado em Debian rode o comando

```bash
$ sudo apt install hugo
```

caso contrario você pode verificar na documentação.

Agora que você já tem ele instalado basta dar 
```bash
hugo new site {nome-do-seu-blog}
```
que ele criara uma pasta com tudo que eh necessario.

### Instalando um tema
Para instalar um tema veja os temas disponiveis pela comunidade no [link](https://themes.gohugo.io/), no meu caso atualmente estou usando o [Hugo - Classic](https://themes.gohugo.io/themes/hugo-classic/).
Depois de achar um que gostou faca:
```bash
cd {nome-do-seu-blog}/themes
git init
git submodule add link-do-github
```

Abra o arquivo hugo.toml e edite a variavel theme para a pasta criada dentro da pasta do hugo.

### Criando um post 
Para criar um post eh muito simples tambem, basta rodar
```bash
hugo new content content/post/nome-do-post.md
```
Agora basta escrever o seu post em com markdown. Acesse [aqui](https://www.markdownguide.org/cheat-sheet/) para mais informacoes sobre markdown.

### Buildando
Para finalizar rode
```bash
hugo
```
que ele vai atualizar tudo que eh necessario e publicar seu post

--- 
## 2. Setando o comentario
Existem diversas formas de voce instalar o comentario, porem eu fiz isso utilizando docker. Para isso certifique que você tenha o docker instalado 
```bash
docker version
```
e crie um arquivo chamado docker-compose.yml
```docker
services:
  app:
    image: registry.gitlab.com/comentario/comentario:latest-ubuntu
    environment:
      BASE_URL: https://sua-url # mude aqui para sua url
      SECRETS_FILE: "/secrets.yaml"
    ports:
      - "6969:80" # mude para a porta que você quiser
    volumes:
      - ./secrets.yaml:/secrets.yaml:ro
    restart: always
```
essa eh so uma possivel forma, você pode editar o arquivo da maneira que preferir.

Note que vou utilizar o sqlite3 como banco de dados (pois é usa menos memória), caso você queria usar postgress, ou usar um servidor diferente para o banco de dados você deve editar esse arquivo.

Na mesma pasta crie um arquivo chamado secrets.yaml
```
sqlite3:
  file: ./comentario.db
```
Essa eh a configuracao minima que você deve fazer caso queria utilizar o sqlite3.

agora rode no terminal 
```bash
docker compose up -d
```

Para finalizar basta adicionar no arquivo ./themes/hugo-classic/layouts/_default/single.html 
```html
<script defer src="https://sua-url/comentario.js"></script>
<comentario-comments></comentario-comments>
```

Agora eh so acessar a url que voce colocou e setar adicionar o seu servidor, como eh bem intuitivo nao vou colocar aqui

---

## 3. Setando o NGINX
Caso você utilize o nginx como servidor web basta configurar a pagina principal como
```bash
server {
	root /var/www/azuminha.com/public;

	index index.html index.htm index.nginx-debian.html;

	server_name azuminha.com www.azuminha.com; # mude aqui para sua url

	charset UTF-8;

	location / {
		try_files $uri $uri/ =404;
	}
}
```

Você tambem deve arrumar um proxy reverso para a porta que o servico do comentario esta rodando.
```bash
server {
	server_name comments.azuminha.com; # sua url que utilizou para configurar o comentario

	location / {
		proxy_pass http://0.0.0.0:6969/; # mude para a porta que vc utilizou
		proxy_set_header Host 127.0.0.1;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
	}
```

Pronto agora você tem seu proprio blog hospedado pro você mesmo, sem dependencias externas. :smile:
+++
date = '2025-09-30T03:09:52-03:00'
draft = false
title = 'Host a Blog With Hugo'
tags = ["blog", "hugo", "server"]
categories = ["web", "self-hosted"]
description = "Tutorial de como criar um blog com Hugo e integrar comentários usando Comentario."
+++

Hoje vou mostrar como fiz para configurar um blog com comentários usando [Hugo](https://gohugo.io/) e [Comentario](https://comentario.app/en/).

- **Hugo** é um framework open source para construção de websites estáticos, extremamente rápido e flexível.  
- **Comentario** é uma engine open source de comentários, fácil de integrar e auto-hospedável.

## 1. Utilizando o Hugo
### Instalando o Hugo
Se sua distribuição Linux for baseada em Debian, rode o comando:

```bash
sudo apt install hugo
```

Caso contrário, você pode verificar a instalação na documentação oficial.

Agora que ele já está instalado, basta rodar:
```bash
hugo new site {nome-do-seu-blog}
```
Isso criará uma pasta com tudo o que é necessário.

### Instalando um tema
Para instalar um tema, veja os temas disponíveis pela comunidade no [link](https://themes.gohugo.io/).  
No meu caso, atualmente estou usando o [Hugo - Classic](https://themes.gohugo.io/themes/hugo-classic/).

Depois de achar um tema que gostou, faça:
```bash
cd {nome-do-seu-blog}/themes
git init
git submodule add link-do-github
```

Abra o arquivo `hugo.toml` e edite a variável `theme` para o nome da pasta criada dentro de `themes`.

### Criando um post
Para criar um post é muito simples também, basta rodar:
```bash
hugo new content content/post/nome-do-post.md
```
Agora é só escrever seu post em Markdown.  
Acesse [aqui](https://www.markdownguide.org/cheat-sheet/) para mais informações sobre Markdown.

### Buildando
Para finalizar, rode:
```bash
hugo
```
Ele vai atualizar tudo o que for necessário e publicar seu post.

---

## 2. Configurando o Comentario
Existem diversas formas de instalar o Comentario, porém eu fiz isso utilizando Docker.  
Para isso, certifique-se de que você tenha o Docker instalado:
```bash
docker version
```

Crie um arquivo chamado `docker-compose.yml`:
```docker
services:
  app:
    image: registry.gitlab.com/comentario/comentario:latest-ubuntu
    environment:
      BASE_URL: https://sua-url # mude aqui para sua URL
      SECRETS_FILE: "/secrets.yaml"
    ports:
      - "6969:80" # mude para a porta que você quiser
    volumes:
      - ./secrets.yaml:/secrets.yaml:ro
    restart: always
```

Essa é apenas uma configuração possível — você pode editar o arquivo da maneira que preferir.

Note que estou utilizando o **SQLite3** como banco de dados (pois usa menos memória).  
Caso você queira usar **PostgreSQL** ou hospedar o banco de dados em outro servidor, edite esse arquivo conforme necessário.

Na mesma pasta, crie um arquivo chamado `secrets.yaml`:
```
sqlite3:
  file: ./comentario.db
```
Essa é a configuração mínima para utilizar o SQLite3.

Agora rode no terminal:
```bash
docker compose up -d
```

Para finalizar, basta adicionar no arquivo `./themes/hugo-classic/layouts/_default/single.html`:
```html
<script defer src="https://sua-url/comentario.js"></script>
<comentario-comments></comentario-comments>
```

Agora é só acessar a URL que você configurou e adicionar o seu servidor.  
Como é bem intuitivo, não vou detalhar essa parte aqui.

---

## 3. Configurando o NGINX
Caso você utilize o **NGINX** como servidor web, basta configurar a página principal assim:
```bash
server {
	root /var/www/azuminha.com/public;

	index index.html index.htm index.nginx-debian.html;

	server_name azuminha.com www.azuminha.com; # mude aqui para sua URL

	charset UTF-8;

	location / {
		try_files $uri $uri/ =404;
	}
}
```

Você também deve configurar um **proxy reverso** para a porta em que o serviço do Comentario está rodando:
```bash
server {
	server_name comments.azuminha.com; # sua URL utilizada para configurar o Comentario

	location / {
		proxy_pass http://0.0.0.0:6969/; # mude para a porta que você utilizou
		proxy_set_header Host 127.0.0.1;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header X-Forwarded-Proto $scheme;
	}
}
```

Pronto! Agora você tem seu próprio blog hospedado por você mesmo, sem dependências externas. 😄