Simple-Jekyll-Search

Build Status

A JavaScript library to add search functionality to any Jekyll blog.

Find it on npmjs.com


idea from this blog post


Promotion: check out Pomodoro.cc

Demo

Install

bower install --save simple-jekyll-search
# or
npm install --save simple-jekyll-search

Getting started

Place the following code in a file called search.json in the root of your Jekyll blog.

This file will be used as a small data source to perform the searches on the client side:

---
---
[
  
    {
      "title"    : "Dica do Dia #3 - Links Front End",
      "category" : "",
      "tags"     : "frontend, dica, links",
      "url"      : "/dica-do-dia-3-links-front-end/",
      "date"     : "2017-02-25 22:19:00 +0000"
    } ,
  
    {
      "title"    : "Começando com Sass",
      "category" : "",
      "tags"     : "frontend, sass, pre-processadores",
      "url"      : "/comecando-com-sass/",
      "date"     : "2017-01-30 23:19:00 +0000"
    } ,
  
    {
      "title"    : "Automatize suas tarefas com Gulp",
      "category" : "",
      "tags"     : "frontend, gulp, automatizadores",
      "url"      : "/automatize-suas-tarefas-com-gulp/",
      "date"     : "2017-01-27 18:56:00 +0000"
    } ,
  
    {
      "title"    : "Blade Theme - Meu primeiro tema para Jekyll",
      "category" : "",
      "tags"     : "frontend, jekyll, temas",
      "url"      : "/blade-theme-meu-primeiro-tema-para-jekyll/",
      "date"     : "2017-01-26 14:45:00 +0000"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte Final",
      "category" : "",
      "tags"     : "frontend, jekyll",
      "url"      : "/criando-um-blog-com-jekyll-parte-final/",
      "date"     : "2016-01-24 20:06:00 +0000"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte 3",
      "category" : "",
      "tags"     : "frontend, jekyll, sass, javascript",
      "url"      : "/criando-um-blog-com-jekyll-parte-3/",
      "date"     : "2016-01-20 14:00:00 +0000"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte 2",
      "category" : "",
      "tags"     : "frontend, jekyll",
      "url"      : "/criando-um-blog-com-jekyll-parte-2/",
      "date"     : "2016-01-17 21:35:00 +0000"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte 1",
      "category" : "",
      "tags"     : "frontend, jekyll",
      "url"      : "/criando-um-blog-com-jekyll-parte-1/",
      "date"     : "2016-01-15 17:00:00 +0000"
    } ,
  
    {
      "title"    : "Iniciando com Jekyll",
      "category" : "",
      "tags"     : "frontend, jekyll, sass",
      "url"      : "/iniciando-com-jekyll/",
      "date"     : "2016-01-13 20:53:00 +0000"
    } ,
  
    {
      "title"    : "Metas para 2016",
      "category" : "",
      "tags"     : "frontend, metas",
      "url"      : "/metas-2016/",
      "date"     : "2016-01-04 14:33:00 +0000"
    } ,
  
    {
      "title"    : "Dica do Dia #2 - Livros Casa do Código",
      "category" : "",
      "tags"     : "frontend, livro, dica",
      "url"      : "/dica-do-dia-2-livros-casa-do-codigo/",
      "date"     : "2015-11-25 01:33:00 +0000"
    } ,
  
    {
      "title"    : "Dica do Dia #1 - Livro Guia Front End",
      "category" : "",
      "tags"     : "frontend, livro, dica",
      "url"      : "/dica-do-dia-1-livro-guia-frontend/",
      "date"     : "2015-11-20 03:01:00 +0000"
    } ,
  
    {
      "title"    : "Olá Mundo",
      "category" : "",
      "tags"     : "frontend, jekyll, sass, gulp, bower, svg",
      "url"      : "/ola-mundo/",
      "date"     : "2015-11-17 00:10:00 +0000"
    } 
  
]

You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)

For example in _layouts/default.html:

<!-- Html Elements for Search -->
<div id="search-container">
<input type="text" id="search-input" placeholder="search...">
<ul id="results-container"></ul>
</div>

<!-- Script pointing to jekyll-search.js -->
<script src="/bower_components/simple-jekyll-search/dest/jekyll-search.js" type="text/javascript"></script>

Configuration

Customize SimpleJekyllSearch by passing in your configuration options:

SimpleJekyllSearch({
  searchInput: document.getElementById('search-input'),
  resultsContainer: document.getElementById('results-container'),
  json: '/search.json',
})

searchInput (Element) [required]

The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.

resultsContainer (Element) [required]

The container element in which the search results should be rendered in. Typically an <ul>.

json (String|JSON) [required]

You can either pass in an URL to the search.json file, or the results in form of JSON directly, to save one round trip to get the data.

searchResultTemplate (String) [optional]

The template of a single rendered search result.

The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.

E.g.

The template

<li><a href="{url}">{title}</a></li>

will render to the following

<li><a href="/jekyll/update/2014/11/01/welcome-to-jekyll.html">Welcome to Jekyll!</a></li>

If the search.json contains this data

[
    {
      "title"    : "Welcome to Jekyll!",
      "category" : "",
      "tags"     : "",
      "url"      : "/jekyll/update/2014/11/01/welcome-to-jekyll.html",
      "date"     : "2014-11-01 21:07:22 +0100"
    }
]

templateMiddleware (Function) [optional]

A function that will be called whenever a match in the template is found.

It gets passed the current property name, property value, and the template.

If the function returns a non-undefined value, it gets replaced in the template.

This can be potentially useful for manipulating URLs etc.

Example:

SimpleJekyllSearch({
  ...
  middleware: function(prop, value, template){
    if( prop === 'bar' ){
      return value.replace(/^\//, '')
    }
  }
  ...
})

See the tests for an in-depth code example

noResultsText (String) [optional]

The HTML that will be shown if the query didn’t match anything.

limit (Number) [optional]

You can limit the number of posts rendered on the page.

fuzzy (Boolean) [optional]

Enable fuzzy search to allow less restrictive matching.

exclude (Array) [optional]

Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).

Replace ‘search.json’ with the following code:

