Introdução

É na página de Chad Baldwin que se pode encontrar uma dica fácil, na qual em poucos minutos é possível criar um blog em html estático usando o Github Pages.

Após seguir os passos ali contidos, vale olhar também a fonte de seu próprio blog, para implementações. Ou, para quem quiser entender como funciona o Jekyll, programa que constrói o site, esse texto é bem esclarecedor.

Olhando um pouco mais

Cabeçalho YML

Basicamente, pode-se ver que os cabeçalhos das publicações podem se desenrolar como se segue, a partir da estrutura em YML front-matter:

---
layout: post
title: "Título do post"
description: "Taking a look at some of the new language enhancements coming in SQL Server 2022"
date: 2022-06-02T12:30:00-07:00
tags: categoria1 categoria 2
table_of_contents_header: yes # quando se quer mostrar a TOC
---

Tags e categorias

Há também a possibilidade de confecção de tags para separar os posts por assunto no Arquivo. Esse texto, em português, explica um pouco mais a implementação de tags e categorias.

As mesmas tags também podem ser utilizadas para a criação de páginas específicas e nuvens.

Busca

É também possível inserir um mecanismo de busca. Esse site tem regras simples para o mecanismo Lunr.js.

Seções expansíveis

Pode-se criar uma seção recolhida assim:

<details> 
<summary>conteudo de sumário</summary>
Conteúdo a ser expandido  
</details>

Cujo resultado é:

conteudo de sumário Conteúdo a ser expandido



Callouts

Há também códigos para admonitions ou callouts, como se pode ver aqui:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
  margin-bottom: 15px;
  padding: 4px 12px;
}

.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #04AA6D;
}

.info {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
}


.warning {
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
}
</style>
</head>
<body>

<h2>Notes</h2>
<div class="danger">
  <p><strong>Danger!</strong> Some text...</p>
</div>

<div class="success">
  <p><strong>Success!</strong> Some text...</p>
</div>

<div class="info">
  <p><strong>Info!</strong> Some text...</p>
</div>

<div class="warning">
  <p><strong>Warning!</strong> Some text...</p>
</div>

</body>
</html>

Cujo resultado é

Jamais esquecer! "A arte da vida consiste em fazer da vida uma obra de arte" (Gandhi)

Css simples

É possível fazer html css simples também:

<div style="width: 90%; height: 100%; margin: 15px 15px 15px 15px; padding: 15px; background-color: #E0FFFF;">
    "A arte da vida consiste em fazer da vida uma obra de arte"<br>
    Gandhi
</div>

Cujo resultado é:

"A arte da vida consiste em fazer da vida uma obra de arte"
Gandhi

Divs para conteudos destacados

Resultados com divs com conteudos separados. Ex.:

<div class="div-destaque">
    <b>Lembrete:</b>
    "Quem mata o tempo fere a eternidade" (Thoreau)
  </div>

Cujo resultado é:

Lembrete: "Quem mata o tempo fere a eternidade" (Thoreau)

Tabela de conteudos

Há tabelas de conteúdos já inseridas nas possibilidades do Jekyll, como se vê aqui

* TOC
{:toc}

É possível fazer uma tabela de conteúdos mais complexa. Jake Lee ensina isso naquele link (nos comentários é possível ver como colocar TOC apenas nas páginas desejadas). Há também uma solução com o TOC simplificado aqui

Outras possibilidades

Há outros empreendimentos incríveis em Jekyll e outros. Por ex.,

  • O Just the Docs, para sites em documentação.
  • O wowchemy facilita bastante a vida de quem quer criar um site.
  • belo tutorial de como começar no Jekyll.
  • O minimal é um belo template-design.
  • este tutorial é ótimo para principiantes.

E la nave va.

Este post é um work in progress1

  1. Testando nota de rodapé. ↩

<
Previous Post
Discours de Rome et réponses aux interventions
>
Next Post
Darwin - A Origem das Espécies (1859)