Como configurei esse blog e hospedo ele gratuitamente!
Introdução
Neste post, explicarei como configurei meu blog usando Hugo (um gerador de sites estáticos) e como hospedei tudo gratuitamente usando GitHub e Netlify. Se você está procurando uma maneira fácil e sem custos para começar seu próprio blog!
O que você vai precisar:
- Hugo instalado no seu computador.
- Uma conta no GitHub.
- Uma conta no Netlify.
- Terminal (ou prompt de comando) para rodar alguns comandos.
Passo 1: Instalando o Hugo
Primeiramente, vamos instalar o Hugo, que é o gerador de sites estáticos que usei para construir este blog. O Hugo é fácil de administrar, pois não possui um painel ADM, você faz tudo do seu computador, faz um commit na sua branch e pronto, a mágica acontece.
Fiz toda instalação no Windows:
-
Baixe o Hugo no site oficial: Hugo Releases ou usando o Chocolatey com o seguinte comando:
choco install hugo -
Extraia o conteúdo do arquivo zip para uma pasta.
-
Adicione o Hugo à variável PATH para poder usá-lo via terminal.
Passo 2: Criando o projeto Hugo
Agora que o Hugo está instalado, precisamos acessar a pasta onde irá ficar o Hugo e vamos abrir um novo Terminal/CMD e executar o seguinte comando:
hugo new site meublog
Pronto, seu site foi criado!
Calma, ainda tem mais alguns passos.
Passo 3: Escolhendo um tema
A comunidade do Hugo é enorme, o que não falta é tema e sugestões para deixar ele bem bonito, ou minimalista assim como é o meu, em fim, tem uma infinidade de temas nesse link: Hugo Themes
No meu caso, utilizei o Hugo vitae como tema. Para adicionar esse tema ou qualquer outro tema, basta usar esse comando na pasta do projeto:
git init
git submodule add https://github.com/dataCobra/hugo-vitae.git themes/hugo-vitae
Onde, na primeira linha, nos inicializamos o git (isto irá servir mais tarde para subirmos o projeto para o github também) e uso o submodule add para baixar o tema a partir da URL do tema e apontando para a pasta themes/hugo-vitae.
Obs.: Não fazia ideia de que esse comando do git existia 🙃.
Agora precisamos apontar o arquivo “config.toml” para ativar o tema, no arquivo edite a seguinte linha para ativar o tema:
theme = "hugo-vitae"
Passo 4: Criando seu primeiro post
Estamos quase no fim! Agora que o tema está configurado, é só começar a criar as suas postagens de milhões, assim como essa que é a primeira que posto aqui, para isso, execute o comando:
hugo new post/01_meu_primeiro_post.md
Esse comando basicamente irá criar um arquivo Markdown com o cabeçalho do post, onde encontramos os dados básicos dele: data, um boolean para ver se é um rascunho ou não, e o título.
Para ter o post publicado devidamente, o “draft” deverá ser false.
Por uma questão organizacional, preferi colocar um número sequencial na frente de cada post, isso me ajuda a me orientar nas pastas para saber se um post é mais antigo ou não sem ter que acessar ele.
Passo 5: Repositorio no GitHub
Aqui basicamente você precisa criar um repositório, seja ele público ou privado, preferi manter ele privado, pois quero agendar posts.
Tendo o seu repositório criado, basta fazer os seguintes comandos:
git remote add origin https://github.com/seu-usuario/meublog.git
git branch -M main
git push -u origin main
Passo 6: Publicando site usando Netlify (último passo)
Agora que o seu blog já está no GitHub precisamos apenas publicar ele!
- Abra o netlify e clique em “new site from Git”
- Conecte sua conta do GitHub e selecione o repositório do seu blog.
- Nas configurações de deploy, o Netlify já detectará que você está usando Hugo. Basta definir o seguinte: Build command: Hugo Publish directory: public/ Também é necessario informar ao netlify a versão que está sendo usada do Hugo através da variável de ambiente HUGO_VERSION Para ver a versão do seu Hugo basta fazer o seguinte comando:
hugo version
Clique em Deploy site e deixe a magia acontecer!
Obs.: O Netlify gera uma URL para você, mas se preferir, assim como eu, você pode configurar um apontamento de domínio para acessar seu site através de uma URL própria!
É isso, terminamos!
Obrigado por ler até o final!