Como criar um blog grátis com Jekyll e GitHub Pages em 10 minutos

em jekyll and GitHub

Para hospedar esse site usei o GitHub Pages e para gerar a estrutura em forma de blog usei o Jekyll, um gerador de sites estáticos, com as mesmas funcionalidades de um CMS.

O que é o Jekyll?

Jekyll é uma ferramenta simples que transforma páginas escritas em HTML, Textile ou Markdown em um blog estruturado sem a necessidade de um banco de dados ou código dinâmico no backend.

O que é o GitHub Pages?

GitHub Pages é uma hospedagem de sites estáticos disponibilizada gratuitamente pelo GitHub.

##O que é preciso?

##1. Crie um repositório no GitHub

  • entre em sua conta do GitHub
  • crie um novo repositório exatamente com o nome username.github.io, no qual username é o seu nome de usuário (não funciona se você não colocar exatamente seu nome de usuário).
  • abra o terminal ctrl + alt + t e clone o repositório
1
$ git clone https://github.com/username/username.github.io

##2. Escolha um tema para seu website [opcional]

  • entre no respositório de temas do Jekyll e escolha o seu favorito. Recomendo o tema Kasper, que é o que eu uso nesse site.
  • clone o tema
  • coloque o tema em seu repositório (não se esqueça que username é o seu nome de usuário no GitHub).
1
2
3
$ git clone https://github.com/rosario/kasper #baixa o tema kasper
$ mv kasper/* username.github.io #coloca o tema no seu repositório
$ cd username.github.io

##3. Suba os arquivos para seu respositório no GitHub ele vai pedir seu nome de usuário e sua senha

1
2
3
$ git add --all
$ git commit -m "novo post: Hello World!"
$ git push origin master

##4. Acesse seu novo site A URL é exatamente o nome do repositório que você criou. Então, acesse: username.github.io. Caso ainda não esteja disponível, aguarde alguns minutos.

##5. E o Jekyll? Agora que você tem um site funcionando, é preciso aprender a criar novos posts. É aí que entra o Jekyll.

Para criar um novo post é necessário criar um arquivo dentro da pasta _posts com nome obedecendo o seguinte formato: YYYY-MM-DD-titulo-do-post.html, por exemplo, 2015-01-14-hello-world.html. Se não for obedecido, o Jekyll não saberá como organizar seus posts.

###Mãos à obra:

  • instale o Jekyll
1
$ gem install jekyll
  • crie um arquivo chamado 2015-01-14-hello-world.html
1
$ touch \_posts\2015-01-14-hello-world.html
  • adicione as seguintes linhas no arquivo criado:
1
2
3
4
5
6
7
---
layout: post
title:  Hello World!
date:   2015-01-14 15:00:00
---
<h2>Jekyllti</h2>
<p>Y Love You World s3</p>
  • para visualizar como sua página ficará online, inicie um servidor Jekyll
1
$ jekyll serve

##6. Conquiste o mundo! repita o passo #3 e veja seu novo post online. Caso queira aprender mais sobre o Jekyll, acesse a sua documentação oficial. Ela é bem completa e fácil de compreender. Vale a pena dar uma olhada.

Comente abaixo sua experiência com o Jekyll e com o tutorial.