Como fiz meu blog em 2 dias - Parte 1: Jekyll e GitHub Pages
Olá, se você chegou até aqui, você está louco com sorte. Este é um post que explica por alto como fiz este blog. é um “clássico” começar assim né?
Mas por que 2 dias? Porque no processo descobri e utilizei algumas tecnologias que me ajudaram muito no processo, e que podem ser muito úteis para você, mesmo que não pretenda fazer um blog.
Primeiro de tudo, estas são algumas das tecnologias usadas:
fique tranquilo caso não conheça alguma, com certeza farei um post explicando cada uma.
Desculpem pela imagem clichê utilizada, mas ela me lembra o quanto Jekyll me ajudou e facilitou para a modularização do código do blog, algo essencial para se acelerar o desenvolvimento.
Só para se ter uma ideia, vejam um exemplo do template default do meu blog:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<main>
{{ content }}
</main>
{% include footer.html %}
</body>
</html>Para quem já é familiarizado com desenvolvimento web, sabe que em páginas html não é simples nem comum essa separação de elementos de forma que se possa incluí-los depois. Geralmente, o código de uma página fica em um único arquivo, ou modularizado mas ficando a cargo do browser de juntar as partes como acontece com o Angular.js por exemplo, o que atrasa um pouco o carregamento da página.
Com Jekyll, ele próprio se responsabiliza por compilar tudo em uma única página estática. Facilita o desenvolvimento e de forma transparente para o leitor.
Quem também facilita o desenvolvimento com o Jekyll é o GitHub Pages. Para quem não conhece, GitHub é uma ferramenta de revisão e gerenciamento de código open source e projetos privados.
O GitHub Pages permite hospedar páginas estáticas e de graça de repositórios no GitHub. Para quem quer colocar no ar um site que não depende de servidor ou banco de dados, é ideal, pois é simples e de graça.
Inclusive o meu site pessoal está hospedado no GitHub, mas o que nunca imaginei até começar esse blog, é que o GitHub sempre disponibiliza as páginas rodando um build do Jekyll.
O que isso significa? Em outras palavras: Lembra que eu disse que com Jekyll é possível separar uma página html em diferentes arquivos e ele se encarrega de compilar e gerar a página completa? Ao invés de se hospedar a página gerada, podemos hospedar nosso código em Jekyll que o GitHub se responsabiliza de compilar e disponibilizar o compilado.
Isso acelera e facilita o desenvolvimento por exemplo, ao permitir que você escreva um post do celular, e o envie diretamente para o repositório.
O Pages também permite a utilização de URLs customizadas ao invés da padrão, caso contrário, você só conseguiria accessar esse blog através de daymannovaes.github.io/blog e, caso tenha acessado esse link, percebeu que foi direcionado para me.dayman.io/blog.
Se você tem ou já teve um domínio pessoal, já é familiarizado com os DNS Records, para fazer essa ~mágica, precisei criar um record to tipo CNAME no repositório do blog no GitHub com o texto:
blog.dayman.ioSim, apenas uma linha. E você pode notar que é um link diferente do usado nesse blog, e que se acessá-lo, será redirecionado para cá. Eu não coloquei me.dayman.io/blog no CNAME simplesmente porque não posso, ele não permite caminhos após o link.
Então porque simplesmente não deixei blog.dayman.io? Na verdade eu não lembro, mas a resposta que posso te dar agora é porque não quero. Então configurei outro record para redirecionar blog. para me..
A ~mágica termina configurando um último record no seu gerenciador de DNS que no meu caso é o AWS a Amazon, também do tipo CNAME, e que aponta a sua URL customizada para a URL padrão do github, que no meu caso ficou como
| name | type | value |
|---|---|---|
| me.dayman.io. | CNAME | daymannovaes.github.io |
A explicação das tecnologias ficou um pouco superficial, mas a ideia é depois fazer um post exclusivo sobre cada um, com mais exemplos e tudo mais. A continuação da série, na qual explico sobre Sass e Bootstrap está aqui.
Qualquer dúvida, sugestão e crítica, sintam-se à vontade.
Comentários