---
layout: null
---
[
  
    {
      "title"    : "Dica do Dia #3 - Links Front End",
      "category" : "",
      "tags"     : "frontend, dica, links",
      "url"      : "/dica-do-dia-3-links-front-end/",
      "date"     : "2017-02-25 22:19:00 +0000",
      "content"  : "Fala galera, dando continuidade à série Dica do dia, trago à vocês, um compilado de links para se manter atualizado no Front End. São diversos links, desde blogs à ferramentas. Vou deixar um índice abaixo para facilitar a navegação.  Blogs  Ferramentas  Outros LinksBlogsBlogs de devs que eu sigo e também da comunidade, são blogs que me ajudam bastante. Tem desde posts técnicos à dicas para sua carreira, vale a pena conferir.  Tableless - Blog com ótimos conteúdos de diversas áreas.  Front End Brasil - Blog da comunidade Front End no Brasil.  Maujor - Simplesmente, o blog do dinossauro das Css, Maurício Samy Silva. Ótimo conteúdo, principalmente sobre CSS.  Willian Justen - Blog do Willian Justen, ótimo material! Em especial, sobre SVG.  William Oliveira - Blog do William Oliveira, ótimo conteúdo lá. Vale a pena conferir!  Felipe Fialho - Blog do Felipe Filho, bastante material sobre a área Front End.  Nando Moreira - Blog do Fernando Moreira, ótimo conteúdo sobre Jekyll.  Sérgio Lopes - Blog do Sérgio Lopes, ótimo conteúdo sobre Acessibilidade e Perfomance.  Da2k - Blog do Fernando Daciuk, ótimo material sobre Js.  Nomadev - Blog do Suíssa, também tem bastante material sobre Js.  Raphael Fabeni - Blog do Raphael Fabeni, bastante conteúdo sobre CSS.  Gabriel Ferreira - Blog do Gabriel Ferreira, tem um conteúdo bem bacana.FerramentasAlgumas ferramentas bem úteis que tenho utilizado recentemente.FeedlySe você, assim como eu, acompanha diversos blogs, fica difícil acompanhar o conteúdo deles. Com o Feedly, você consegue marcar os blogs que segue e acompanhá-los. Ele é um agregador de links através do RSS, sempre que sai algum conteúdo novo, ele te informa.Mas ficar entrando toda vez no Feedly, para ver se tem conteúdo novo, é uma tarefa cansativa. Para isso, existem extensões para o Chrome e Firefox, que te notificam quando sai algum conteúdo. O que ajuda muito!  Feedly Notifier Chrome  Feedly Notifier FirefoxPocketCom tantos links para ler no dia, nem sempre conseguimos ler tudo. Quem nunca quis salvar aquele link para ler mais tarde? Mas nem sempre temos onde salvá-los. Com o Pocket, conseguimos salvar esses links e acessá-los quando quisermos. E o bom dele, é que é possível sincronizar com seu computador, tablet e celular.Outros Links  DEVNAESTRADA - Podcasts sobre front-end, back-end e desenvolvimento web.  Codepen - “Playground para o lado Front End da web”. Você pode criar, compartilhar e pesquisar exemplos de códigos.  Can I Use - Site para consultar o suporte dos navegadores para tecnologias Front End.  Como perder peso no browser - Um guia de perfomance Front End.  Codecademy - Cursos gratuitos de diversas áreas.  Js books - Diversos livros gratuitos sobre JavaScript para baixar.ConclusãoBom galera, esses são alguns links que utilizo para me manter atualizado no Front End.E você, conhece algum outro blog? Ou usa aquela ferramenta que sempre te auxilia? Comente aí!"
    } ,
  
    {
      "title"    : "Começando com Sass",
      "category" : "",
      "tags"     : "frontend, sass, pre-processadores",
      "url"      : "/comecando-com-sass/",
      "date"     : "2017-01-30 23:19:00 +0000",
      "content"  : "Você já deve ter ouvido falar sobre pré-processadores CSS e como eles aumentam sua produtividade. O Sass foi o primeiro pré-processador que conheci e desde então tenho usado ele em todos os meus projetos.  Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.Nesse post, ensinarei como instalá-lo em sua máquina e algumas features desse íncrivel pré-processador. Então chega de delongas e vamos lá!InstalaçãoPara instalar o Sass, você precisa ter instalado em sua máquina o Ruby. No site do Sass, tem dois métodos de instalação.Para esse tutorial, escolhi instalar usando o terminal. Então abra seu terminal e digite o comando:gem install sassSe você receber uma mensagem de erro, provavelmente terá que usar o comando sudo. Então ficará assim:sudo gem install sassPara conferir se o Sass foi instalado com sucesso, digite:sass -vSe ele retornar a versão do Sass, parabéns! O Sass foi instalado com sucesso.Usando o SassCom a Sass instalado, vamos testá-lo. Para isso, crie uma pasta para executarmos o nosso teste.Dentro da pasta, crie um arquivo chamado style.scss. Nele digite:$cor-principal: #00abd7;h1 {   color: $cor-principal;}Primeiro, criamos uma variável chamada $cor-principal e passamos para ela o hexadecimal da cor azul #00abd7. E depois passamos ela como valor da cor do elemento h1.Agora, precisamos compilar o Sass. Para isso, acesse o diretório do nosso arquivo .scss e digite o comando:sass --watch style.scss:style.cssPronto! Nosso arquivo foi compilado e foi gerado na nossa pasta, o arquivo style.css. Ele deve estar assim:h1 {  color: #00abd7; }Esse foi um exemplo básico do que o Sass é capaz de fazer. Vamos aprender agora algumas features!VariáveisComo vimos no exemplo anterior, o Sass permite o uso de variáveis para guardar informações como cores, fontes ou qualquer valor CSS que você queira reutilizar em seu código. Para declarar uma variável, use o símbolo $ antes do nome da variável.Exemplo:$fonte-legal: Arial, Verdana, sans-serif;$cor-1: #000000;h1 {   font-family: $fonte-legal;   color: $cor-1;}CSS compilado:h1 {  font-family: Arial, Verdana, sans-serif;  color: #000000; }Operadores MatemáticosTambém é possível fazer matemática em seu CSS. O Sass tem operadores matemáticos padrão, como: +,-,*,/ e %.Exemplo:.container {   width: 100%;}.main {   float: right;   width: 600px / 960px * 100%;}.sidebar {   float: left;   width: 300px / 960px * 100%;}CSS compilado:.container {  width: 100%; }.main {  float: right;  width: 62.5%; }.sidebar {  float: left;  width: 31.25%; }MixinsQuem nunca precisou reutilizar aquele trecho de código diversas vezes em um projeto? Para alterar uma declaração, teria que alterar em vários lugares. No Sass, é possível reutilizar esse trecho em vários lugares com o @mixin, facilitando a manutenção do código.Para criar um mixin, você usa a diretiva @mixin seguido do nome à sua escolha. Depois de criado, bastar usar a diretiva @include para importar o mixin.Exemplo:@mixin sombra {   -webkit-filter: drop-shadow(20px 20px 20px black);   filter: drop-shadow(20px 20px 20px black);}img {   @include sombra;   max-width: 100%;}CSS compilado:img {  -webkit-filter: drop-shadow(20px 20px 20px black);  filter: drop-shadow(20px 20px 20px black);  max-width: 100%; }Só existem essas features?Não! O Sass conta com várias outras features, para aprender a usá-las, acesse a documentação do Sass.ConclusãoRealmente usar um pré-processador como o Sass, ajuda bastante e aumenta sua produtividade. Mas cuidado, use-os com sabedoria, pois assim como eles ajudam bastante, podem te atrapalhar bastante também. Estude bem as documentações para evitar cometer erros, e para aprender a usá-los bem. Assim você evita que seu projeto vire um pesadelo."
    } ,
  
    {
      "title"    : "Automatize suas tarefas com Gulp",
      "category" : "",
      "tags"     : "frontend, gulp, automatizadores",
      "url"      : "/automatize-suas-tarefas-com-gulp/",
      "date"     : "2017-01-27 18:56:00 +0000",
      "content"  : "Fala galera, faz um bom tempo que não posto nada aqui, e para compensar isso, hoje começarei uma nova série: Automação de Tarefas. Nesse primeiro post, falarei sobre o Gulp, meu automatizador de tarefas preferido.Automatizadores de tarefas são ferramentas que ajudam nós, desenvolvedores, a realizar tarefas repetitivas, tais como: minificação de arquivos, concatenação, testes, entre outras coisas essenciais para o desenvolvimento de um código bom e rápido.Agora que você já sabe para que um automatizador de tarefas serve, vamos botar a mão na massa!Instalando o GulpPara instalar o Gulp, é necessário ter instalado em sua máquina, o Node.js. Caso já tenha instalado, basta rodar o seguinte comando na sua linha de comando, para instalar o CLI:npm install -g gulpPara verificar se o Gulp foi instalado corretamente, execute:gulp -vSe retornar a versão do Gulp, a instalação foi um sucesso.Iniciando a automatizaçãoO Gulp faz uso do Gulpfile para a configuração das tarefas.Para esse teste, criei a seguinte estrutura:|teste-gulp/|--src/|----script.js|----main.js|--Gulpfile.jsNele faremos a minificação dos arquivos js, e depois renomearemos os arquivos minificados. Para isso precisamos instalar alguns plugins - o Gulp faz uso desses plugins para a criação de tarefas - utilizaremos os seguintes plugins:  gulp-uglify: para minificar os arquivos js.  gulp-rename: para renomear os arquivos minificados.Execute o comando abaixo para instalar os plugins:npm install gulp gulp-uglify gulp-rename --save-devInstalamos novamente o Gulp. Porque o que foi instalado anteriormente foi o CLI - responsável por rodar o comando ‘gulp’ na linha de comando - e o instalado agora é o local, usado para rodar os testes no projeto. Agora, vamos criar o nosso Gulpfile:// Carregamos o Gulp e os plugins através da função 'require' do Node.jsvar gulp = require('gulp');var uglify = require('gulp-uglify');var rename = require("gulp-rename");// Definimos o diretório dos arquivosvar js = "./src/*.js";// Criamos uma nova tarefa através do 'gulp.task' e nomeamos de minify-js// Essa tarefa será responsável por minificar os arquivos jsgulp.task('minify-js', function() {  // Acessamos o diretório dos nossos arquivos js  return gulp.src(js)  	// Usamos o uglify para minificar os arquivos js    .pipe(uglify())    // Renomeamos com .min o final dos nossos arquivos js    .pipe(rename({            suffix: '.min'        }))    // Pasta de destino dos nossos arquivos minificados js    .pipe(gulp.dest('./src/'));});// Tarefa padrão quando executado o comando "gulp"gulp.task('default',['minify-js']); // Tarefa que ficará monitorando os arquivos, caso tenha alguma alteração, ele rodará novamente, comando "gulp watch".gulp.task('watch', function() {    gulp.watch(js, ['minify-js']);});Feito isso, para rodar as tarefas, execute o comando:gulpEle executará todas as tarefas e ficará esperando mudanças nos arquivos.ConclusãoComo vimos, o Gulp é um ótimo automatizador de tarefas que facilita muito nosso desenvolvimento. Várias outras tarefas podem ser executadas, além da mostrada nesse tutorial. O Gulp é um projeto muito bacana, caso você queira contribuir, acesse o repositório no GitHub e veja como você pode ajudar."
    } ,
  
    {
      "title"    : "Blade Theme - Meu primeiro tema para Jekyll",
      "category" : "",
      "tags"     : "frontend, jekyll, temas",
      "url"      : "/blade-theme-meu-primeiro-tema-para-jekyll/",
      "date"     : "2017-01-26 14:45:00 +0000",
      "content"  : "Um simples tema de blog Jekyll❗ O tema requer o ruby e rubygems instalados!  ✓ Layout responsivo  ✓ Pré-processador SASS  ✓ Sintaxe highlight  ✓ Configurações de autor  ✓ Paginação  ✓ Barra de pesquisa  ✓ Comentários com Disqus  ✓ Compartilhamento de postsComece em 4 passos  Faça o download ou clone o repositório: git clone https://github.com/mateussmedeiros/blade-theme.git  Entre no diretório: cd blade-theme  Instale as dependências do Ruby: bundle install  Inicie o servidor Jekyll: jekyll serveAcesse: localhost:4000Demo e DownloadDemo ↗ |Download ↗O tema também está disponível na RubyGems ↗LicençaEste tema é liberado sob licença MIT ↗."
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte Final",
      "category" : "",
      "tags"     : "frontend, jekyll",
      "url"      : "/criando-um-blog-com-jekyll-parte-final/",
      "date"     : "2016-01-24 20:06:00 +0000",
      "content"  : "IntroduçãoFala 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 postsEscrever 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: posttitle: Meu primeiro post com Jekylldate: 2016-01-24 17:22:00 -0300author: Mateus Medeirosdescription: Meu primeiro post com Jekyll.tags: - jekyllcategories:- Jekyllpermalink: /meu-primeiro-post-com-jekyll/---Agora vamos escrever o primeiro post do nosso blog.Escrevendo nosso primeiro postNa 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: posttitle: Meu primeiro post com Jekylldate: 2016-01-24 17:22:00 -0300author: Mateus Medeirosdescription: Meu primeiro post com Jekyll.tags: - jekyllcategories:- Jekyllpermalink: /meu-primeiro-post-com-jekyll/---Depois só escrever o post que desejar, lembrando que ele é escrito em Markdown.Como adicionar páginasAdicionar 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.mdAbra 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: pagetitle: Sobrepermalink: /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áginasVamos 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.htmlIremos 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 Tag2Taglink-do-postlink-do-postTag2link-do-postlink-do-postO arquivo ficou assim:---layout: pagetitle: Tagsdescription: Procure os assuntos pelas tags usadas no blogpermalink: /tags/---&lt;h2&gt; Procure os assuntos pelas tags usadas no blog &lt;/h2&gt;&lt;div class="tags-list"&gt;{% assign tags_list = site.tags %}  {% if tags_list.first[0] == null %}    {% for tag in tags_list %}        &lt;a data-scroll href="#{{ tag }}"&gt;{{ tag }}&lt;/a&gt;    {% endfor %}  {% else %}    {% for tag in tags_list %}        &lt;a data-scroll href="#{{ tag[0] }}"&gt;{{ tag[0] }}&lt;/a&gt;    {% endfor %}  {% endif %}{% assign tags_list = nil %}&lt;/div&gt;{% for tag in site.tags  %}    &lt;div class="tag"&gt;        &lt;h2 class="tag-title" id="{{ tag[0] }}"&gt;{{ tag[0] }}&lt;/h2&gt;        &lt;ul class="posts"&gt;            {% assign pages_list = tag[1] %}            {% for post in pages_list reversed %}                {% if post.title != null %}                {% if group == null or group == post.group %}                &lt;li&gt;&lt;a href="{{ site.url }}{{ post.url }}"&gt;{{ post.title }}&lt;span class="date"&gt;&lt;time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished"&gt;{{ post.date | date: "%d %b, %Y" }}&lt;/time&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;                {% endif %}                {% endif %}            {% endfor %}            {% assign pages_list = nil %}            {% assign group = nil %}        &lt;/ul&gt;    &lt;/div&gt;{% endfor %}Essa função peguei do blog do Willian Justen.categorias.htmlCom base na função criada acima, vamos criar a mesma função, mudando apenas a variável.---layout: pagetitle: Categoriasdescription: Procure os assuntos pelas categorias usadas no blog.permalink: /categorias/---&lt;h2&gt; Procure os assuntos pelas categorias usadas no blog &lt;/h2&gt;&lt;div class="categories-list"&gt;{% assign categories_list = site.categories %}  {% if categories_list.first[0] == null %}    {% for category in categories_list %}        &lt;a data-scroll href="#{{ category }}"&gt;{{ category }}&lt;/a&gt;    {% endfor %}  {% else %}    {% for category in categories_list %}        &lt;a data-scroll href="#{{ category[0] }}"&gt;{{ category[0] }}&lt;/a&gt;    {% endfor %}  {% endif %}{% assign tags_list = nil %}&lt;/div&gt;{% for category in site.categories  %}    &lt;div class="category"&gt;        &lt;h2 class="category-title" id="{{ category[0] }}"&gt;{{ category[0] }}&lt;/h2&gt;        &lt;ul class="posts"&gt;            {% assign pages_list = category[1] %}            {% for post in pages_list reversed %}                {% if post.title != null %}                {% if group == null or group == post.group %}                &lt;li&gt;&lt;a href="{{ site.url }}{{ post.url }}"&gt;{{ post.title }}&lt;span class="date"&gt;&lt;time datetime="{{ post.date | date_to_xmlschema }}" itemprop="datePublished"&gt;{{ post.date | date: "%d %b, %Y" }}&lt;/time&gt;&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;                {% endif %}                {% endif %}            {% endfor %}            {% assign pages_list = nil %}            {% assign group = nil %}        &lt;/ul&gt;    &lt;/div&gt;{% endfor %}contato.mdVamos criar agora uma página de contato, ela será escrita em Markdown. A minha ficou assim:---layout: pagetitle: Contatopermalink: /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 menuCriamos nossas páginas, agora vamos adicioná-las ao menu. Para isso, abra o arquivo header.html, e troque os links do menu, ficando assim:&lt;!-- Menu --&gt;&lt;nav class="menu"&gt;  &lt;ul&gt;    &lt;li&gt;&lt;a href="/sobre"&gt; Sobre &lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href="/categorias"&gt; Categorias &lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href="/tags"&gt; Tags &lt;/a&gt;&lt;/li&gt;    &lt;li&gt;&lt;a href="/contato"&gt; Contato &lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;&lt;/nav&gt;Subindo para o GitHubVocê pode subir seu blog para o GitHub e hospedá-lo com o GitHub Pages:  Entre em sua conta no GitHub, caso não tenha, crie uma.  Crie um repositório com o seguinte nome: seunomedeusuario.github.io  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 projetogit init# Adicionar todos os arquivosgit add .# Commitar os arquivosgit commit -m "Commit Inicial"# Adicionar o repositóriogit remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git# Subir o seu bloggit push -u origin masterPronto, 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.ioConclusãoChegamos 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!"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte 3",
      "category" : "",
      "tags"     : "frontend, jekyll, sass, javascript",
      "url"      : "/criando-um-blog-com-jekyll-parte-3/",
      "date"     : "2016-01-20 14:00:00 +0000",
      "content"  : "IntroduçãoFala galera, hoje daremos continuidade ao tutorial de como criar um blog com Jekyll. Nessa parte, vamos adicionar o nosso CSS utilizando o SASS, também vamos adicionar JavaScript (incluindo o plugin de pesquisa) e corrigir alguns erros nos arquivos. Deixarei a parte de escrever posts para a parte final junto com a parte de adicionar páginas.Se você ainda não leu as outras partes, leia e depois volte aqui:  Parte 1.  Parte 2.Agora, vamos lá!Estilizando o blog com SASSVamos começar pelo SASS, primeiramente você deve ter ele instalado em sua máquina, se você não tem veja como instalar aqui.Depois de instalado, vamos começar a estilizar. Abra o arquivo main.scss, que está na pasta css, que se encontra dentro da pasta assets. O arquivo ficou assim:---# Only the main Sass file needs front matter (the dashes are enough)---@charset "utf-8";/*----------------------------- Fontes importadas -----------------------------*/// Open Sans@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--------------------- Variáveis ---------------------*/// Fontes$fonte-padrao: 'Open Sans', Arial, sans-serif;// Cores$azul: #3498db;$azul-escuro: #1f74bf;$branco: #fff;$preto: #3c3c3c;// Breakpoints$bp-celular: 600px;$bp-tablet: 800px;/*------------------------ Placeholders ------------------------*/%margins {    margin: 1em 0;}/*------------------ Mixins ------------------*/@mixin media-query($device) {    @media screen and (max-width: $device) {        @content;    }}/*------------------------------------ Arquivos SASS importados ------------------------------------*/@import        "base",        "layout",        "syntax-highlighting",        "responsive";Aqui definimos as variáveis que utilizaremos durante a estilização, criamos um placeholder para o tamanho das margens, também criamos um mixin para as nossas media queries. No final fazemos a importação dos arquivos que estão na pasta _sass.Depois disso, abra a pasta _sass, dentro dela tem 3 arquivos:  _base.scss  _layout.scss  _syntax-highlighting.scssIremos adicionar um novo arquivo: _responsive.scss, que será o arquivo responsável pela estilização para dispositivos móveis._base.scss/*----------------- Reset -----------------*/*, *:before, *:after {    margin: 0;    padding: 0;    box-sizing: border-box;}button {    padding: 0;    background: none;    border: 0;    overflow: visible;}/*---------------- Body ----------------*/body {    font-family: $fonte-padrao;    color: $preto; }/*---------------------- Tipografia ----------------------*/h1 {    font-size: 24pt;    line-height: 28pt;}h2 {    font-size: 20pt;    line-height: 24pt;}h3 {    font-size: 16pt;    line-height: 20pt;}h4 {    font-size: 14pt;    line-height: 16pt;}h5 {    font-size: 12pt;    line-height: 14pt;}h6 {    font-size: 10pt;    line-height: 12pt;}p, a, li {    font-size: 14pt;    line-height: 18pt;}p {    @extend %margins;}h4, h5, h6 {    text-transform: uppercase;}/*----------------- Links -----------------*/a {    color: $azul;    &amp;:hover {        color: $azul-escuro;    }}/*------------------ Listas ------------------*/ul {    list-style: disc;}ul, ol {    padding-left: 20px;    li {        padding: 5px 0;    }}/*------------------- Imagens -------------------*/img {    max-width: 100%;    vertical-align: middle;}figure &gt; img {    display: block;}.center {  display: block;  margin: 0 auto;}.right {  float: right;}.left {  float: left;}/*----------------------- Blockquotes -----------------------*/blockquote {    border-left: 4px solid $azul;    font-size: 16pt;    letter-spacing: -1px;    font-style: italic;    &gt; :last-child {        margin-bottom: 0;    }}Aqui temos a base do estilo do blog, primeiro fazemos um reset, depois estilizamos a tipografia, links, listas, imagens e o blockquotes._layout.scss/*--------------------------- Header | Footer ---------------------------*/.header {    a {        text-decoration: none;    }}.footer {    color: $branco;    text-shadow: 0px 2px 0px rgba(31, 116, 191, 1);    a {        color: $branco;    }    p {        margin: 0;    }}.header, .footer {    padding: 15px;    background: $azul;    text-align: center;}/*----------------------- Título Site -----------------------*/.title {    clear: both;    padding: 20px 0;        a {        color: $branco;        text-shadow: 0px 5px 0px rgba(31, 116, 191, 1);    }    h1 a {        font-size: 32pt;        line-height: 42pt;        text-transform: uppercase;    }    h2 a {        font-size: 24pt;        line-height: 34pt;    }}/*---------------- Menu ----------------*/.bt-menu {    display: none;    float: left;}.menu {    li {        float: left;        margin: 0 15px 0 0;        list-style: none;        &amp;:last-child {            margin-right: none;        }    }    a {        font-size: 16pt;        color: $branco;        &amp;:hover {            text-decoration: underline;        }    }}/*-------------------- Pesquisa --------------------*/.bt-search {    float: right;}#search-container {    display: none;    top: 0;    left: 0;    padding: 10px;    position: fixed;    width: 100%;    height: 100%;    z-index: 1;    background-color: rgba(0, 0, 0, 0.8);    input[type=text]{        width: 400px;        height: 30px;        margin: 10px auto;        background: transparent;        border: 0;        border-bottom: 1px solid $branco;        outline: 0;        text-align: center;        font-size: 16pt;        color: $branco;    }    ::-webkit-input-placeholder{        color: $branco;    }    :-ms-input-placeholder {        color: $branco;    }    ::-ms-input-placeholder {        color: $branco;    }    ::-moz-placeholder {        color: $branco;    }    a {        display: block;        margin: 10px;        color: $branco;        &amp;:hover {            color: $azul;            text-decoration: underline;        }    }}  /*---------------------- Ícones SVG ----------------------*/.icon-top {    width: 25px;    height: 25px;    fill: $branco;    cursor: pointer;}.icon {  width: 40px;  height: 40px;  margin: 5px;  display: inline-block;  fill: $azul;}/*------------------------- Página | Post -------------------------*/.home {    text-align: center;}.page-content {    display: block;    padding: 35px 30px;}.post-content {    h2, h3, h4, h5, h6 {        margin: 20px 0;    }}.post-list {    list-style: none;}.page-title,.post-title {  border-bottom: 1px solid $preto;  padding: 5px 0;}.post-meta {  font-size: 10pt;  line-height: 16pt;}.post-link {  text-decoration: none;  font-size: 24pt;  line-height: 28pt;}.tags {  margin-top: 1em;  a {    border-right: 1px solid $azul;    padding: 0 5px;    &amp;:last-child {        border-right: none;    }  }}/*----------------- Autor -----------------*/.img-author {  width: 150px;  height: 150px;  float: left;  margin-right: 20px;  border-radius: 100%;  border: 3px solid $azul;}.author {  background: darken($branco, 5%);  padding: 15px;  @extend %margins;  .details {    @extend %margins;  }  .name a {    font-size: 18pt;    text-decoration: none;  }}/*---------------------------------------------------- Botões de Compartilhamento | Comentários ----------------------------------------------------*/.share, .comments {  text-align: center;  border-top: 1px solid $preto;  padding: 10px;}.share {  a {    text-decoration: none;  }  .icon {    margin-top: 10px;        &amp;:hover {      fill: darken($azul, 15%);    }  }}Esse é o arquivo responsável pela estrutura do layout. Você pode estilizar do jeito que quiser, fiz conforme o layout que mostrei na primeira parte do tutorial._responsive.scss@include media-query($bp-tablet) {	/*------------	---- Menu ----	------------*/	.bt-menu {		display: block;	}    .menu {    	display: none;    	clear: both;    	li {        	float: none;        	display: block;        	margin: 0;        	padding: 10px;        	border-bottom: 1px solid $branco;        	&amp;:last-child {            	border-bottom: none;        	}    	}	}}@include media-query($bp-celular) {	/*-------------------	---- Título Site ----	-------------------*/	.title {    	h1 a {        	font-size: 24pt;        	line-height: 32pt;        	text-transform: capitalize;    	}    	h2 a {        	font-size: 16pt;        	line-height: 24pt;    	}	}		/*---------------------	---- Página | Post ----	---------------------*/	.page-content {  		padding: 25px 20px;	}	.post-list, .post-container {  		padding: 0;	}		/*----------------	---- Pesquisa ----	----------------*/	#search-container {  		input[type=text]{    		width: 80%;  		}	}	/*-------------	---- Autor ----	-------------*/	.author {		text-align: center;		.email {			font-size: 12pt;		}	}	.img-author {		float: none;		display: block;		margin: 0 auto;	}}Adaptamos o layout para os dispositivos móveis, incluimos os mixins que criamos no main.scss com os breakpoints que definimos também lá._syntax-highlighting.scss/*------------------ Código ------------------*/pre,code {    font-size: 15px;    border: 1px solid $azul;    border-radius: 3px;    background: #272822;}code {    padding: 1px 5px;    color: $branco;}pre {    padding: 8px 12px;    overflow-x: auto;    &gt; code {        border: 0;        padding-right: 0;        padding-left: 0;    }}/*-------------------------------------- Syntax highlighting styles --------------------------------------*/.highlight {    background: #272822;    .highlighter-rouge &amp; {      background: #272822;    }    .c { color: #75715e } /* Comment */    .err { color: #960050; background-color: #1e0010 } /* Error */    .k { color: #66d9ef } /* Keyword */    .l { color: #ae81ff } /* Literal */    .n { color: #f8f8f2 } /* Name */    .o { color: #f92672 } /* Operator */    .p { color: #f8f8f2 } /* Punctuation */    .cm { color: #75715e } /* Comment.Multiline */    .cp { color: #75715e } /* Comment.Preproc */    .c1 { color: #75715e } /* Comment.Single */    .cs { color: #75715e } /* Comment.Special */    .ge { font-style: italic } /* Generic.Emph */    .gs { font-weight: bold } /* Generic.Strong */    .kc { color: #66d9ef } /* Keyword.Constant */    .kd { color: #66d9ef } /* Keyword.Declaration */    .kn { color: #f92672 } /* Keyword.Namespace */    .kp { color: #66d9ef } /* Keyword.Pseudo */    .kr { color: #66d9ef } /* Keyword.Reserved */    .kt { color: #66d9ef } /* Keyword.Type */    .ld { color: #e6db74 } /* Literal.Date */    .m { color: #ae81ff } /* Literal.Number */    .s { color: #e6db74 } /* Literal.String */    .na { color: #a6e22e } /* Name.Attribute */    .nb { color: #f8f8f2 } /* Name.Builtin */    .nc { color: #a6e22e } /* Name.Class */    .no { color: #66d9ef } /* Name.Constant */    .nd { color: #a6e22e } /* Name.Decorator */    .ni { color: #f8f8f2 } /* Name.Entity */    .ne { color: #a6e22e } /* Name.Exception */    .nf { color: #a6e22e } /* Name.Function */    .nl { color: #f8f8f2 } /* Name.Label */    .nn { color: #f8f8f2 } /* Name.Namespace */    .nx { color: #a6e22e } /* Name.Other */    .py { color: #f8f8f2 } /* Name.Property */    .nt { color: #f92672 } /* Name.Tag */    .nv { color: #f8f8f2 } /* Name.Variable */    .ow { color: #f92672 } /* Operator.Word */    .w { color: #f8f8f2 } /* Text.Whitespace */    .mf { color: #ae81ff } /* Literal.Number.Float */    .mh { color: #ae81ff } /* Literal.Number.Hex */    .mi { color: #ae81ff } /* Literal.Number.Integer */    .mo { color: #ae81ff } /* Literal.Number.Oct */    .sb { color: #e6db74 } /* Literal.String.Backtick */    .sc { color: #e6db74 } /* Literal.String.Char */    .sd { color: #e6db74 } /* Literal.String.Doc */    .s2 { color: #e6db74 } /* Literal.String.Double */    .se { color: #ae81ff } /* Literal.String.Escape */    .sh { color: #e6db74 } /* Literal.String.Heredoc */    .si { color: #e6db74 } /* Literal.String.Interpol */    .sx { color: #e6db74 } /* Literal.String.Other */    .sr { color: #e6db74 } /* Literal.String.Regex */    .s1 { color: #e6db74 } /* Literal.String.Single */    .ss { color: #e6db74 } /* Literal.String.Symbol */    .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */    .vc { color: #f8f8f2 } /* Name.Variable.Class */    .vg { color: #f8f8f2 } /* Name.Variable.Global */    .vi { color: #f8f8f2 } /* Name.Variable.Instance */    .il { color: #ae81ff } /* Literal.Number.Integer.Long */    .gh { } /* Generic Heading &amp; Diff Header */    .gu { color: #75715e; } /* Generic.Subheading &amp; Diff Unified/Comment? */    .gd { color: #f92672; } /* Generic.Deleted &amp; Diff Deleted */    .gi { color: #a6e22e; } /* Generic.Inserted &amp; Diff Inserted */}Por fim, estilizamos os highlights do blog, utilizei o mesmo que uso nesse meu blog. E terminamos a estilização, vamos agora adicionar JavaScript.Adicionando JavaScriptPrimeira coisa que iremos fazer é instalar o Bower para gerenciar as dependências do blog. Para instalar ele, você deve já ter instalado em sua máquina o Node.js, npm e Git. Com eles já instalados, digite no terminal:npm install -g bowerPara verificar se ele foi instalado com sucesso, digite:bower -v# 1.6.8Antes de instalar as dependências que iremos utilizar no blog, precisamos listá-las. Para isso digite o comando bower init. Ele irá nos fazer algumas perguntas, responda com as informações do seu blog (nem todas as perguntas precisam ser respondidas). Feito isso o bower irá criar o arquivo bower.json, você pode editá-lo como quiser.Agora vamos instalar 2 dependências: o jQuery e o Simple Jekyll Search. Para instalar e já listá-las no arquivo bower.json, digite o comando:# Instalar o Simple Jekyll Searchbower install --save simple-jekyll-search# Instalar o jQuerybower install --save jqueryVamos mudar o diretório das nossas dependências, ele ficará no seguinte caminho: /assets/components/. Para isso crie um arquivo chamado .bowerrc e nele adicione:{    "directory" : "assets/components"}Feito isso, exclua a pasta bower_components.No final, depois de editado, o meu arquivo bower.json ficou assim:{  "name": "Tutorial Jekyll",  "homepage": "https://github.com/mateussmedeiros/tutorial-jekyll",  "authors": [    "Mateus Medeiros &lt;mateusdesousamedeiros@hotmail.com&gt;"  ],  "description": "Tutorial de como construir um blog com Jekyll",  "license": "MIT",  "ignore": [    "**/.*",    "node_modules",    "bower_components",    "test",    "tests"  ],  "dependencies": {    "simple-jekyll-search": "latest",    "jquery": "latest"  }}Pronto, instalamos o jQuery e o Simple Jekyll Search. Agora vamos implementá-los.Implementando a PesquisaPrimeiramente, crie o arquivo search.json, e digite isso:------[    {% for post in site.posts %}    {      "title"    : "{{ post.title | escape }}",      "category" : "{{ post.category }}",      "tags"     : "{{ post.tags | join: ', ' }}",      "url"      : "{{ site.baseurl }}{{ post.url }}",      "date"     : "{{ post.date }}"    } {% unless forloop.last %},{% endunless %}  {% endfor %}  ]Depois dentro da pasta assets/js, crie um arquivo script.js e digite:// Abrir e Fechar - Barra de Pesquisa$(".bt-search").click(function() {	$("#search-container").show();	if ( $("#search-container").is(":visible") ) {		$(".bt-search").attr('aria-expanded', 'true');	}});$(".bt-close").click(function() {	$("#search-container").hide();	if ( $("#search-container").is(":hidden") ) {		$(".bt-search").attr('aria-expanded', 'false');	}});// Simple Jekyll SearchSimpleJekyllSearch({  searchInput: document.getElementById('search-input'),  resultsContainer: document.getElementById('results-container'),  json: '/search.json',  searchResultTemplate: '&lt;li&gt;&lt;a href="{url}" title="{desc}"&gt;{title}&lt;/a&gt;&lt;/li&gt;',  noResultsText: 'Sem resultados'})Primeiro criamos a função que abre e fecha a barra de pesquisa e depois implementamos o plugin Simple Jekyll Search.Abrindo e fechando o MenuAinda no arquivo script.js, adicione isso:// Abrir e Fechar - Menu$(".bt-menu").click(function() {	$(".menu").toggle();	if ( $(".menu").is(":visible") ) {		$(".bt-menu").attr('aria-expanded', 'true');	} else {		$(".bt-menu").attr('aria-expanded', 'false');	};});// Retirar o estilo com o redimensionamento da tela$(window).resize(function(){	if(window.innerWidth &gt; 800) {		$(".menu").removeAttr("style");		$("#search-container").removeAttr("style");	}});Primeiro criamos a função que abre e fecha o menu e depois corrigimos um bug que é gerado quando redimensionamos a tela.Chamando os arquivos jsJá configuramos o nosso JavaScript, agora vamos chamar os arquivos. Para isso abra o arquivo footer.html e adicione as seguintes linhas:&lt;script src="/assets/components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;&lt;script src="/assets/components/simple-jekyll-search/dest/jekyll-search.js"&gt;&lt;/script&gt;&lt;script src="/assets/js/script.js"&gt;&lt;/script&gt;Pronto, agora nosso JavaScript já está funcionando corretamente!Corrigindo erros no arquivosSe você acessar o blog, vai perceber que os ícones SVG não estão aparecendo. Isso acontece porque não chamamos o arquivo svg.html no nosso head.html, para corrigir isso adicione {% include svg.html %} no arquivo head.html e pronto, está corrigido!ConclusãoAdicionamos CSS e JavaScript ao blog, agora ele já está praticamente pronto. Na próxima e última parte desse tutorial, irei ensinar como escrever posts e adicionar páginas ao blog, também iremos subir ele para o GitHub. Aguarde!Dúvidas? Comente!"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte 2",
      "category" : "",
      "tags"     : "frontend, jekyll",
      "url"      : "/criando-um-blog-com-jekyll-parte-2/",
      "date"     : "2016-01-17 21:35:00 +0000",
      "content"  : "IntroduçãoDando continuidade ao tutorial de como criar um blog com Jekyll, hoje vamos configurar a pasta _layouts e a página inicial do blog, o arquivo index.html. Você pode acompanhar o andamento do nosso tutorial no GitHub. Se você ainda não viu a primeira parte, corre lá e depois volta aqui:  Parte 1.Pasta _layoutsNa pasta _layouts, tem - por padrão - 3 arquivos:  default.html: estrutura padrão das páginas.  page.html: estrutura de páginas secundárias.  post.html: estrutura dos posts.Nós iremos manter todas elas, vamos agora editá-las. Lembrando que não existe espaço entre as chaves.default.html&lt;!DOCTYPE html&gt;&lt;html&gt;  &lt;!-- Incui o arquivo head.html --&gt;  { % include head.html % }  &lt;body&gt;    &lt;!-- Inclui o arquivo header.html --&gt;    { % include header.html % }    &lt;div class="page-content"&gt;      &lt;!-- Inclui o conteúdo da página --&gt;      { { content } }    &lt;/div&gt;    &lt;!-- Inclui o arquivo footer.html --&gt;    { % include footer.html % }  &lt;/body&gt;&lt;/html&gt;Nós mantemos a maior parte do arquivo, apenas retiramos o wrapper da página. Aqui estamos incluindo os arquivos head.html, header.html e footer.html que estão na pasta _includes que configuramos na parte anterior.page.html---layout: default---&lt;article class="post"&gt;	&lt;!-- Chamamos o título da página --&gt;	&lt;h1 class="post-title"&gt;{ { page.title } }&lt;/h1&gt;		&lt;!-- Incluimos o conteúdo da página --&gt;	&lt;div class="post-content"&gt;  		{ { content } }	&lt;/div&gt;&lt;/article&gt;Incluimos a estrutura do arquivo default.html, e colocamos uma estrutura simples com apenas o título e o conteúdo da página.post.html---layout: default---&lt;article class="post" itemscope itemtype="http://schema.org/BlogPosting"&gt;  &lt;!-- Chamamos o título do post --&gt;  &lt;h1 class="post-title" itemprop="name headline"&gt;{ { page.title } }&lt;/h1&gt;  &lt;!-- Incluimos a data e o autor do post --&gt;  &lt;p class="post-meta"&gt;&lt;time datetime="{ { page.date | date_to_xmlschema } }" itemprop="datePublished"&gt;{ { page.date | date: "%-d %b, %Y" } }&lt;/time&gt;{ % if page.author % } | &lt;span itemprop="author" itemscope itemtype="http://schema.org/Person"&gt;&lt;span itemprop="name"&gt;{ { page.author } }&lt;/span&gt;&lt;/span&gt;{ % endif % }&lt;/p&gt;    &lt;!-- Icluimos o conteúdo do post --&gt;  &lt;div class="post-content" itemprop="articleBody"&gt;    { { content } }  &lt;/div&gt;  &lt;!-- Incluimos os botões de compartilhamento --&gt;  { % include share.html % }  &lt;!-- Incluimos a seção com o autor do post --&gt;  { % include author.html % }  &lt;!-- Incluimos os comentários --&gt;  { % include comments.html % }&lt;/article&gt;Aqui também incluimos o arquivo default.html, abaixo do título incluimos a data e o autor do post. Depois do conteúdo, incluimos os arquivos que criamos na parte anterior: share.html, author.html e comments.html.Página inicial do blog: index.htmlTerminamos as estruturas dos layouts, agora vamos editar nossa página inicial. Ela ficou assim:---layout: default---&lt;div class="home"&gt;  &lt;ul class="post-list"&gt;    &lt;!-- Procura os posts no blog e lista eles --&gt;    { % for post in site.posts % }      &lt;li&gt;        &lt;!-- Inclui o título com link do post --&gt;        &lt;h2&gt;          &lt;a class="post-link" href="{ { post.url | prepend: site.baseurl } }"&gt;{ { post.title } }&lt;/a&gt;        &lt;/h2&gt;        &lt;!-- Inclui a data e autor do post --&gt;        &lt;span class="post-meta"&gt;{ { post.date | date: "%-d %b, %Y" } } { % if page.author % } | { { page.author } } { % endif % }&lt;/span&gt;        &lt;!-- Inclui a descrição do post --&gt;        &lt;p class="post-description"&gt;{ { post.description } }&lt;/p&gt;                &lt;!-- Inclui um Leia mais com o link do post --&gt;        &lt;a href="{ { post.permalink | prepend: site.baseurl } }"&gt; Leia mais sobre { { post.title } }...&lt;/a&gt;                &lt;!-- Inclui as tags do post --&gt;        { % include tags.html % }      &lt;/li&gt;      &lt;hr&gt;    { % endfor % }  &lt;/ul&gt;    &lt;!-- Incrição do feed --&gt;  &lt;p class="rss-subscribe"&gt; Inscreva-se &lt;a href="{ { "/feed.xml" | prepend: site.baseurl } }"&gt;via RSS&lt;/a&gt;&lt;/p&gt;&lt;/div&gt;Listamos os posts com:  Título  Data e autor do post  Descrição do post  Leia mais com o link do post  Tags do postNo final da página, tem um link para subscrição do feed do blog.ConclusãoChegamos ao final da segunda parte, configuramos a pasta _layouts e a página inicial do blog. Até agora já temos prontos as pastas: _includes e _layouts e os arquivos: _config.yml e index.html. Na próxima parte vamos editar nosso CSS, adicionar JavaScript e aprender a escrever posts.Dúvida? Comente!Até a próxima!"
    } ,
  
    {
      "title"    : "Criando um blog com Jekyll - Parte 1",
      "category" : "",
      "tags"     : "frontend, jekyll",
      "url"      : "/criando-um-blog-com-jekyll-parte-1/",
      "date"     : "2016-01-15 17:00:00 +0000",
      "content"  : "IntroduçãoFala galera, recebi vários feedbacks positivos do post anterior, o que me motivou ainda mais a continuar essa série sobre Jekyll. Vamos lá para esse segundo post, iremos aprender passo-a-passo como criar um blog com jekyll. Para não ficar muito longo, irei dividir esse tutorial em partes.Nessa primeira parte, iremos configurar a pasta _includes e o arquivo _config.yml. Preparei um pequeno layout que servirá de base para a construção do nosso blog. Você pode conferir abaixo:Todo o código utilizado aqui, estará disponível no repositório que criei no GitHub.Preparando o projetoA primeira coisa que iremos fazer é criar a pasta do nosso blog, abra o seu terminal e digite:jekyll new tutorial-jekyllO nome que escolhi para a minha pasta foi tutorial-jekyll, você pode escolher o nome que quiser para a sua pasta.Gerando o servidorCriado a pasta do nosso blog, vamos gerar um servidor para acompanharmos o andamento do desenvolvimento. Ainda no terminal digite:# Entrar na pasta do blogcd tutorial-jekyll# Gerar o servidorjekyll serveO servidor será criado na porta 4000 por padrão, para acessar entre em http://localhost:4000 ou http://127.0.0.1:4000.Configurando o blogVamos agora configurar o nosso blog, abra o arquivo _config.yml no seu editor preferido e vamos lá.O meu arquivo _config.yml ficou assim:# Site settingstitle: Tutorial Jekyll # Título do Blogsubtitle: Como construir um blog com Jekyll # Subtítulo do Blog, opcionaldescription: "Tutorial de como construir um blog com Jekyll, feito por Mateus Medeiros" # Descrição do Blogurl: "http://tutorial-jekyll.github.io" # Endereço do nosso blog# Author Settingsauthor:    name: Mateus Medeiros # Nome do autor    img: /assets/img/perfil.jpg # Imagem do Autor    blog: http://devmateusmedeiros.com.br # Blog do autor    email: mateus.sousamedeiros@gmail.com # Email do autor    twitter: mateussousam # Twitter do autor    github:  mateussmedeiros # GitHub do autor    bio: Desenvolvedor Front End apaixonado por novas tecnologias. Sou apaixonado pelo que faço e procuro aprender cada dia mais. # Descrição do autor# Build settingsmarkdown: kramdown # Estilo do Markdownpermalink: /:categories/:title/ # Configuração dos links do blogcss_folder:  "/assets/css" # Caminho dos arquivos cssjs_folder:  "/assets/js" # Caminho dos arquivos jsimg_folder:  "/assets/img" # Caminho das imagenssass:    style: compressed # Configuração dos arquivos css gerados pelo sass, compressed gera o css minificadoO código já está bastante comentado, você deve trocar os valores das variáveis de acordo com as informações do seu blog.Configurando as pastasVamos agora configurar as nossas pastas. Primeiramente criaremos a pasta assets, dentro dela criaremos 2 pastas: js e img, também moveremos a pasta css para cá, ficando assim:  css: onde ficará o arquivo main.scss que o sass irá compilar.  img: onde ficarão as imagens.  js: onde ficarão os arquivos JavaScript.Feito isso, vamos configurar a pasta _includes.Pasta _includesA nossa pasta _includes contém - por padrão - 7 arquivos:  footer.html  head.html  header.html  icon-github.html  icon-github.svg  icon-twitter.html  icon-twitter.svgIremos manter apenas o 3 primeiros arquivos e criar outros 5 arquivos, ficando assim:  author.html: é seção do autor de cada post.  comments.html: é a seção de comentários nos posts.  footer.html: é o footer do nosso blog.  head.html: é o head do nosso blog.  header.html: é o header do nosso blog, onde ficará também o nosso menu.  share.html: é a seção de compartilhamento dos posts.  svg.html: é o arquivo onde ficarão os ícones svg.  tags.html: é o arquivo onde ficará o laço for para listar todas as tags utilizadas no blog.Vamos configurar agora cada um dos nossos arquivos. Irei colocar como ficou cada arquivo, ele será comentado, então darei apenas uma breve explicação de cada arquivo.Aviso: Não existe espaço entre as chaves, coloquei porque uso Jekyll, então os exemplos não funcionariam.head.html&lt;head&gt;  	&lt;meta charset="utf-8"&gt;  	&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;  	&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;		&lt;!-- Pega o título da página e exibe no title, se a página não tiver título, exibe o título do site --&gt;  	&lt;title&gt;{ { page.title } }&lt;/title&gt;  	  	&lt;!-- Pega a descrição da página e exibe no title, se a página não tiver descrição, exibe a descrição do site --&gt;  	&lt;meta name="description" content="{ { page.description | strip_html | strip_newlines | truncate: 160 } }"&gt;		&lt;!-- Caminho do arquivo CSS, pode ser alterado de acordo com o projeto --&gt;  	&lt;link rel="stylesheet" href="{ { "/assets/css/main.css" | prepend: site.baseurl } }"&gt;  	&lt;link rel="canonical" href="{ { page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url } }"&gt;  	&lt;!-- Caminho do Feed do blog --&gt;  	&lt;link rel="alternate" type="application/rss+xml" title="{ { site.title } }" href="{ { "/feed.xml" | prepend: site.baseurl | prepend: site.url } }"&gt;  	&lt;!-- Caminho do favicon do blog, também pode ser alterado --&gt;    &lt;link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/x-icon"&gt;		&lt;!-- Social Meta Tags: Facebook | Twitter | Google+ / Já está configurado para o blog --&gt;  	&lt;!-- Social: Facebook / Open Graph --&gt;    &lt;meta property="og:title" content="{ { page.title } }"&gt;    &lt;meta property="og:type" content="article"&gt;    &lt;meta property="og:url" content="{ { page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url } }"&gt;    &lt;meta property="og:image" content="http://mateusmedeiros.com//assets/img/image-blog.png"&gt;    &lt;meta property="og:description" content="{ { page.description | strip_html | strip_newlines | truncate: 160 } }"&gt;    &lt;meta property="og:site_name" content="{ { site.title } }"&gt;  	&lt;!-- Social: Twitter --&gt;    &lt;meta name="twitter:card" content="summary_large_image"&gt;    &lt;meta name="twitter:site" content="{ { site.author.twitter } }"&gt;    &lt;meta name="twitter:title" content="{ { site.title } }"&gt;    &lt;meta name="twitter:description" content="{ { site.description } }"&gt;    &lt;meta property="twitter:image:src" content="{ { site.url } }{ { post.image } }"&gt;    &lt;!-- Social: Google+ / Schema.org  --&gt;    &lt;meta itemprop="name" content="{ { site.title } }"/&gt;    &lt;meta itemprop="description" content="{ { site.description } }"&gt;    &lt;meta itemprop="image" content="{ { post.image | prepend: site.baseurl | prepend: site.url } }"/&gt;&lt;/head&gt;Esse arquivo não precisa de muita explicação, já está bem comentado. Ele já está com as Social Meta Tags configuradas, muito importante para o compartilhamento dos posts.header.html&lt;header class="header"&gt;  &lt;!-- Botão do Menu mobile --&gt;  &lt;button aria-expanded="false" aria-controls="menu" aria-label="Clique para abrir o menu" class="bt-menu"&gt;&lt;svg class="icon-top icon-menu"&gt;&lt;use xlink:href="#icon-menu"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/button&gt;  &lt;!-- Menu --&gt;  &lt;nav class="menu"&gt;    &lt;ul&gt;      &lt;li&gt;&lt;a href="#"&gt; Nav Item 1 &lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href="#"&gt; Nav Item 2 &lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href="#"&gt; Nav Item 3 &lt;/a&gt;&lt;/li&gt;      &lt;li&gt;&lt;a href="#"&gt; Nav Item 4 &lt;/a&gt;&lt;/li&gt;    &lt;/ul&gt;  &lt;/nav&gt;    &lt;!-- Botão da Pesquisa --&gt;  &lt;button aria-expanded="false" aria-controls="search-container" aria-label="Pesquisar no Blog" class="bt-search"&gt;&lt;svg class="icon-top icon-search"&gt;&lt;use xlink:href="#icon-search"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/button&gt;  &lt;!-- Container da Pesquisa --&gt;  &lt;div id="search-container"&gt;    &lt;!-- Barra de Pesquisa --&gt;    &lt;input type="text" id="search-input" placeholder="Pesquisar posts no blog..."&gt;    &lt;!-- Botão de fechamento do container da pesquisa --&gt;    &lt;button aria-label="Fechar Barra de Pesquisa" class="bt-close"&gt;&lt;svg class="icon-top icon-close"&gt;&lt;use xlink:href="#icon-close"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/button&gt;    &lt;!-- Lista de resultados --&gt;    &lt;ul id="results-container"&gt;&lt;/ul&gt;  &lt;/div&gt;  &lt;!-- Título do Blog --&gt;  &lt;hgroup class="title"&gt;    &lt;!-- Título Principal --&gt;    &lt;h1&gt; &lt;a href="/"&gt; { { site.title } } &lt;/a&gt; &lt;/h1&gt;      &lt;!-- Subtítulo --&gt;    &lt;h2&gt; &lt;a href="/"&gt; { { site.subtitle } } &lt;/a&gt; &lt;/h2&gt;  &lt;/hgroup&gt;  &lt;/header&gt;Esse é o arquivo do nosso header, nele temos:  Menu: ficará no topo à esquerda alinhado com o botão da pesquisa.  Pesquisa: ficará fechado, abrirá quando clicarmos no botão. Quando aberto, irá sobrepor a página inteira. Utilizaremos o plugin Simple Jekyll Searching para fazer a pesquisa dos posts.  Título: ficará abaixo do menu e centralizado, utilizaremos uma sombra para destacá-lo. Nele há 2 variáveis: o { { site.title } } e o { { site.subtitle } }, essas variáveis foram definidas no arquivo _config.yml.footer.html&lt;footer class="footer"&gt;  &lt;p&gt; &amp;copy; 2016 { { site.title } } - { { site.subtitle } } | Todos os Direitos Reservados &lt;/p&gt;  &lt;p&gt; Tutorial por &lt;a href="http://devmateusmedeiros.com.br" target="_blank" title="Ir para o meu blog"&gt; Mateus Medeiros &lt;/a&gt; &lt;/p&gt;&lt;/footer&gt;Utilizamos as mesmas variáveis que no header.html. Esse arquivo pode ser editado como você desejar.share.html&lt;section class="share"&gt;	&lt;h3&gt; Compartilhe &lt;/h3&gt;    &lt;!-- Botões de Compartilhamento --&gt;	&lt;div class="share-buttons"&gt;        &lt;!-- Twitter --&gt;		&lt;a aria-label="Compartilhe no Twitter" href="https://twitter.com/intent/tweet?text=&amp;quot;{ { page.twitter_text } }&amp;quot;%20{ { site.url } }{ { page.url } }%20via%20&amp;#64;{ { site.twitter_username } }&amp;hashtags={ {tag}},{ {tag}},"    	onclick="window.open(this.href, 'twitter-share');return false;" title="Compartilhe no Twitter"&gt;        	&lt;svg class="icon icon-twitter"&gt;&lt;use xlink:href="#icon-twitter"&gt;&lt;/use&gt;&lt;/svg&gt;    	&lt;/a&gt;                &lt;!-- Facebook --&gt;    	&lt;a aria-label="Compartilhe no Facebook" href="https://www.facebook.com/sharer/sharer.php?u={ { site.url } }{ { page.url } }"    	onclick="window.open(this.href, 'facebook-share');return false;" title="Compartilhe no Facebook"&gt;        	&lt;svg class="icon icon-facebook"&gt;&lt;use xlink:href="#icon-facebook"&gt;&lt;/use&gt;&lt;/svg&gt;    	&lt;/a&gt;                &lt;!-- Google+ --&gt;    	&lt;a aria-label="Compartilhe no Google Plus" href="https://plus.google.com/share?url={ { site.url } }{ { page.url } }"    	onclick="window.open(this.href, 'google-plus-share');return false;" title="Compartilhe no Google+"&gt;        	&lt;svg class="icon icon-google-plus"&gt;&lt;use xlink:href="#icon-google-plus"&gt;&lt;/use&gt;&lt;/svg&gt;    	&lt;/a&gt;    &lt;/div&gt;&lt;/section&gt;Criamos os botões de compartilhamento, utilizamos SVG para os ícones das redes sociais. Configuraremos os ícones SVG no arquivo svg.html.author.html&lt;section class="author"&gt;	&lt;div class="details"&gt;		&lt;!-- Imagem do autor --&gt;		&lt;img src="{ { site.author.img } }" alt="{ { site.author.name } }" class="img-author"&gt;		&lt;p&gt;&lt;b&gt; Autor &lt;/b&gt;&lt;/p&gt;		&lt;!-- Nome do autor com link para o blog do autor --&gt;		&lt;h2 class="name"&gt;			&lt;a href="{ { site.author.blog } }" target="_blank" title="Visite meu blog"&gt; { { site.author.name } } &lt;/a&gt;		&lt;/h2&gt;		&lt;!-- Descrição do autor --&gt;		&lt;p class="description"&gt;{ { site.author.bio } }&lt;/p&gt;		&lt;!-- Email do autor --&gt;        &lt;a class="email" href="mailto:{ { site.author.email } }"&gt;{  { site.author.email }  }&lt;/a&gt;        &lt;!-- Twitter do autor --&gt;        &lt;p&gt; Twitter: &lt;a href="http://twitter.com/{ { site.author.twitter } }"&gt; @{  { site.author.twitter }  }&lt;/a&gt;&lt;/p&gt;        &lt;!-- GitHub do autor --&gt;        &lt;p&gt; GitHub: &lt;a href="http://github.com/{ { site.author.github } }"&gt; {  { site.author.github }  }&lt;/a&gt;&lt;/p&gt;	&lt;/div&gt;&lt;/section&gt;Esse já está bastante comentado, ele puxará os valores das variáveis do autor definidas no _config.yml.comments.html&lt;!-- Utilizaremos o Disqus(disqus.com) para o sistema de comentários --&gt;&lt;section class="comments"&gt;    &lt;h2&gt;Comentários&lt;/h2&gt;    &lt;div id="disqus_thread"&gt;&lt;/div&gt;&lt;/section&gt;&lt;!-- Aqui vai o script fornecido pelo Disqus --&gt;Utilizaremos o Disqus para os comentários, depois farei um post ensinando como implementar ele no seu blog.svg.html&lt;svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;&lt;defs&gt;&lt;!-- Ícone do Menu --&gt;&lt;symbol id="icon-menu" viewBox="0 0 1024 1024"&gt;  &lt;title&gt;menu&lt;/title&gt;  &lt;path class="path1" d="M64 192h896v192h-896zM64 448h896v192h-896zM64 704h896v192h-896z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;!-- Ícone de Fechamento --&gt;&lt;symbol id="icon-close" viewBox="0 0 1024 1024"&gt;  &lt;title&gt;close&lt;/title&gt;  &lt;path class="path1" d="M1014.662 822.66c-0.004-0.004-0.008-0.008-0.012-0.010l-310.644-310.65 310.644-310.65c0.004-0.004 0.008-0.006 0.012-0.010 3.344-3.346 5.762-7.254 7.312-11.416 4.246-11.376 1.824-24.682-7.324-33.83l-146.746-146.746c-9.148-9.146-22.45-11.566-33.828-7.32-4.16 1.55-8.070 3.968-11.418 7.31 0 0.004-0.004 0.006-0.008 0.010l-310.648 310.652-310.648-310.65c-0.004-0.004-0.006-0.006-0.010-0.010-3.346-3.342-7.254-5.76-11.414-7.31-11.38-4.248-24.682-1.826-33.83 7.32l-146.748 146.748c-9.148 9.148-11.568 22.452-7.322 33.828 1.552 4.16 3.97 8.072 7.312 11.416 0.004 0.002 0.006 0.006 0.010 0.010l310.65 310.648-310.65 310.652c-0.002 0.004-0.006 0.006-0.008 0.010-3.342 3.346-5.76 7.254-7.314 11.414-4.248 11.376-1.826 24.682 7.322 33.83l146.748 146.746c9.15 9.148 22.452 11.568 33.83 7.322 4.16-1.552 8.070-3.97 11.416-7.312 0.002-0.004 0.006-0.006 0.010-0.010l310.648-310.65 310.648 310.65c0.004 0.002 0.008 0.006 0.012 0.008 3.348 3.344 7.254 5.762 11.414 7.314 11.378 4.246 24.684 1.826 33.828-7.322l146.746-146.748c9.148-9.148 11.57-22.454 7.324-33.83-1.552-4.16-3.97-8.068-7.314-11.414z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;!-- Ícone do Email --&gt;&lt;symbol id="icon-email" viewBox="0 0 1024 1024"&gt;  &lt;title&gt;email&lt;/title&gt;  &lt;path class="path1" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM256 256h512c9.138 0 18.004 1.962 26.144 5.662l-282.144 329.168-282.144-329.17c8.14-3.696 17.006-5.66 26.144-5.66zM192 704v-384c0-1.34 0.056-2.672 0.14-4l187.664 218.942-185.598 185.598c-1.444-5.336-2.206-10.886-2.206-16.54zM768 768h-512c-5.654 0-11.202-0.762-16.54-2.208l182.118-182.118 90.422 105.498 90.424-105.494 182.116 182.12c-5.34 1.44-10.886 2.202-16.54 2.202zM832 704c0 5.654-0.762 11.2-2.206 16.54l-185.6-185.598 187.666-218.942c0.084 1.328 0.14 2.66 0.14 4v384z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;!-- Ícone do Facebook --&gt;&lt;symbol id="icon-facebook" viewBox="0 0 1024 1024"&gt;  &lt;title&gt;facebook&lt;/title&gt;  &lt;path class="path1" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512v-384h-128v-128h128v-96c0-88.366 71.632-160 160-160h160v128h-160c-17.674 0-32 14.328-32 32v96h176l-32 128h-144v367.87c220.828-56.838 384-257.3 384-495.87 0-282.77-229.23-512-512-512z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;!-- Ícone do Twitter --&gt;&lt;symbol id="icon-twitter" viewBox="0 0 1024 1024"&gt;  &lt;title&gt;twitter&lt;/title&gt;  &lt;path class="path1" d="M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512zM766.478 381.48c0.252 5.632 0.38 11.296 0.38 16.988 0 173.51-132.070 373.588-373.584 373.588-74.15 0-143.168-21.738-201.276-58.996 10.272 1.218 20.724 1.84 31.322 1.84 61.518 0 118.134-20.992 163.072-56.21-57.458-1.054-105.948-39.020-122.658-91.184 8.018 1.532 16.244 2.36 24.704 2.36 11.976 0 23.578-1.61 34.592-4.61-60.064-12.066-105.326-65.132-105.326-128.75 0-0.554 0-1.104 0.012-1.652 17.7 9.834 37.948 15.742 59.47 16.424-35.232-23.546-58.414-63.736-58.414-109.292 0-24.064 6.476-46.62 17.78-66.010 64.76 79.44 161.51 131.712 270.634 137.19-2.238-9.612-3.4-19.632-3.4-29.924 0-72.512 58.792-131.298 131.304-131.298 37.766 0 71.892 15.944 95.842 41.462 29.908-5.886 58.008-16.814 83.38-31.862-9.804 30.662-30.624 56.394-57.732 72.644 26.56-3.174 51.866-10.232 75.412-20.674-17.594 26.328-39.854 49.454-65.514 67.966z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;!-- Ícone do Google+ --&gt;&lt;symbol id="icon-google-plus" viewBox="0 0 1024 1024"&gt;	&lt;title&gt;google-plus&lt;/title&gt;	&lt;path class="path1" d="M437.006 818.162c0 75.068-46.39 134.392-177.758 139.176-76.984-43.786-141.49-106.952-186.908-182.866 23.69-58.496 97.692-103.046 182.316-102.114 24.022 0.252 46.41 4.114 66.744 10.7 55.908 38.866 101 63.152 112.324 107.448 2.114 8.964 3.282 18.206 3.282 27.656zM512 0c-147.94 0-281.196 62.77-374.666 163.098 36.934-20.452 80.538-32.638 126.902-32.638 67.068 0 256.438 0 256.438 0l-57.304 60.14h-67.31c47.496 27.212 72.752 83.248 72.752 145.012 0 56.692-31.416 102.38-75.78 137.058-43.28 33.802-51.492 47.966-51.492 76.734 0 24.542 51.722 61.098 75.5 78.936 82.818 62.112 99.578 101.184 99.578 178.87 0 78.726-68.936 157.104-185.866 183.742 56.348 21.338 117.426 33.048 181.248 33.048 282.77 0 512-229.23 512-512s-229.23-512-512-512zM768 384v128h-64v-128h-128v-64h128v-128h64v128h128v64h-128zM365.768 339.472c11.922 90.776-27.846 149.19-96.934 147.134-69.126-2.082-134.806-65.492-146.74-156.242-11.928-90.788 34.418-160.254 103.53-158.196 69.090 2.074 128.22 76.542 140.144 167.304zM220.886 642.068c-74.68 0-138.128 25.768-182.842 63.864-24.502-59.82-38.044-125.29-38.044-193.932 0-56.766 9.256-111.368 26.312-162.396 7.374 99.442 77.352 176.192 192.97 176.192 8.514 0 16.764-0.442 24.874-1.022-7.95 15.23-13.622 32.19-13.622 49.982 0 29.97 16.488 47.070 36.868 66.894-15.402 0-30.27 0.418-46.516 0.418z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;!-- Ícone da Pesquisa --&gt;&lt;symbol id="icon-search" viewBox="0 0 1024 1024"&gt;  &lt;title&gt;search&lt;/title&gt;  &lt;path class="path1" d="M992.262 871.396l-242.552-206.294c-25.074-22.566-51.89-32.926-73.552-31.926 57.256-67.068 91.842-154.078 91.842-249.176 0-212.078-171.922-384-384-384-212.076 0-384 171.922-384 384s171.922 384 384 384c95.098 0 182.108-34.586 249.176-91.844-1 21.662 9.36 48.478 31.926 73.552l206.294 242.552c35.322 39.246 93.022 42.554 128.22 7.356s31.892-92.898-7.354-128.22zM384 640c-141.384 0-256-114.616-256-256s114.616-256 256-256 256 114.616 256 256-114.614 256-256 256z"&gt;&lt;/path&gt;&lt;/symbol&gt;&lt;/defs&gt;&lt;/svg&gt;Criamos os nossos ícones SVG, iremos estilizá-los depois com o SASS.tags.html&lt;div class="tags"&gt;  &lt;!-- Procura as tags já utilizadas e monta uma lista com os links de todas elas --&gt;  &lt;!-- Não existe espaço entre {} e % --&gt;  { % for tag in post.tags % }      &lt;a href="/tags/#"&gt;&lt;/a&gt;  { % endfor % }&lt;/div&gt;Criamos um laço for, que procurará todas as tags já utilizadas no blog e montará uma lista de posts de cada tag encontrada.ConclusãoEssa foi a primeira parte do tutorial, já temos pronto a configuração do nosso blog e a nossa pasta _includes. Na próxima parte, configuraremos a pasta _layouts e o arquivo index.html, que é a página inicial do nosso blog.Qualquer dúvida, é só comentar ou me enviar um email: mateus.sousamedeiros@gmail.comLembrando que todo o código utilizado aqui, está disponível no GitHub.Até a próxima parte!"
    } ,
  
    {
      "title"    : "Iniciando com Jekyll",
      "category" : "",
      "tags"     : "frontend, jekyll, sass",
      "url"      : "/iniciando-com-jekyll/",
      "date"     : "2016-01-13 20:53:00 +0000",
      "content"  : "IntroduçãoFala galera, como prometi que escreveria um post ensinado a usar o Jekyll, decidi não escrever apenas um post, mas uma série sobre Jekyll, e esse é o primeiro post da série. Nesse post irei ensinar o básico dessa íncrivel ferramenta.O Jekyll é um gerador de páginas estáticas, você consegue criar páginas utilizando o HTML e CSS, depois disso o Jekyll converte todo o site em arquivos estáticos, pronto para ser colocado no ar. Ele utiliza Markdown para a formatação de textos e posts, um padrão de templates chamado Liquid e YAML para as variáveis.Se quiser saber mais sobre o Jekyll e como ele funciona, basta acessar o site oficial (disponível em inglês), mas se você não souber inglês ou não entender muito bem, tem uma tradução ainda em andamento do site oficial sendo feita pela comunidade Jekyll Brasil, só acessar este link.Instalando o JekyllPara instalar o Jekyll, você precisa ter o Ruby instalado em sua máquina, caso você não tiver ele instalado, só seguir os tutoriais abaixo:  Linux (Ruby + Jekyll)  Windows (Ruby + Jekyll)No Mac, o Ruby já vem instalado.Após ter instalado o Ruby em sua máquina, abra o terminal e digite o seguinte comando:gem install jekyllCaso você queira conferir se o Jekyll foi instalado, digite o seguinte comando no terminal:jekyll -v# Jekyll 3.0.0Pronto, Jekyll instalado, vamos iniciar nosso primeiro projeto.Iniciando um ProjetoPara inicar um novo projeto, digite no terminal:jekyll new nome-do-projetoFeito isso, o Jekyll irá criar o diretório de pastas do projeto, como você pode conferir na imagem abaixo.Diretório de PastasComo vocês puderam ver, o Jekyll cria várias pastas e arquivos, vamos entender o que cada um faz:  _includes: são os arquivos com os códigos que se repetem ao longo do projeto, como o header e o footer.  _layouts: é a estrutura básica das páginas, por padrão vem 3 tipos: default para a página inicial e listagem de posts. A page para as páginas secundárias e post para as páginas de post.  _posts: são os posts que escrevemos, em geral, escrevemos em Markdown.  _sass: são os arquivos de estilização que geram o CSS, se você trabalha com Sass, o Jekyll já compila para você.  css: pasta para onde vão os arquivos gerados pelo Sass.  _config.yml: arquivo de configuração do seu blog, onde você colocará os dados referentes ao seu blog.  about.md: arquivo do tipo page escrito em markdown, que gerencia a página /about.  feed.xml: arquivo que gera o feed do seu blog, é importante para as pessoas conseguirem facilmente seguir seu blog.  index.html: a página inicial do seu blog.Front-MatterO Jekyll utiliza o YAML para guardar as informações. o Front-Matter deve ser a primeira coisa escrita no seu arquivo. As informações devem ficar entre o par de três traços ---. A sintaxe dele é a seguinte:---layout: posttitle: Meu primeiro post com Jekyll---Colocamos a variável seguida de dois pontos e o valor dela ou conjunto de valores, por exemplo:layout: posttitle: Meu primeiro post com Jekylldate:   2016-01-13 18:00:00 -0300author: Mateus Medeirosdescription: Meu primeiro post com o gerador de páginas estáticas: Jekyll.tags: - frontend- jekyllVariáveisNo Jekyll, você pode usar variáveis pré-definidas ou criar suas próprias variáveis. Existem três tipos de variáveis: as variáveis globais, variáveis do site e variáveis da página. Vamos aprender algumas:Variáveis Globais  layout: indica qual modelo de layout você irá utilizar na página, por exemplo: post.  permalink: define como será criado o link da página.  category ou categories: define a categoria ou conjunto de categorias para o post.  tags: define o conjunto de tags utilizadas no post.Variáveis do Site  site.posts: lista de todos os posts no site.  site.pages: lista de todas as páginas no site.  site.tags.TAG: lista de todos os posts daquela tag.  site.categories.CATEGORIA: lista de todos os posts daquela categoria.Variáveis da Página  page.title: título da página.  page.date: data da página, com a estrutura YYYY-MM-DD HH:MM:SS +/-TTTT.  page.content: conteúdo da página.  page.url: link da página.  page.tags: mostra as tags utilizadas na página.Mais variáveis você pode encontrar na documentação.Utilizando as variáveisDepois de criadas, vamos utilizar as variáveis. A sua sintaxe é igual a de mustache, você abre duas chaves, coloca o nome da variável e fecha as chaves, ficando assim: { { variável } }.Aviso: Não existe espaço entre as chaves, coloquei pois como uso o jekyll, o exemplo não iria funcionar.&lt;!-- Variável Global --&gt;&lt;title&gt; { { title } } &lt;/title&gt;&lt;!-- Variável da Página --&gt;&lt;time&gt; { { page.date } } &lt;/time&gt;&lt;!-- Variável do Post --&gt;&lt;h1&gt; { { post.title } } &lt;/h1&gt;Configurando seu blogComo falei antes o arquivo _config.yml é o responsável pela configuração do seu blog, agora vamos aprender como configurá-lo. Abra o arquivo _config.yml no seu editor preferido e vamos lá.Abrindo o arquivo, ele estará por padrão assim:# Welcome to Jekyll!## This config file is meant for settings that affect your whole blog, values# which you are expected to set up once and rarely need to edit after that.# For technical reasons, this file is *NOT* reloaded automatically when you use# 'jekyll serve'. If you change this file, please restart the server process.# Site settingstitle: Your awesome titleemail: your-email@domain.comdescription: &gt; # this means to ignore newlines until "baseurl:"  Write an awesome description for your new site here. You can edit this  line in _config.yml. It will appear in your document head meta (for  Google search results) and in your feed.xml site description.baseurl: "" # the subpath of your site, e.g. /blogurl: "http://yourdomain.com" # the base hostname &amp; protocol for your sitetwitter_username: jekyllrbgithub_username:  jekyll# Build settingsmarkdown: kramdownVamos entender o que cada variável faz:  title: é o título do seu blog.  email: seu email para contato, é opcional.  description: é a descrição do seu blog, muito importante para SEO, uma boa descrição é essencial para seu posicionamento no Google.  baseurl: é a subpasta do seu site, caso você queira que seu blog seja acessado por um outro endereço, como por exemplo http://seusite.com/blog  url: é o domínio do seu blog, por exemplo http://seusite.com  twitter_username: seu nome de usuário no Twitter, é opcional.  github_username: seu nome de usuário no GitHub, também é opcional.  markdown: tipo de Markdown utilizado no seu projeto.Essas são as variáveis que já vem inclusas no jekyll. Mais opções você pode encontrar na documentação do jekyll.Gerando um servidorVamos aprender agora como gerar um servidor para o seu ambiente de produção.No terminal, digite o seguinte comando:# Entrar na pasta do projetocd nome-do-projeto# Gerar o servidorjekyll serveCom esse comando, o jekyll irá gerar um servidor - por padrão, na porta 4000 - e ficará assistindo os arquivos. Para acessar seu projeto, entre no endereço: http://localhost:4000/ ou http://127.0.0.1:4000/.Gerando os arquivos estáticosTerminado o desenvolvimento do projeto, você pode gerar os arquivos estáticos do seu blog com o comando:jekyll buildCom esse comando o jekyll irá gerar a pasta _site, que contém os arquivos estáticos do seu blog.Hospedando seu blog no GitHub PagesCom o Jekyll, você pode facimente hospedar seu blog no GitHub Pages.  Entre em sua conta no GitHub, caso não tenha, crie uma.  Crie um repositório com o seguinte nome: seunomedeusuario.github.io  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 projetogit init# Adicionar todos os arquivosgit add .# Commitar os arquivosgit commit -m "Commit Inicial"# Adicionar o repositóriogit remote add origin https://github.com/seunomedeusuario/seunomedeusuario.github.io.git# Subir o seu bloggit push -u origin masterPronto, 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.ioSe você quiser adicionar um domínio próprio no seu blog, siga esse passo-a-passo do Willian Justen.ConclusãoEsse foi o primeiro post da série sobre Jekyll, ensinado apenas o básico do Jekyll, se você quiser aprender mais detalhadamente, acesse a documentação do Jekyll. Em breve, pretendo lançar um passo-a-passo de como criar um blog com Jekyll, aguarde!Qualquer dúvida que aparecer, é só comentar ou me enviar um e-mail: mateus.sousamedeiros@gmail.com.Até a próxima!"
    } ,
  
    {
      "title"    : "Metas para 2016",
      "category" : "",
      "tags"     : "frontend, metas",
      "url"      : "/metas-2016/",
      "date"     : "2016-01-04 14:33:00 +0000",
      "content"  : "Quero começar esse meu primeiro post de 2016 desejando um feliz ano novo a todos. Nesse post irei lançar algumas metas pessoais para esse ano com o objetivo de crescer mais na área do Front End.Segue a lista:  Criar um projeto open source  Criar temas para Jekyll  Aprender Less e Stylus  Me aprofundar no JavaScript  Aprender Angular e React  Contribuir em projetos open source  Postar mais (Esse não podia faltar)Essas são minhas principais metas para 2016, possa ser que ao longo do ano, surjam mais algumas.No fim do ano, irei postar o resultado das metas, espero que eu consiga cumprir todas, mas é claro com o foco de crescer mais na área do Front End.E você tem alguma meta para 2016? Comenta aí!"
    } ,
  
    {
      "title"    : "Dica do Dia #2 - Livros Casa do Código",
      "category" : "",
      "tags"     : "frontend, livro, dica",
      "url"      : "/dica-do-dia-2-livros-casa-do-codigo/",
      "date"     : "2015-11-25 01:33:00 +0000",
      "content"  : "IntroduçãoFala galera, fiquei um tempo sem postar aqui no blog, mas hoje estou voltando para dar continuidade à série Dica do Dia. Hoje irei falar sobre os livros maneiros da editora Casa do Código.Livros para aprender a programar com ótimo custo-benefícioNo site da Casa do Código, você encontra livros sobre diversos assuntos: Front End, Web, Mobile, Games, Java, Agile entre outros.Os livros são ótimos e baratos, a versão E-book custa R$ 29,90, a versão Impressa, R$ 59,90, enquanto as duas versões saem por R$ 69,90. (Esses são os valores da promoção, acesso em 24/11/2015).ConclusãoJá comprei três livros na Casa do Código, são eles: Guia Front-End, HTML5 e CSS3 e Dominando JavaScript com jQuery e hoje estou comprando mais dois: A Web Mobile e CSS Eficiente. Recomendo bastante esses livros que já comprei, foram escritos muito bem e você aprende rápido com eles.E você tem alguma dica de livro? Já comprou livros na Casa do Código? Comente!"
    } ,
  
    {
      "title"    : "Dica do Dia #1 - Livro Guia Front End",
      "category" : "",
      "tags"     : "frontend, livro, dica",
      "url"      : "/dica-do-dia-1-livro-guia-frontend/",
      "date"     : "2015-11-20 03:01:00 +0000",
      "content"  : "IntroduçãoGalera, estou iniciando agora uma série chamada Dica do Dia, onde darei um dica rápida para vocês, seja sobre um livro, um post que achei interessante ou um tutorial. Pretendo postar bastante coisa por aqui, por isso criei essa página onde estarão todos os posts dessa série.Nesse primeiro post da série, irei falar do livro Guia Front-End: O caminho das pedras para ser um dev Front-End do Diego Eis, criador do site Tableless.ReviewO livro é fantástico, para você que está começando na área é ótimo, pois ele traz as tecnologias e técnicas que você precisa estudar para ser tornar um bom Desenvolvedor Front-End, desse jeito você não perde tempo com assuntos que não são tão importantes para sua carreira.Se você se interessou neste livro, pode comprar acessando este link da Casa do Código, editora do livro. O E-book custa R$ 29,90 e a versão impressa, R$ 69,90; também tem a opção de comprar as duas versões por R$ 79,90. (Esses são os valores da promoção, acesso em 18/09/2016).Eu recomendo o livro, não deixe essa oportunidade passar. Para quem comprar, faça uma boa leitura!"
    } ,
  
    {
      "title"    : "Olá Mundo",
      "category" : "",
      "tags"     : "frontend, jekyll, sass, gulp, bower, svg",
      "url"      : "/ola-mundo/",
      "date"     : "2015-11-17 00:10:00 +0000",
      "content"  : "IntroduçãoAntes de começar esse primeiro post, deixa eu me apresentar, né?Meu nome é Mateus de Sousa Medeiros, tenho 15 anos e sou Desenvolvedor Front End. Comecei esse ano à aprender as maravilhas desse mundo do Desenvolvimento Web, especificamente na área de Front End. Sou apaixonado pelo que faço e o que me deixa mais feliz ainda, é a facilidade em aprender cada dia mais.Criei esse blog, primeiramente para testar o Jekyll e SASS, e segundo para ter um lugar onde posso compartilhar meu conhecimento. Pretendo escrever bastante coisa sobre a área de Desenvolvimento Web, com foco em Front End. Também darei dicas de novas tecnologias que estou utilizando, e técnicas de estudo que estão me auxiliando.Qualquer dúvida que aparecer, não hesite em me mandar um e-mail ou comentar aqui.Tecnologias utilizadas no BlogJekyllO Jekyll é um gerador de páginas estáticas, perfeito para criar um blog sem a necessidade de um banco de dados. Escolhi ele por ser de fácil utilização e também pela facilidade de fazer o deploy no GitHub Pages ❤. Outro fator que foi de grande peso para minha escolha foi a sua utilização por grande parte dos Devs que eu sigo, o que facilitou na hora de criar o meu blog.Se você ficou interessado por essa tecnologia visite o site do Jekyll ou também leia esse post do Willian Justen onde ele ensina algumas coisas sobre o Jekyll. Em breve farei um post explicando como utilizar essa incrível ferramenta. Aguarde!SASSPré-processadores são incríveis ❤. O SASS foi o primeiro pré-processador de que eu ouvi falar, escolhi ele por ser de fácil aprendizado e também pela sua ampla comunidade. Abaixo segue um exemplo de um código escrito em CSS e depois ele escrito em .scss (formato de arquivo do SASS)..elemento {  background: #000000;  color: #ffffff;}.elemento-2 {  background: #000000;}Suponha que você queira alterar a cor do background dos dois elementos, você teria que alterar primeiro em .elemento e depois em .elemento-2. É aí que entra o SASS, esse mesmo código pode ser escrito assim em .scss:$color-1: #000000;.elemento {  background: $color-1;  color: #ffffff;}.elemento-2 {  background: $color-1;}Na primeira linha eu criei um variável $color-1 e passei para ela o valor hexadecimal da cor preta: #000000, depois passei essa variável como o valor dos background dos elementos .elemento e .elemento-2. Depois se eu quiser alterar essa cor para azul, basta trocar o valor da variável $color-1, assim:$color-1: #0015ff;.elemento {  background: $color-1;  color: #ffffff;}.elemento-2 {  background: $color-1;}Esse foi um exemplo básico de como pré-processadores agilizam o desenvolvimento, muitas outras coisas podem serem feitas. Se você ficou interessado em aprender sobre esse pré-processador recomendo esses posts no site do Tableless.SVGDesde que comecei a aprender Desenvolvimento Web, sempre ouvi falar do SVG, mas nunca parei para pesquisar sobre isso. Eu acompanho blogs de alguns devs, quando estava lendo alguns posts no blog do Willian Justen, achei um sobre SVG e parei para ler. Fiquei encantado com o SVG e resolvi utilizá-lo, os ícones das redes sociais e os botões de compartilhamento desse blog foram feitos em SVG.Se você quiser aprender mais sobre SVG, recomendo esses tutoriais do Willian Justen.BowerSempre utilizo alguma biblioteca ou um framework nos meus projetos, e atualizá-los na mão é um trabalho cansativo. Eu precisava de alguma ferramenta para automatizar esse processo, foi aí que eu descobri o Bower. O Bower é um gerenciador de dependências front end, ou seja você conseguirá facilmente gerenciar as dependências utilizadas no seu projeto. Isso facilita na hora de atualizar alguma biblioteca ou framework.Se tiver interesse em aprender mais sobre essa ferramenta, recomendo esse dois posts: Bower na prática e Bower: O guia/tutorial definitivo.GulpO Gulp é meu automatizador de tarefas favoritos, ele é rápido e de fácil aprendizado. Nesse blog, utilizei os seguintes plugins:  gulp-uglify - Para minificar meus arquivos JavaScript.  gulp-rename - Para renomear os arquivos minificados.  gulp-image-optimization - Para otimizar minhas imagens.E meu arquivo gulpfile.js ficou assim:var gulp = require('gulp');var uglify = require('gulp-uglify');var rename = require("gulp-rename");var imageop = require('gulp-image-optimization');// Minificar JSgulp.task('uglify', function() {  return gulp.src('assets/js/script.js')    .pipe(uglify())    .pipe(rename({            suffix: '.min'        }))    .pipe(gulp.dest('assets/js'));});// Compactar Imagens gulp.task('images', function(cb) {    gulp.src(['assets/img/*.png','assets/img/*.jpg','assets/img/*.gif','assets/img/*.jpeg']).pipe(imageop({        optimizationLevel: 5,        progressive: true,        interlaced: true    })).pipe(gulp.dest('assets/img')).on('end', cb).on('error', cb);});Se quiser aprender mais sobre o Gulp, recomendo esse post.ConclusãoEsse foi um post para apresentar meu blog e explicar sobre as tecnologias que utilizei nele. Essa foi uma escolha pessoal para um projeto específico, não é uma combinação ideal para todos os projetos. Se tiver alguma dúvida ou sugestão, comente aqui ou envie um e-mail para mateus.sousamedeiros@gmail.com. Todo feedback é bem vindo. Assine meu RSS e não perca nenhum post.Até mais!"
    } 
  
  ,
  
   {
     
        "title"    : "Confirmação de envio de e-mail",
        "category" : "",
        "tags"     : "",
        "url"      : "/confirmacao-email/",
        "date"     : "",
        "content"  : "   Parabéns! Seu e-mail enviado com sucesso!       Voltar à página inicial        Enviar outra mensagem  "
     
   } ,
  
   {
     
        "title"    : "Contato",
        "category" : "",
        "tags"     : "",
        "url"      : "/contato/",
        "date"     : "",
        "content"  : " Quer falar comigo? Envie uma mensagem! Preencha o formulário abaixo:             Nome:                        E-mail:                        Assunto:                    Mensagem            Dúvida            Serviço            Outro                        Mensagem:                        Enviar        "
     
   } ,
  
   {
     
   } ,
  
   {
     
        "title"    : "Blog",
        "category" : "",
        "tags"     : "",
        "url"      : "/blog/",
        "date"     : "",
        "content"  : "                    Dica do Dia #3 - Links Front End            Postado em: 25 Feb, 2017      Dica do dia 3 - Links para se manter atualizado no Front End       Leia mais...                        Começando com Sass            Postado em: 30 Jan, 2017      Sass é um íncrivel pré-processador CSS, aprenda a usá-lo em seus projetos.       Leia mais...                        Automatize suas tarefas com Gulp            Postado em: 27 Jan, 2017      Aprenda a usar o Gulp para automatizar suas tarefas.       Leia mais...                        Blade Theme - Meu primeiro tema para Jekyll            Postado em: 26 Jan, 2017      Tema para blogs Jekyll, ideal para desenvolvedores.       Leia mais...                        Criando um blog com Jekyll - Parte Final            Postado em: 24 Jan, 2016      Parte final do tutorial de como criar um blog com Jekyll.       Leia mais...                          Anterior                              1                                2                                3                            Próxima            "
     
   } ,
  
   {
     
   } ,
  
   {
     
   } ,
  
   {
     
        "title"    : "Portfólio",
        "category" : "",
        "tags"     : "",
        "url"      : "/portfolio/",
        "date"     : "",
        "content"  : "                  Bolhas de Sabão      Desenvolvimento do Template para Blogger, utilizando HTML, XML, CSS e JavaScript (jQuery)      Conferir o site      "
     
   } ,
  
   {
     
        "title"    : "Projetos",
        "category" : "",
        "tags"     : "",
        "url"      : "/projetos/",
        "date"     : "",
        "content"  : "                  Lion      Um boilerplate simples para iniciar projetos de acordo com meu workflow usando Gulp      Conferir projeto                    Blade Theme      Um tema simples para blogs Jekyll      Conferir projeto      "
     
   } ,
  
   {
     
   } ,
  
   {
     
   } ,
  
   {
     
        "title"    : "Séries",
        "category" : "",
        "tags"     : "",
        "url"      : "/series/",
        "date"     : "",
        "content"  : "			Dica do Dia    	        	        	            	            	            	Dica do Dia #1 - Livro Guia Front End20 Nov, 2015            	            	        	            	            	            	Dica do Dia #2 - Livros Casa do Código25 Nov, 2015            	            	        	            	            	            	Dica do Dia #3 - Links Front End25 Feb, 2017            	            	        	        	        	    	    			Jekyll    	        	        	            	            	            	Iniciando com Jekyll13 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 115 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 217 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 320 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte Final24 Jan, 2016            	            	        	            	            	            	Blade Theme - Meu primeiro tema para Jekyll26 Jan, 2017            	            	        	        	        	    	    			Automação de Tarefas    	        	        	            	            	            	Automatize suas tarefas com Gulp27 Jan, 2017            	            	        	        	        	    	    			Pré-processadores    	        	        	            	            	            	Começando com Sass30 Jan, 2017            	            	        	        	        	    	    "
     
   } ,
  
   {
     
        "title"    : "Sobre Mim",
        "category" : "",
        "tags"     : "",
        "url"      : "/sobre/",
        "date"     : "",
        "content"  : "  Me chamo Mateus de Sousa Medeiros, tenho 16 anos e sou Desenvolvedor Front End. Comecei no ano de 2015 à aprender as maravilhas desse mundo do Desenvolvimento Web, especificamente na área de Front End. Sou apaixonado pelo que faço e o que me deixa mais feliz ainda, é a facilidade em aprender cada dia mais.  No meu workflow costumo utilizar HTML, CSS (SASS) e JavaScript (jQuery), além do Gulp como Task Runner e Git para versionar meus projetos.   Habilidades                       HTML        CSS        JavaScript        SASS        jQuery        SEO                            Gulp        Git        Bower        Jekyll        WordPress        Design Responsivo               Contato   Quer falar comigo? Envie um e-mail para mateus.sousamedeiros@gmail.com"
     
   } ,
  
   {
     
        "title"    : "Tags",
        "category" : "",
        "tags"     : "",
        "url"      : "/tags/",
        "date"     : "",
        "content"  : " Procure os assuntos pelas tags usadas no blog               frontend            jekyll            sass            gulp            bower            svg            livro            dica            metas            javascript            temas            automatizadores            pre-processadores            links      	    	frontend    	        	        	            	            	            	Olá Mundo17 Nov, 2015            	            	        	            	            	            	Dica do Dia #1 - Livro Guia Front End20 Nov, 2015            	            	        	            	            	            	Dica do Dia #2 - Livros Casa do Código25 Nov, 2015            	            	        	            	            	            	Metas para 201604 Jan, 2016            	            	        	            	            	            	Iniciando com Jekyll13 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 115 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 217 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 320 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte Final24 Jan, 2016            	            	        	            	            	            	Blade Theme - Meu primeiro tema para Jekyll26 Jan, 2017            	            	        	            	            	            	Automatize suas tarefas com Gulp27 Jan, 2017            	            	        	            	            	            	Começando com Sass30 Jan, 2017            	            	        	            	            	            	Dica do Dia #3 - Links Front End25 Feb, 2017            	            	        	        	        	    	    	    	jekyll    	        	        	            	            	            	Olá Mundo17 Nov, 2015            	            	        	            	            	            	Iniciando com Jekyll13 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 115 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 217 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 320 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte Final24 Jan, 2016            	            	        	            	            	            	Blade Theme - Meu primeiro tema para Jekyll26 Jan, 2017            	            	        	        	        	    	    	    	sass    	        	        	            	            	            	Olá Mundo17 Nov, 2015            	            	        	            	            	            	Iniciando com Jekyll13 Jan, 2016            	            	        	            	            	            	Criando um blog com Jekyll - Parte 320 Jan, 2016            	            	        	            	            	            	Começando com Sass30 Jan, 2017            	            	        	        	        	    	    	    	gulp    	        	        	            	            	            	Olá Mundo17 Nov, 2015            	            	        	            	            	            	Automatize suas tarefas com Gulp27 Jan, 2017            	            	        	        	        	    	    	    	bower    	        	        	            	            	            	Olá Mundo17 Nov, 2015            	            	        	        	        	    	    	    	svg    	        	        	            	            	            	Olá Mundo17 Nov, 2015            	            	        	        	        	    	    	    	livro    	        	        	            	            	            	Dica do Dia #1 - Livro Guia Front End20 Nov, 2015            	            	        	            	            	            	Dica do Dia #2 - Livros Casa do Código25 Nov, 2015            	            	        	        	        	    	    	    	dica    	        	        	            	            	            	Dica do Dia #1 - Livro Guia Front End20 Nov, 2015            	            	        	            	            	            	Dica do Dia #2 - Livros Casa do Código25 Nov, 2015            	            	        	            	            	            	Dica do Dia #3 - Links Front End25 Feb, 2017            	            	        	        	        	    	    	    	metas    	        	        	            	            	            	Metas para 201604 Jan, 2016            	            	        	        	        	    	    	    	javascript    	        	        	            	            	            	Criando um blog com Jekyll - Parte 320 Jan, 2016            	            	        	        	        	    	    	    	temas    	        	        	            	            	            	Blade Theme - Meu primeiro tema para Jekyll26 Jan, 2017            	            	        	        	        	    	    	    	automatizadores    	        	        	            	            	            	Automatize suas tarefas com Gulp27 Jan, 2017            	            	        	        	        	    	    	    	pre-processadores    	        	        	            	            	            	Começando com Sass30 Jan, 2017            	            	        	        	        	    	    	    	links    	        	        	            	            	            	Dica do Dia #3 - Links Front End25 Feb, 2017            	            	        	        	        	    	    "
     
   } ,
  
   {
     
   } ,
  
   {
     
        "title"    : "jQuery",
        "category" : "",
        "tags"     : "",
        "url"      : "/assets/components/jquery/",
        "date"     : "",
        "content"  : "jQuery  jQuery is a fast, small, and feature-rich JavaScript library.For information on how to get started and how to use jQuery, please see jQuery’s documentation.For source files and issues, please visit the jQuery repo.Including jQueryBelow are some of the most common ways to include jQuery.BrowserScript tag&lt;script src="https://code.jquery.com/jquery-2.2.0.min.js"&gt;&lt;/script&gt;BabelBabel is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.import $ from "jquery";Browserify/WebpackThere are several ways to use Browserify and Webpack. For more information on using these tools, please refer to the corresponding project’s documention. In the script, including jQuery will usually look like this…var $ = require("jquery");AMD (Asynchronous Module Definition)AMD is a module format built for the browser. For more information, we recommend require.js’ documentation.define(["jquery"], function($) {});NodeTo include jQuery in Node, first install with npm.npm install jqueryFor jQuery to work in Node, a window with a document is required. Since no such window exists natively in Node, one can be mocked by tools such as jsdom. This can be useful for testing purposes.require("jsdom").env("", function(err, window) {	if (err) {		console.error(err);		return;	}	var $ = require("jquery")(window);});"
     
   } ,
  
   {
     
   } ,
  
   {
     
   } ,
  
   {
     
        "title"    : "Blog",
        "category" : "",
        "tags"     : "",
        "url"      : "/blog/page/2/",
        "date"     : "",
        "content"  : "  {% for post in paginator.posts %}                  {{ post.title }}            Postado em: {{ post.date | date: "%-d %b, %Y" }}      {{ post.description }}       Leia mais...      {% endfor %}  {% if paginator.total_pages > 1 %}          {% if paginator.previous_page %}        Anterior      {% else %}        Anterior      {% endif %}      {% for page in (1..paginator.total_pages) %}        {% if page == paginator.page %}          {{ page }}        {% elsif page == 1 %}          {{ page }}        {% else %}          {{ page }}        {% endif %}      {% endfor %}      {% if paginator.next_page %}        Próxima      {% else %}        Próxima      {% endif %}      {% endif %}"
     
   } ,
  
   {
     
        "title"    : "Blog",
        "category" : "",
        "tags"     : "",
        "url"      : "/blog/page/3/",
        "date"     : "",
        "content"  : "  {% for post in paginator.posts %}                  {{ post.title }}            Postado em: {{ post.date | date: "%-d %b, %Y" }}      {{ post.description }}       Leia mais...      {% endfor %}  {% if paginator.total_pages > 1 %}          {% if paginator.previous_page %}        Anterior      {% else %}        Anterior      {% endif %}      {% for page in (1..paginator.total_pages) %}        {% if page == paginator.page %}          {{ page }}        {% elsif page == 1 %}          {{ page }}        {% else %}          {{ page }}        {% endif %}      {% endfor %}      {% if paginator.next_page %}        Próxima      {% else %}        Próxima      {% endif %}      {% endif %}"
     
   } 
  
]

