DEV Community

Cover image for Como criar um blog com Jekyll no GitHub Pages?
Ronis
Ronis

Posted on • Edited on

Como criar um blog com Jekyll no GitHub Pages?

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:

gem install jekyll bundler
Enter fullscreen mode Exit fullscreen mode

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:

git clone https://github.com/seu-usuario/seu-repositorio.git
Enter fullscreen mode Exit fullscreen mode

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:

bundle exec jekyll new . --force --minima
Enter fullscreen mode Exit fullscreen mode

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:

---
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!
Enter fullscreen mode Exit fullscreen mode

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:

bundle exec jekyll serve
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)