PARTE II: COMO CRIAR UM BLOG.

No post anterior, falamos sobre a importância de criar um blog para registrar os seus aprendizados. Agora, vamos à parte prática!

Pré-requisitos:

Para criar um blog, você precisará de:

• Uma máquina com alguma distribuição GNU/Linux instalada (Ubuntu, Mint, etc); Abrir o terminal para rodar os comandos do tutorial.
• Para usuários Windows, basta instalar a ferramenta WSL (Windows Subsystem for Linux) também com alguma distribuição Ubuntu / Mint, e rodar os comandos do tutorial.

Passo 1: Instalar o Hugo

No Linux / Windows (WSL)

1 - Atualizar o Sistema:

sudo apt update
sudo apt upgrade -y

2 - Instalar o Hugo e o Git:

sudo apt install hugo -y
sudo apt install git -y

Passo 2: Criar um novo site

No Linux / Windows (WSL)

1 - Criar um novo diretório para o seu blog:

hugo new site meu-blog

(substituir “meu-blog” pelo nome à sua escolha)

2 - Navegar para o diretório do blog:

cd meu-blog

Passo 3: Adicionar um tema

1 - Clonar um tema (exemplo com o tema Ananke):

É possível ter acesso a diversos temas Hugo a partir do link: https://themes.gohugo.io/ Neste caso, usaremos o tema “Ananke”:

git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

2 - Configurar o tema no arquivo hugo.toml (ou config.toml): Adicione a seguinte linha ao arquivo hugo.toml (ou config.toml):

Para configurar o arquivo hugo.toml, utilize um editor de textos como o vi:

vi hugo.toml

O arquivo hugo.toml tem a seguinte estrutura básica:

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

Observação: Como estamos utilizando o editor de textos Vi, basta pressionar a tecla “I” para inserção de novos caracteres, pressionar ENTER para uma nova linha, e inserir o seguinte:

theme = "ananke"

Agora, basta salvar a postagem: Pressione a tecla ESC, em seguida digite :wq! e pressione ENTER. Este comando salvará o conteúdo e encerrará o editor de texto Vi.

Passo 4: Criar uma nova postagem

1 - Rodar o seguinte comando:

hugo new posts/minha-primeira-postagem.md

2 - Editar a postagem:

cd meu-blog/content/posts/
vi minha-primeira-postagem.md

Estrutura do Arquivo da Postagem

Quando você abrir o arquivo, verá a seguinte estrutura:

---
title: "Minha Primeira Postagem"
date: 2024-09-24T10:00:00-03:00
draft: true
---

# Meu Primeiro Post

Este é o conteúdo da minha primeira postagem. Aqui você pode adicionar texto, imagens, links, etc.

Explicação dos Campos:

• title: O título da sua postagem. É o que aparecerá no cabeçalho do seu blog.
• date: A data e hora em que a postagem foi criada. Você pode alterar isso se quiser que a postagem apareça em uma data diferente.
• draft: Um campo que indica se a postagem está em rascunho ou não.
  • true: A postagem está em rascunho e não será exibida no blog.
  • false: A postagem está publicada e será exibida no blog.

O que Fazer com o Campo “draft”

Se você está pronto para publicar a postagem: Altere draft: true para draft: false. Isso fará com que a postagem apareça no seu blog quando você rodar o servidor local.

Se você ainda está escrevendo e não quer que a postagem apareça: Mantenha draft: true. Isso permite que você trabalhe na postagem sem que ela seja visível para o público.

Editando o Conteúdo

Depois de definir o título e o status do rascunho, você pode começar a adicionar o conteúdo da sua postagem. Utilize a sintaxe Markdown para formatar o texto.

Aqui está um exemplo de como o arquivo pode ficar após as edições:

---
title: "Minha Primeira Postagem"
date: 2024-09-24T10:00:00-03:00
draft: false
---

# Meu Primeiro Post

Bem-vindo ao meu blog! Neste post, vou compartilhar algumas informações sobre mim e o que espero alcançar aqui.

## O que você pode esperar

- **Dicas de programação**
- **Tutoriais sobre desenvolvimento web**
- **Reflexões pessoais**

Espero que você goste da leitura!

Novamente, utilize “:wq!” no editor de textos Vi para salvar o arquivo e fechar o editor.

Passo 5: Iniciando o servidor Hugo localmente

Agora, para iniciar o seu servidor Hugo, basta rodar o seguinte comando:

hugo server -D

Em seguida, abra o seu navegador e acesse: “localhost:1313”. Pronto! Agora você pode visualizar como ficará seu blog. Mas, para torna-lo público na internet para que outras pessoas o acessem, devemos seguir mais alguns passos, disponíveis na Parte 3 desta série, que será publicada em breve.

Detalhes importantes:

O que fizemos até agora, foi somente criar um blog através de um template já disponibilizado para uso geral.

Para entender melhor sobre a estrutura de arquivos e diretórios de sites criados a partir do Hugo, você pode acessar a documentação em: https://gohugo.io/documentation/

A partir da leitura da documentação, você pode partir para a criação de templates próprios!

Um outro ponto importante: é utilizada a linguagem Markdown para customizar suas postagens, indexes, etc. Portanto, você pode começar pela sintaxe básica a partir deste site: https://www.markdownguide.org/basic-syntax/

Além disso, lembre-se sempre que você pode aproveitar o site de exemplo contido na pasta “themes/exampleSite” para entender melhor como configurar o seu blog!

Postado por: bl4nk_