Como criar um blog com Jekyll no GitHub Pages?
Tags: jekyll, githubpages, blogging, webdev
Published: 2023-03-05 20:39:34

Criar um blog pode ser uma excelente maneira de compartilhar suas ideias e opiniões com o mundo. Além disso, ter um blog pode ajudá-lo a construir sua marca pessoal ou profissional e a se conectar com outras pessoas interessadas nos mesmos tópicos que você. Se você está procurando uma plataforma para criar seu blog, o Jekyll no GitHub Pages é uma ótima opção.

O Jekyll é um gerador de sites estáticos que permite criar sites elegantes e fáceis de navegar, sem a necessidade de conhecimentos avançados de programação. O GitHub Pages é um serviço de hospedagem de sites gratuito oferecido pelo GitHub, que permite hospedar sites estáticos diretamente de um repositório no GitHub.

Neste tutorial, você aprenderá como criar um blog com Jekyll no GitHub Pages.

**Requisitos:**

- Uma conta do GitHub
- Conhecimentos básicos de Git
- Conhecimentos básicos de HTML e CSS (opcional)

## Passo 1: Instale o Jekyll
Antes de começar, é necessário instalar o Jekyll em sua máquina. Para isso, você precisa ter o Ruby instalado. Se você não tiver o Ruby instalado, siga as instruções de instalação no site oficial do Ruby (https://www.ruby-lang.org/).

Depois de instalar o Ruby, abra o terminal e execute o seguinte comando para instalar o Jekyll:

```bash
gem install jekyll bundler
```

## Passo 2: Crie um novo repositório no GitHub
Acesse sua conta do GitHub e crie um novo repositório com o nome do seu blog. Marque a opção "Initialize this repository with a README".

## Passo 3: Clone o repositório
Abra o terminal e execute o seguinte comando para clonar o repositório recém-criado:

```bash
git clone https://github.com/seu-usuario/seu-repositorio.git
```

Substitua `seu-usuario` pelo seu nome de usuário no GitHub e `seu-repositorio` pelo nome do repositório que você criou.

## Passo 4: Adicione o tema do Jekyll
O Jekyll tem vários temas prontos para usar. Você pode escolher um dos temas disponíveis no diretório oficial de temas do Jekyll ou pode criar seu próprio tema. Neste tutorial, vamos usar o tema "minima", que é um tema padrão do Jekyll.

Execute o seguinte comando no terminal para adicionar o tema "minima" ao seu blog:

```bash
bundle exec jekyll new . --force --minima
```

## Passo 5: Personalize o tema
O tema "minima" vem com alguns arquivos padrão que você pode personalizar para personalizar o seu blog. Abra o arquivo `_config.yml` na raiz do seu projeto e altere as configurações como o título do seu blog, a descrição e outras configurações.

## Passo 6: Crie seu primeiro post
Crie uma nova pasta chamada `_posts` na raiz do seu projeto e crie um novo arquivo com o seguinte nome: `yyyy-mm-dd-nome-do-post.md`. Substitua `yyyy-mm-dd` pela data do post e `nome-do-post` pelo nome que você deseja dar ao post.

Abra o arquivo e adicione o conteúdo do seu post usando a sintaxe do Markdown. Aqui está um exemplo de como criar um post simples:

```yaml
---
layout: post
title: "Meu primeiro post"
---

# Bem-vindo ao meu blog

Este é o meu primeiro post no blog criado com Jekyll e hospedado no GitHub Pages. Estou muito animado para começar a compartilhar minhas ideias e opiniões com vocês.

Espero que vocês gostem e fiquem atentos para mais atualizações em breve!
```

Neste exemplo, o cabeçalho com o layout e o título do post é definido usando a sintaxe YAML. Em seguida, o conteúdo do post é adicionado usando a sintaxe do Markdown.

Depois de criar o post, adicione-o à página inicial do seu blog editando o arquivo `index.html` na pasta `_layouts`. Adicione um link para o post na lista de posts recentes ou destaque o post como o mais recente.

Com isso, você criou seu primeiro post e adicionou-o à página inicial do seu blog. Repita esses passos para adicionar mais posts ao seu blog.

## Passo 7: Adicione suas páginas estáticas
Se você deseja adicionar outras páginas estáticas ao seu blog, como uma página "Sobre" ou uma página de contato, crie uma nova pasta na raiz do seu projeto chamada `pages`. Em seguida, crie um novo arquivo HTML dentro dessa pasta com o conteúdo da página.

Depois de criar a página, adicione um link para ela no arquivo `nav.html`, que está localizado na pasta `_includes`. Isso adicionará o link da página ao menu de navegação do seu blog.

## Passo 8: Teste seu blog localmente
Antes de publicar seu blog no GitHub Pages, é uma boa ideia testá-lo localmente para garantir que tudo esteja funcionando corretamente. Para fazer isso, abra o terminal e navegue até a pasta do seu projeto. Em seguida, execute o seguinte comando:

```bash
bundle exec jekyll serve
```

Este comando iniciará um servidor local em seu computador que pode ser acessado em seu navegador em `http://localhost:4000`. Verifique se seu blog está aparecendo corretamente no navegador.

## Passo 9: Publique seu blog no GitHub Pages
Agora que seu blog está funcionando corretamente localmente, é hora de publicá-lo no GitHub Pages. Para fazer isso, faça o push de todas as suas alterações para o repositório do GitHub usando o Git. Certifique-se de incluir todos os arquivos gerados pelo Jekyll, como o `_site` e o `Gemfile.lock`.

Depois de fazer o push das alterações, vá para as configurações do seu repositório no GitHub e role para baixo até a seção "GitHub Pages". Escolha o branch que contém seu site (normalmente é o branch `main`) e clique em "Salvar".

Depois que as configurações forem salvas, você poderá acessar seu blog em `http://seu-usuario.github.io/seu-repositorio`. Verifique se seu blog está aparecendo corretamente no navegador, lembrando que pode demorar um pouco para isso acontecer.

_Agora é hora de começar a escrever!_