;

author: leo <azuminha1@gmail.co> 2025-10-16 20:20:15 -0300
committer: leo <azuminha1@gmail.co> 2025-10-16 20:20:15 -0300
commit: 0e191433328094673dacc22b16cc5d3bac02c4dc (patch)
tree: 6d0ce9d11b1b6039a392c4a36b25263ae2ec417c /public/post/2025/09/30/host-a-blog-with-hugo/index.html
parent: 8e7996214af853803c4dd04534b1f5646b0ac1c5 (diff)
1 files changed, 206 insertions, 0 deletions
diff --git a/public/post/2025/09/30/host-a-blog-with-hugo/index.html b/public/post/2025/09/30/host-a-blog-with-hugo/index.html
new file mode 100644
index 0000000..9e7a52a
--- /dev/null
+++ b/public/post/2025/09/30/host-a-blog-with-hugo/index.html
@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en-us">
+  <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;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">&#34;/secrets.yaml&#34;</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">&#34;6969:80&#34;</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>&lt;<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">&#34;https://sua-url/comentario.js&#34;</span>&gt;&lt;/<span style="color:#f92672">script</span>&gt;
+</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">comentario-comments</span>&gt;&lt;/<span style="color:#f92672">comentario-comments</span>&gt;
+</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. &#x1f604;</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>
+
author	leo <azuminha1@gmail.co>	2025-10-16 20:20:15 -0300
committer	leo <azuminha1@gmail.co>	2025-10-16 20:20:15 -0300
commit	0e191433328094673dacc22b16cc5d3bac02c4dc (patch)
tree	6d0ce9d11b1b6039a392c4a36b25263ae2ec417c /public/post/2025/09/30/host-a-blog-with-hugo/index.html
parent	8e7996214af853803c4dd04534b1f5646b0ac1c5 (diff)