If search isn’t working due to invalid JSON

  • There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use remove_chars as a filter.

For example: in search.json, replace

"content"  : "Simple-Jekyll-Search====================[![Build Status](https://travis-ci.org/christian-fei/Simple-Jekyll-Search.svg?branch=master)](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)A JavaScript library to add search functionality to any Jekyll blog.Find it on [npmjs.com](https://www.npmjs.com/package/simple-jekyll-search)---idea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)---### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)# Install```bower install --save simple-jekyll-search# ornpm install --save simple-jekyll-search```# Getting startedPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.This file will be used as a small data source to perform the searches on the client side:```------[  {% for post in site.posts %}    {      "title"    : "{{ post.title | escape }}",      "category" : "{{ post.category }}",      "tags"     : "{{ post.tags | join: ', ' }}",      "url"      : "{{ site.baseurl }}{{ post.url }}",      "date"     : "{{ post.date }}"    } {% unless forloop.last %},{% endunless %}  {% endfor %}]```You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)For example in  **_layouts/default.html**:``````# ConfigurationCustomize SimpleJekyllSearch by passing in your configuration options:```SimpleJekyllSearch({  searchInput: document.getElementById('search-input'),  resultsContainer: document.getElementById('results-container'),  json: '/search.json',})```#### searchInput (Element) [required]The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.#### resultsContainer (Element) [required]The container element in which the search results should be rendered in. Typically an ``.#### json (String|JSON) [required]You can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.#### searchResultTemplate (String) [optional]The template of a single rendered search result.The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.E.g.The template```{title}```will render to the following```Welcome to Jekyll!```If the `search.json` contains this data```[    {      "title"    : "Welcome to Jekyll!",      "category" : "",      "tags"     : "",      "url"      : "/jekyll/update/2014/11/01/welcome-to-jekyll.html",      "date"     : "2014-11-01 21:07:22 +0100"    }]```#### templateMiddleware (Function) [optional]A function that will be called whenever a match in the template is found.It gets passed the current property name, property value, and the template.If the function returns a non-undefined value, it gets replaced in the template.This can be potentially useful for manipulating URLs etc.Example:```SimpleJekyllSearch({  ...  middleware: function(prop, value, template){    if( prop === 'bar' ){      return value.replace(/^\//, '')    }  }  ...})```See the [tests](src/Templater.test.js) for an in-depth code example#### noResultsText (String) [optional]The HTML that will be shown if the query didn't match anything.#### limit (Number) [optional]You can limit the number of posts rendered on the page.#### fuzzy (Boolean) [optional]Enable fuzzy search to allow less restrictive matching.#### exclude (Array) [optional]Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).## Enabling full-text searchReplace 'search.json' with the following code:```---layout: null---[  {% for post in site.posts %}    {      "title"    : "{{ post.title | escape }}",      "category" : "{{ post.category }}",      "tags"     : "{{ post.tags | join: ', ' }}",      "url"      : "{{ site.baseurl }}{{ post.url }}",      "date"     : "{{ post.date }}",      "content"  : "{{ post.content | strip_html | strip_newlines }}"    } {% unless forloop.last %},{% endunless %}  {% endfor %}  ,  {% for page in site.pages %}   {     {% if page.title != nil %}        "title"    : "{{ page.title | escape }}",        "category" : "{{ page.category }}",        "tags"     : "{{ page.tags | join: ', ' }}",        "url"      : "{{ site.baseurl }}{{ page.url }}",        "date"     : "{{ page.date }}",        "content"  : "{{ page.content | strip_html | strip_newlines }}"     {% endif %}   } {% unless forloop.last %},{% endunless %}  {% endfor %}]```## If search isn't working due to invalid JSON- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.For example: in search.json, replace```"content"  : "{{ page.content | strip_html | strip_newlines }}"```with```"content"  : "{{ page.content | strip_html | strip_newlines | remove_chars | escape }}"```If this doesn't work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:```"content"   : {{ page.content | jsonify }}```**Note: you don't need to use quotes ' " ' in this since ```jsonify``` automatically inserts them.**##Browser supportBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)# Dev setup- `npm install` the dependencies.- `gulp watch` during development- `npm test` or `npm run test-watch` to run the unit tests"

