<commit_before>---
layout: post
title: "Criando um blog com Jekyll - Parte Final"
date: 2016-01-24 17:06:00 -0300
author: <NAME>
description: Parte final do tutorial de como criar um blog com Jekyll.
tags: 
- frontend
- jekyll
categories:
- Jekyll
permalink: /criando-um-blog-com-jekyll-parte-final/
---

## 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](https://daringfireball.net/projects/markdown/syntax){:target="_blank"}. 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:

{% highlight yaml %}
---
layout: post
title: Meu primeiro post com Jekyll
date: 2016-01-24 17:22:00 -0300
author: <NAME>
description: Meu primeiro post com Jekyll.
tags: 
- jekyll
categories:
- Jekyll
permalink: /meu-primeiro-post-com-jekyll/
---
{% endhighlight %}

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:

{% highlight yaml %}
---
layout: post
title: Meu primeiro post com Jekyll
date: 2016-01-24 17:22:00 -0300
author: <NAME>
description: Meu primeiro post com Jekyll.
tags: 
- jekyll
categories:
- Jekyll
permalink: /meu-primeiro-post-com-jekyll/
---
{% endhighlight %}

Depois só escrever o post que desejar, lembrando que ele é escrito em [Markdown](https://daringfireball.net/projects/markdown/syntax){:target="_blank"}.

## 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:

{% highlight yaml %}
---
layout: page
title: Sobre
permalink: /sobre/
---

Tutorial de como criar um blog com Jekyll, feito por [<NAME>](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/)
{% endhighlight %}

## 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:

{% highlight html %}
---
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">
{% raw %}
{% assign tags_list = site.tags %}
{% endraw %}
  {% raw %}
  {% if tags_list.first[0] == null %}
    {% raw %}
    {% for tag in tags_list %}
        <a data-scroll href="#{% raw %}{{ tag }}{% endraw %}">{% raw %}{{ tag }}{% endraw %}</a>
    {% endfor %}
    {% endraw %}
  {% else %}
    {% raw %}
    {% for tag in tags_list %}
        <a data-scroll href="#{% raw %}{{ tag[0] }}{% endraw %}">{% raw %}{{ tag[0] }}{% endraw %}</a>
    {% endfor %}
    {% endraw %}
  {% endif %}
  {% endraw %}
{% raw %}
{% assign tags_list = nil %}
{% endraw %}
</div>

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

Essa função peguei do blog do [Willian Justen](http://willianjusten.com.br){:target="_blank"}.

### categorias.html

Com base na função criada acima, vamos criar a mesma função, mudando apenas a variável.
<commit_msg>Corrigido exemplos<commit_after>---
layout: post
title: "Criando um blog com Jekyll - Parte Final"
date: 2016-01-24 17:06:00 -0300
author: <NAME>
description: Parte final do tutorial de como criar um blog com Jekyll.
tags: 
- frontend
- jekyll
categories:
- Jekyll
permalink: /criando-um-blog-com-jekyll-parte-final/
---

## 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](https://daringfireball.net/projects/markdown/syntax){:target="_blank"}. 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:

{% highlight yaml %}
---
layout: post
title: Meu primeiro post com Jekyll
date: 2016-01-24 17:22:00 -0300
author: <NAME>
description: Meu primeiro post com Jekyll.
tags: 
- jekyll
categories:
- Jekyll
permalink: /meu-primeiro-post-com-jekyll/
---
{% endhighlight %}

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:

{% highlight yaml %}
---
layout: post
title: Meu primeiro post com Jekyll
date: 2016-01-24 17:22:00 -0300
author: <NAME>
description: Meu primeiro post com Jekyll.
tags: 
- jekyll
categories:
- Jekyll
permalink: /meu-primeiro-post-com-jekyll/
---
{% endhighlight %}

Depois só escrever o post que desejar, lembrando que ele é escrito em [Markdown](https://daringfireball.net/projects/markdown/syntax){:target="_blank"}.

## 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:

{% highlight yaml %}
---
layout: page
title: Sobre
permalink: /sobre/
---

Tutorial de como criar um blog com Jekyll, feito por [<NAME>](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/)
{% endhighlight %}

## 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:

{% highlight html %}
---
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">
{% raw %}
{% assign tags_list = site.tags %}
{% endraw %}
  {% raw %}
  {% if tags_list.first[0] == null %}
    {% raw %}
    {% for tag in tags_list %}
        <a data-scroll href="#{% raw %}{{ tag }}{% endraw %}">{% raw %}{{ tag }}{% endraw %}</a>
    {% endfor %}
    {% endraw %}
  {% else %}
    {% raw %}
    {% for tag in tags_list %}
        <a data-scroll href="#{% raw %}{{ tag[0] }}{% endraw %}">{% raw %}{{ tag[0] }}{% endraw %}</a>
    {% endfor %}
    {% endraw %}
  {% endif %}
  {% endraw %}
{% raw %}
{% assign tags_list = nil %}
{% endraw %}
</div>

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

Essa função peguei do blog do [Willian Justen](http://willianjusten.com.br){:target="_blank"}.

### categorias.html

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

{'fraction_non_alphanumeric': 0.1634550371872887, 'fraction_numerical': 0.013522650439486139, 'mean_word_length': 3.1592267135325134, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5395717', 'n_tokens_mistral': 4669, 'n_tokens_neox': 4272, 'n_words': 1230}