1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
|
<!DOCTYPE html>
<html lang="en-us">
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
<link rel="manifest" href="/images/site.webmanifest">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Tutorial de como criar um blog com Hugo e integrar comentários usando Comentario.">
<title>Host a Blog With Hugo | azuminha</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/fonts.css" />
<link rel="stylesheet" href="http://localhost:1313/css/theme-override.css">
</head>
<body>
<header>
<nav>
<ul>
<li class="pull-left ">
<a href="http://localhost:1313/">~/azuminha</a>
</li>
<li class="pull-left ">
<a href="/categories/">~/categories</a>
</li>
<li class="pull-left ">
<a href="https://git.azuminha.com/">~/git</a>
</li>
<li class="pull-left ">
<a href="/tags/">~/tags</a>
</li>
<li class="pull-right">
<a href="/index.xml">~/subscribe</a>
</li>
</ul>
</nav>
</header>
<div class="article-meta">
<h1><span class="title">Host a Blog With Hugo</span></h1>
<h2 class="date">2025/09/30</h2>
<p class="terms">
Categories: <a href="/categories/web">web</a> <a href="/categories/self-hosted">self-hosted</a>
Tags: <a href="/tags/blog">blog</a> <a href="/tags/hugo">hugo</a> <a href="/tags/server">server</a>
</p>
</div>
<div class="content-wrapper">
<main>
<p>Hoje vou mostar como fiz para setar um blog com comentários usando <a href="https://gohugo.io/">Hugo</a> e <a href="https://comentario.app/en/">Comentario</a>.</p>
<ul>
<li><strong>Hugo</strong> é um framework open source para construção de websites estáticos, extremamente rápido e flexível.</li>
<li><strong>Comentario</strong> é uma engine open source de comentários, fácil de integrar e auto-hospedável.</li>
</ul>
<h2 id="1-utilizando-o-hugo">1. Utilizando o Hugo</h2>
<h3 id="instalando-o-hugo">Instalando o hugo</h3>
<p>Se sua distribuição linux for baseado em Debian rode o comando</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>$ sudo apt install hugo
</span></span></code></pre></div><p>caso contrario você pode verificar na documentação.</p>
<p>Agora que você já tem ele instalado basta dar</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new site <span style="color:#f92672">{</span>nome-do-seu-blog<span style="color:#f92672">}</span>
</span></span></code></pre></div><p>que ele criara uma pasta com tudo que eh necessario.</p>
<h3 id="instalando-um-tema">Instalando um tema</h3>
<p>Para instalar um tema veja os temas disponiveis pela comunidade no <a href="https://themes.gohugo.io/">link</a>, no meu caso atualmente estou usando o <a href="https://themes.gohugo.io/themes/hugo-classic/">Hugo - Classic</a>.
Depois de achar um que gostou faca:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>cd <span style="color:#f92672">{</span>nome-do-seu-blog<span style="color:#f92672">}</span>/themes
</span></span><span style="display:flex;"><span>git init
</span></span><span style="display:flex;"><span>git submodule add link-do-github
</span></span></code></pre></div><p>Abra o arquivo hugo.toml e edite a variavel theme para a pasta criada dentro da pasta do hugo.</p>
<h3 id="criando-um-post">Criando um post</h3>
<p>Para criar um post eh muito simples tambem, basta rodar</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new content content/post/nome-do-post.md
</span></span></code></pre></div><p>Agora basta escrever o seu post em com markdown. Acesse <a href="https://www.markdownguide.org/cheat-sheet/">aqui</a> para mais informacoes sobre markdown.</p>
<h3 id="buildando">Buildando</h3>
<p>Para finalizar rode</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo
</span></span></code></pre></div><p>que ele vai atualizar tudo que eh necessario e publicar seu post</p>
<hr>
<h2 id="2-setando-o-comentario">2. Setando o comentario</h2>
<p>Existem diversas formas de voce instalar o comentario, porem eu fiz isso utilizando docker. Para isso certifique que você tenha o docker instalado</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>docker version
</span></span></code></pre></div><p>e crie um arquivo chamado docker-compose.yml</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-docker" data-lang="docker"><span style="display:flex;"><span>services:<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> app:<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> image: registry.gitlab.com/comentario/comentario:latest-ubuntu<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> environment:<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> BASE_URL: https://sua-url <span style="color:#75715e"># mude aqui para sua url</span><span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> SECRETS_FILE: <span style="color:#e6db74">"/secrets.yaml"</span><span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> ports:<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> - <span style="color:#e6db74">"6969:80"</span> <span style="color:#75715e"># mude para a porta que você quiser</span><span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> volumes:<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> - ./secrets.yaml:/secrets.yaml:ro<span style="color:#960050;background-color:#1e0010">
</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> restart: always<span style="color:#960050;background-color:#1e0010">
</span></span></span></code></pre></div><p>essa eh so uma possivel forma, você pode editar o arquivo da maneira que preferir.</p>
<p>Note que vou utilizar o sqlite3 como banco de dados, caso você queria usar postgress, ou usar um servidor diferente para o banco de dados você deve editar esse arquivo.</p>
<p>Na mesma pasta crie um arquivo chamado secrets.yaml</p>
<pre tabindex="0"><code>sqlite3:
file: ./comentario.db
</code></pre><p>Essa eh a configuracao minima que você deve fazer caso queria utilizar o sqlite3.</p>
<p>agora rode no terminal</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>docker compose up -d
</span></span></code></pre></div><p>Para finalizar basta adicionar no arquivo ./themes/hugo-classic/layouts/_default/single.html</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://sua-url/comentario.js"</span>></<span style="color:#f92672">script</span>>
</span></span><span style="display:flex;"><span><<span style="color:#f92672">comentario-comments</span>></<span style="color:#f92672">comentario-comments</span>>
</span></span></code></pre></div><p>Agora eh so acessar a url que voce colocou e setar adicionar o seu servidor, como eh bem intuitivo nao vou colocar aqui</p>
<hr>
<h2 id="3-setando-o-nginx">3. Setando o NGINX</h2>
<p>Caso você utilize o nginx como servidor web basta configurar a pagina principal como</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>server <span style="color:#f92672">{</span>
</span></span><span style="display:flex;"><span> root /var/www/azuminha.com/public;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> index index.html index.htm index.nginx-debian.html;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> server_name azuminha.com www.azuminha.com; <span style="color:#75715e"># mude aqui para sua url</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> charset UTF-8;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> location / <span style="color:#f92672">{</span>
</span></span><span style="display:flex;"><span> try_files $uri $uri/ <span style="color:#f92672">=</span>404;
</span></span><span style="display:flex;"><span> <span style="color:#f92672">}</span>
</span></span><span style="display:flex;"><span><span style="color:#f92672">}</span>
</span></span></code></pre></div><p>Você tambem deve arrumar um proxy reverso para a porta que o servico do comentario esta rodando.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>server <span style="color:#f92672">{</span>
</span></span><span style="display:flex;"><span> server_name comments.azuminha.com; <span style="color:#75715e"># sua url que utilizou para configurar o comentario</span>
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> location / <span style="color:#f92672">{</span>
</span></span><span style="display:flex;"><span> proxy_pass http://0.0.0.0:6969/; <span style="color:#75715e"># mude para a porta que vc utilizou</span>
</span></span><span style="display:flex;"><span> proxy_set_header Host 127.0.0.1;
</span></span><span style="display:flex;"><span> proxy_set_header X-Real-IP $remote_addr;
</span></span><span style="display:flex;"><span> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
</span></span><span style="display:flex;"><span> proxy_set_header X-Forwarded-Proto $scheme;
</span></span><span style="display:flex;"><span> <span style="color:#f92672">}</span>
</span></span></code></pre></div><p>Pronto agora você tem seu proprio blog hospedado pro você mesmo, sem dependencias externas. 😄</p>
<a href="/"> >> Home</a>
</main>
</div>
<script defer src="https://comments.azuminha.com/comentario.js"></script>
<comentario-comments></comentario-comments>
<footer>
<script>
(function() {
function center_el(tagName) {
var tags = document.getElementsByTagName(tagName), i, tag;
for (i = 0; i < tags.length; i++) {
tag = tags[i];
var parent = tag.parentElement;
if (parent.childNodes.length === 1) {
if (parent.nodeName === 'A') {
parent = parent.parentElement;
if (parent.childNodes.length != 1) continue;
}
if (parent.nodeName === 'P') parent.style.textAlign = 'center';
}
}
}
var tagNames = ['img', 'embed', 'object'];
for (var i = 0; i < tagNames.length; i++) {
center_el(tagNames[i]);
}
})();
</script>
<hr/>
<a href="https://git.azuminha.com">Git</a>
</footer>
</body>
</html>
|
