diff options
Diffstat (limited to 'public/post/2025/09/30')
| -rw-r--r-- | public/post/2025/09/30/host-a-blog-with-hugo/index.html | 206 |
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&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> + |