Esta seção do tutorial explica:
Use uma ferramenta de edição de texto e código da sua escolha para abrir o arquivo index.markdown. Este é um dos arquivos que foram gerados automaticamente pelo Jekyll quando você criou o seu projeto inicial.
Apague todo o conteúdo do arquivo e substitua pelo seguinte Front Matter:
---
layout: geral
title: Página inicial
---
# Olá, mundo!
Esta é a minha primeira página.
Com isso, você terá criado sua primeira página e definido que ela irá usar um layout chamado geral. Este layout ainda não existe, então vamos criá-lo agora.
Crie um diretório chamado _layouts dentro do diretório raiz do seu projeto. Por padrão, este é o nome do local onde o Jekyll busca os layouts do projeto.
Crie um arquivo chamado geral.html dentro do diretório _layouts.
Abra o arquivo geral.html usando o seu editor de preferência e faça as seguintes alterações:
{{ page.title }}
dentro do tag de título da página. Na saída gerada pelo build do seu projeto, o parâmetro {{ page.title }}
é substituído automaticamente pelo título da página que o usuário estiver acessando.Adicione o parâmetro {{ content }}
entre os tags <body> </body>
. Na saída gerada pelo build do seu projeto, o parâmetro {{ content }}
é substituído automaticamente pelo conteúdo (corpo) da página que o usuário estiver acessando.
Depois de fazer estas alterações, o conteúdo do arquivo geral.html deverá estar assim:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
Faça o build do projeto, caso não tenha o feito. Com o servidor local do Jekyll em execução, acesse o seguinte endereço no seu navegador: http://localhost:4000
Ao acessar o endereço, você verá a página inicial que você criou. A página deverá mostrar o seguinte conteúdo:
Olá, mundo!
Esta é a minha primeira página.
Crie um arquivo chamado pagina2.md dentro do diretório raiz do seu projeto. Abra o arquivo no seu editor de preferência e coloque o seguinte conteúdo:
---
layout: geral
title: Página 2
---
# Oi! Sou eu de novo.
Esta é a segunda parte do meu site.
---
Perceba que, assim como a página inicial que criamos, esta aqui também usa o layout geral. Mas, se você quisesse, poderia criar um layout diferente e defini-lo aqui.
Abra o arquivo index.markdown. Você deverá criar um link dele para a página pagina2.md que você acabou de criar. Para criar o link, acrescente mais uma linha no final do arquivo index.markdown, como demonstrado a seguir:
---
layout: geral
title: Página inicial
---
# Olá, mundo!
Esta é a minha primeira página.
Mas eu também tenho [mais uma página](pagina2.md).
Ao fazer isso, você linkou o texto mais uma página com a página do arquivo pagina2.md.
Faça o build do projeto, caso não tenha o feito. Com o servidor local do Jekyll em execução, acesse o seguinte endereço no seu navegador: http://localhost:4000
Clique no link que você acabou de criar e veja que, assim, você navegou da página inicial para a segunda página do seu projeto. É desse jeito que você cria links entre páginas escrevendo em Markdown e no Jekyll.
Os projetos criados com o Jekyll suportam o uso de temas.
Temas são templates que determinam a aparência de todo o projeto. Por padrão, a instalação de um novo projeto do Jekyll usa um tema básico chamado Minima.
Este tutorial não explica como editar seu projeto usando temas personalizados. Mas, para personalizar o seu projeto, você pode pesquisar por temas do Jekyll na internet. Existem temas pagos e gratuitos.
Se você conhece CSS, ele também é uma alternativa para customizar a aparência do seu site. O Jekyll suporta totalmente esta linguagem, assim como outras linguagens web.