with

"content"  : "Simple-Jekyll-Search====================[![Build Status](https://travis-ci.org/christian-fei/Simple-Jekyll-Search.svg?branch=master)](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)A JavaScript library to add search functionality to any Jekyll blog.Find it on [npmjs.com](https://www.npmjs.com/package/simple-jekyll-search)---idea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)---### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)# Install```bower install --save simple-jekyll-search# ornpm install --save simple-jekyll-search```# Getting startedPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.This file will be used as a small data source to perform the searches on the client side:```------[  {% for post in site.posts %}    {      &quot;title&quot;    : &quot;{{ post.title | escape }}&quot;,      &quot;category&quot; : &quot;{{ post.category }}&quot;,      &quot;tags&quot;     : &quot;{{ post.tags | join: &#39;, &#39; }}&quot;,      &quot;url&quot;      : &quot;{{ site.baseurl }}{{ post.url }}&quot;,      &quot;date&quot;     : &quot;{{ post.date }}&quot;    } {% unless forloop.last %},{% endunless %}  {% endfor %}]```You need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)For example in  **_layouts/default.html**:``````# ConfigurationCustomize SimpleJekyllSearch by passing in your configuration options:```SimpleJekyllSearch({  searchInput: document.getElementById(&#39;search-input&#39;),  resultsContainer: document.getElementById(&#39;results-container&#39;),  json: &#39;/search.json&#39;,})```#### searchInput (Element) [required]The input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.#### resultsContainer (Element) [required]The container element in which the search results should be rendered in. Typically an ``.#### json (String|JSON) [required]You can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.#### searchResultTemplate (String) [optional]The template of a single rendered search result.The templating syntax is very simple: You just enclose the properties you want to replace with curly braces.E.g.The template```{title}```will render to the following```Welcome to Jekyll!```If the `search.json` contains this data```[    {      &quot;title&quot;    : &quot;Welcome to Jekyll!&quot;,      &quot;category&quot; : &quot;&quot;,      &quot;tags&quot;     : &quot;&quot;,      &quot;url&quot;      : &quot;/jekyll/update/2014/11/01/welcome-to-jekyll.html&quot;,      &quot;date&quot;     : &quot;2014-11-01 21:07:22 +0100&quot;    }]```#### templateMiddleware (Function) [optional]A function that will be called whenever a match in the template is found.It gets passed the current property name, property value, and the template.If the function returns a non-undefined value, it gets replaced in the template.This can be potentially useful for manipulating URLs etc.Example:```SimpleJekyllSearch({  ...  middleware: function(prop, value, template){    if( prop === &#39;bar&#39; ){      return value.replace(/^\//, &#39;&#39;)    }  }  ...})```See the [tests](src/Templater.test.js) for an in-depth code example#### noResultsText (String) [optional]The HTML that will be shown if the query didn&#39;t match anything.#### limit (Number) [optional]You can limit the number of posts rendered on the page.#### fuzzy (Boolean) [optional]Enable fuzzy search to allow less restrictive matching.#### exclude (Array) [optional]Pass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).## Enabling full-text searchReplace &#39;search.json&#39; with the following code:```---layout: null---[  {% for post in site.posts %}    {      &quot;title&quot;    : &quot;{{ post.title | escape }}&quot;,      &quot;category&quot; : &quot;{{ post.category }}&quot;,      &quot;tags&quot;     : &quot;{{ post.tags | join: &#39;, &#39; }}&quot;,      &quot;url&quot;      : &quot;{{ site.baseurl }}{{ post.url }}&quot;,      &quot;date&quot;     : &quot;{{ post.date }}&quot;,      &quot;content&quot;  : &quot;{{ post.content | strip_html | strip_newlines }}&quot;    } {% unless forloop.last %},{% endunless %}  {% endfor %}  ,  {% for page in site.pages %}   {     {% if page.title != nil %}        &quot;title&quot;    : &quot;{{ page.title | escape }}&quot;,        &quot;category&quot; : &quot;{{ page.category }}&quot;,        &quot;tags&quot;     : &quot;{{ page.tags | join: &#39;, &#39; }}&quot;,        &quot;url&quot;      : &quot;{{ site.baseurl }}{{ page.url }}&quot;,        &quot;date&quot;     : &quot;{{ page.date }}&quot;,        &quot;content&quot;  : &quot;{{ page.content | strip_html | strip_newlines }}&quot;     {% endif %}   } {% unless forloop.last %},{% endunless %}  {% endfor %}]```## If search isn&#39;t working due to invalid JSON- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.For example: in search.json, replace```&quot;content&quot;  : &quot;{{ page.content | strip_html | strip_newlines }}&quot;```with```&quot;content&quot;  : &quot;{{ page.content | strip_html | strip_newlines | remove_chars | escape }}&quot;```If this doesn&#39;t work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:```&quot;content&quot;   : {{ page.content | jsonify }}```**Note: you don&#39;t need to use quotes &#39; &quot; &#39; in this since ```jsonify``` automatically inserts them.**##Browser supportBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)# Dev setup- `npm install` the dependencies.- `gulp watch` during development- `npm test` or `npm run test-watch` to run the unit tests"

