Criando um blog com Jekyll - Parte Final

| #frontend #jekyll

Introdução

Fala galera, chegamos à última parte desse tutorial de Jekyll, hoje irei ensinar como escrever posts, adicionar páginas e também subiremos ele para o GitHub. Vamos lá!

Como escrever posts

Escrever posts no Jekyll é fácil, eles ficam na pasta _posts e são escritos em Markdown. O nome do arquivo deve ser escrito da seguinte forma: YYYY-MM-DD-nome-do-post.markdown.

Cada arquivo no ínicio deve ter o Front-Matter. As informações devem ficar entre o par de três traços ---. A sintaxe dele é a seguinte:

---
layout: post
title: Meu primeiro post com Jekyll
date: 2016-01-24 17:22:00 -0300
author: Mateus Medeiros
description: Meu primeiro post com Jekyll.
tags: 
- jekyll
categories:
- Jekyll
permalink: /meu-primeiro-post-com-jekyll/
---

Agora vamos escrever o primeiro post do nosso blog.

Escrevendo nosso primeiro post

Na pasta _posts, crie o arquivo 2016-01-24-meu-primeiro-post-com-jekyll.markdown. No ínicio do arquivo adicione o Front-Matter com as informações do post:

---
layout: post
title: Meu primeiro post com Jekyll
date: 2016-01-24 17:22:00 -0300
author: Mateus Medeiros
description: Meu primeiro post com Jekyll.
tags: 
- jekyll
categories:
- Jekyll
permalink: /meu-primeiro-post-com-jekyll/
---

Depois só escrever o post que desejar, lembrando que ele é escrito em Markdown.

Como adicionar páginas

Adicionar páginas também é fácil, elas podem ser escritas em Markdown ou em HTML. Elas também devem conter no ínicio o Front-Matter. Agora vamos adicionar algumas ao nosso blog, mas antes vamos editar a nossa página about.md.

Página about.md

Abra o arquivo about.md e abaixo do Front-Matter, adicione uma descrição sobre o assunto tratado no seu blog. O meu ficou assim:

---
layout: page
title: Sobre
permalink: /sobre/
---