If this doesn’t work when using Github pages you can try jsonify to make sure the content is json compatible:

"content"   : "Simple-Jekyll-Search\n====================\n\n[![Build Status](https://travis-ci.org/christian-fei/Simple-Jekyll-Search.svg?branch=master)](https://travis-ci.org/christian-fei/Simple-Jekyll-Search)\n\nA JavaScript library to add search functionality to any Jekyll blog.\n\nFind it on [npmjs.com](https://www.npmjs.com/package/simple-jekyll-search)\n\n---\n\nidea from this [blog post](https://alexpearce.me/2012/04/simple-jekyll-searching/#disqus_thread)\n\n---\n\n\n\n### Promotion: check out [Pomodoro.cc](https://pomodoro.cc/)\n\n\n# [Demo](http://christian-fei.github.io/Simple-Jekyll-Search/)\n\n\n\n\n# Install\n\n```\nbower install --save simple-jekyll-search\n# or\nnpm install --save simple-jekyll-search\n```\n\n\n\n\n# Getting started\n\nPlace the following code in a file called `search.json` in the **root** of your Jekyll blog.\n\nThis file will be used as a small data source to perform the searches on the client side:\n\n```\n---\n---\n[\n  {% for post in site.posts %}\n    {\n      \"title\"    : \"{{ post.title | escape }}\",\n      \"category\" : \"{{ post.category }}\",\n      \"tags\"     : \"{{ post.tags | join: ', ' }}\",\n      \"url\"      : \"{{ site.baseurl }}{{ post.url }}\",\n      \"date\"     : \"{{ post.date }}\"\n    } {% unless forloop.last %},{% endunless %}\n  {% endfor %}\n]\n```\n\nYou need to place the following code within the layout where you want the search to appear. (See the configuration section below to customize it)\n\nFor example in  **_layouts/default.html**:\n\n```\n<!-- Html Elements for Search -->\n<div id=\"search-container\">\n<input type=\"text\" id=\"search-input\" placeholder=\"search...\">\n<ul id=\"results-container\"></ul>\n</div>\n\n<!-- Script pointing to jekyll-search.js -->\n<script src=\"{{ site.baseurl }}/bower_components/simple-jekyll-search/dest/jekyll-search.js\" type=\"text/javascript\"></script>\n```\n\n\n# Configuration\n\nCustomize SimpleJekyllSearch by passing in your configuration options:\n\n```\nSimpleJekyllSearch({\n  searchInput: document.getElementById('search-input'),\n  resultsContainer: document.getElementById('results-container'),\n  json: '/search.json',\n})\n```\n\n#### searchInput (Element) [required]\n\nThe input element on which the plugin should listen for keyboard event and trigger the searching and rendering for articles.\n\n\n#### resultsContainer (Element) [required]\n\nThe container element in which the search results should be rendered in. Typically an `<ul>`.\n\n\n#### json (String|JSON) [required]\n\nYou can either pass in an URL to the `search.json` file, or the results in form of JSON directly, to save one round trip to get the data.\n\n\n#### searchResultTemplate (String) [optional]\n\nThe template of a single rendered search result.\n\nThe templating syntax is very simple: You just enclose the properties you want to replace with curly braces.\n\nE.g.\n\nThe template\n\n```\n<li><a href=\"{url}\">{title}</a></li>\n```\n\nwill render to the following\n\n```\n<li><a href=\"/jekyll/update/2014/11/01/welcome-to-jekyll.html\">Welcome to Jekyll!</a></li>\n```\n\nIf the `search.json` contains this data\n\n```\n[\n    {\n      \"title\"    : \"Welcome to Jekyll!\",\n      \"category\" : \"\",\n      \"tags\"     : \"\",\n      \"url\"      : \"/jekyll/update/2014/11/01/welcome-to-jekyll.html\",\n      \"date\"     : \"2014-11-01 21:07:22 +0100\"\n    }\n]\n```\n\n\n#### templateMiddleware (Function) [optional]\n\nA function that will be called whenever a match in the template is found.\n\nIt gets passed the current property name, property value, and the template.\n\nIf the function returns a non-undefined value, it gets replaced in the template.\n\nThis can be potentially useful for manipulating URLs etc.\n\nExample:\n\n```\nSimpleJekyllSearch({\n  ...\n  middleware: function(prop, value, template){\n    if( prop === 'bar' ){\n      return value.replace(/^\\//, '')\n    }\n  }\n  ...\n})\n```\n\nSee the [tests](src/Templater.test.js) for an in-depth code example\n\n\n\n#### noResultsText (String) [optional]\n\nThe HTML that will be shown if the query didn't match anything.\n\n\n#### limit (Number) [optional]\n\nYou can limit the number of posts rendered on the page.\n\n\n#### fuzzy (Boolean) [optional]\n\nEnable fuzzy search to allow less restrictive matching.\n\n#### exclude (Array) [optional]\n\nPass in a list of terms you want to exclude (terms will be matched against a regex, so urls, words are allowed).\n\n\n\n\n\n\n\n## Enabling full-text search\n\nReplace 'search.json' with the following code:\n\n```\n---\nlayout: null\n---\n[\n  {% for post in site.posts %}\n    {\n      \"title\"    : \"{{ post.title | escape }}\",\n      \"category\" : \"{{ post.category }}\",\n      \"tags\"     : \"{{ post.tags | join: ', ' }}\",\n      \"url\"      : \"{{ site.baseurl }}{{ post.url }}\",\n      \"date\"     : \"{{ post.date }}\",\n      \"content\"  : \"{{ post.content | strip_html | strip_newlines }}\"\n    } {% unless forloop.last %},{% endunless %}\n  {% endfor %}\n  ,\n  {% for page in site.pages %}\n   {\n     {% if page.title != nil %}\n        \"title\"    : \"{{ page.title | escape }}\",\n        \"category\" : \"{{ page.category }}\",\n        \"tags\"     : \"{{ page.tags | join: ', ' }}\",\n        \"url\"      : \"{{ site.baseurl }}{{ page.url }}\",\n        \"date\"     : \"{{ page.date }}\",\n        \"content\"  : \"{{ page.content | strip_html | strip_newlines }}\"\n     {% endif %}\n   } {% unless forloop.last %},{% endunless %}\n  {% endfor %}\n]\n```\n\n\n\n## If search isn't working due to invalid JSON\n\n- There is a filter plugin in the _plugins folder which should remove most characters that cause invalid JSON. To use it, add the simple_search_filter.rb file to your _plugins folder, and use `remove_chars` as a filter.\n\nFor example: in search.json, replace\n```\n\"content\"  : \"{{ page.content | strip_html | strip_newlines }}\"\n```\nwith\n```\n\"content\"  : \"{{ page.content | strip_html | strip_newlines | remove_chars | escape }}\"\n```\n\nIf this doesn't work when using Github pages you can try ```jsonify``` to make sure the content is json compatible:\n```\n\"content\"   : {{ page.content | jsonify }}\n```\n**Note: you don't need to use quotes ' \" ' in this since ```jsonify``` automatically inserts them.**\n\n\n\n\n\n##Browser support\n\nBrowser support should be about IE6+ with this `addEventListener` [shim](https://gist.github.com/eirikbacker/2864711#file-addeventlistener-polyfill-js)\n\n\n\n\n\n\n\n# Dev setup\n\n- `npm install` the dependencies.\n\n- `gulp watch` during development\n\n- `npm test` or `npm run test-watch` to run the unit tests\n"

Note: you don’t need to use quotes ‘ “ ‘ in this since jsonify automatically inserts them.

##Browser support

Browser support should be about IE6+ with this addEventListener shim

Dev setup

  • npm install the dependencies.

  • gulp watch during development

  • npm test or npm run test-watch to run the unit tests