Tutorial de como criar um blog com Jekyll, feito por [Mateus Medeiros](http://devmateusmedeiros.com.br){:target="_blank"}. Você pode conferir esse tutorial em meu [blog](http://devmateusmedeiros.com.br){:target="_blank"}.

Repositório no GitHub: [Tutorial-Jekyll](https://github.com/mateussmedeiros/tutorial-jekyll){:target="_blank"}

## Partes do Tutorial:

- [Criando um blog com Jekyll - Parte 1](http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-1/)
- [Criando um blog com Jekyll - Parte 2](http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-2/)
- [Criando um blog com Jekyll - Parte 3](http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-3/)
- [Criando um blog com Jekyll - Parte Final](http://devmateusmedeiros.com.br/criando-um-blog-com-jekyll-parte-final/)

Adicionando novas páginas

Vamos adicionar mais algumas páginas ao nosso blog:

  • tags.html: onde ficará as tags utilizadas no blog.
  • categorias.html: onde ficará as categorias utilizadas no blog.
  • contato.md: será a página de contato do nosso blog.

Agora vamos lá!

tags.html

Iremos criar uma função que irá listar os posts com as tags listadas no blog e criará um menu de acesso rápido, ficando assim:

Tag Tag2

Tag

link-do-post link-do-post

Tag2

link-do-post link-do-post

O arquivo ficou assim:

---
layout: page
title: Tags
description: Procure os assuntos pelas tags usadas no blog
permalink: /tags/
---

<h2> Procure os assuntos pelas tags usadas no blog </h2>

<div class="tags-list">

{% assign tags_list = site.tags %}
  {% if tags_list.first[0] == null %}
    {% for tag in tags_list %}
        <a data-scroll href="#{{ tag }}">{{ tag }}</a>
    {% endfor %}
  {% else %}
    {% for tag in tags_list %}
        <a data-scroll href="#{{ tag[0] }}">{{ tag[0] }}</a>
    {% endfor %}
  {% endif %}
{% assign tags_list = nil %}

</div>

{% for tag in site.tags  %}
    <div class="tag">
        <h2 class="tag-title" id="{{ tag[0] }}">{{ tag[0] }}</h2>
        <ul class="posts">
            {% assign pages_list = tag[1] %}
            {% for post in pages_list reversed %}
                {% if post.title != null %}
                {% if group == null or group == post.group %}
                <li><a href="{{ site.url }}{{ post.url }}">{{ post.title }}<span class="date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%d %b, %Y" }}</time></span></a></li>
                {% endif %}
                {% endif %}
            {% endfor %}
            {% assign pages_list = nil %}
            {% assign group = nil %}
        </ul>
    </div>
{% endfor %}

Essa função peguei do blog do Willian Justen.

categorias.html

Com base na função criada acima, vamos criar a mesma função, mudando apenas a variável.

---
layout: page
title: Categorias
description: Procure os assuntos pelas categorias usadas no blog.
permalink: /categorias/
---
<h2> Procure os assuntos pelas categorias usadas no blog </h2>

<div class="categories-list">

{% assign categories_list = site.categories %}
  {% if categories_list.first[0] == null %}
    {% for category in categories_list %}
        <a data-scroll href="#{{ category }}">{{ category }}</a>
    {% endfor %}
  {% else %}
    {% for category in categories_list %}
        <a data-scroll href="#{{ category[0] }}">{{ category[0] }}</a>
    {% endfor %}
  {% endif %}
{% assign tags_list = nil %}

</div>

{% for category in site.categories  %}
    <div class="category">
        <h2 class="category-title" id="{{ category[0] }}">{{ category[0] }}</h2>
        <ul class="posts">
            {% assign pages_list = category[1] %}
            {% for post in pages_list reversed %}
                {% if post.title != null %}
                {% if group == null or group == post.group %}
                <li><a href="{{ site.url }}{{ post.url }}">{{ post.title }}<span class="date"><time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished">{{ post.date | date: "%d %b, %Y" }}</time></span></a></li>
                {% endif %}
                {% endif %}
            {% endfor %}
            {% assign pages_list = nil %}
            {% assign group = nil %}
        </ul>
    </div>
{% endfor %}

contato.md

Vamos criar agora uma página de contato, ela será escrita em Markdown. A minha ficou assim:

---
layout: page
title: Contato
permalink: /contato/
---

**Quer falar comigo?**

Entre em contato pelo e-mail: [mateus.sousamedeiros@gmail.com](mailto:mateus.sousamedeiros@gmail.com)

Você pode editar do jeito que desejar.

Editando o menu

Criamos nossas páginas, agora vamos adicioná-las ao menu. Para isso, abra o arquivo header.html, e troque os links do menu, ficando assim:

<!-- Menu -->
<nav class="menu">
  <ul>
    <li><a href="/sobre"> Sobre </a></li>
    <li><a href="/categorias"> Categorias </a></li>
    <li><a href="/tags"> Tags </a></li>
    <li><a href="/contato"> Contato </a></li>
  </ul>
</nav>

Subindo para o GitHub

Você pode subir seu blog para o GitHub e hospedá-lo com o GitHub Pages:

  1. Entre em sua conta no GitHub, caso não tenha, crie uma.
  2. Crie um repositório com o seguinte nome: seunomedeusuario.github.io
  3. Suba o seu blog - exceto a pasta _site - para o seu repositório usando o git, dessa forma:
# Iniciar um repositório na pasta do projeto
git init

# Adicionar todos os arquivos
git add .

# Commitar os arquivos
git commit -m "Commit Inicial"

# Adicionar o repositório
git remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git

# Subir o seu blog
git push -u origin master

Pronto, você subiu seu blog para o GitHub Pages, e agora é só esperar entre 20 e 30 minutos, e você poderá acessar seu blog através da url: http://seunomedeusuario.github.io

Conclusão

Chegamos ao fim do nosso tutorial, espero que eu tenha ajudado vocês à criarem um blog com Jekyll. Qualquer dúvida, comente aqui ou me mande um email: mateus.sousamedeiros@gmail.com.

Você pode acessar o repositório ou a demo do tutorial.

Até a próxima!


Mateus Medeiros - Desenvolvedor Front End

Autor

Mateus Medeiros

Desenvolvedor Front End apaixonado por novas tecnologias.

Comentários