O que é o GitHub Pages?
Aqui, abordamos o processo de criação e manutenção de um site do GitHub Pages.
O GitHub Pages são sites estáticos hospedados diretamente de seu repositório do GitHub, mas são mais do que apenas uma coleção de arquivos estáticos. Usando tecnologias de geração de sites como o Jekyll e o Liquid, os desenvolvedores definem modelos dinâmicos que são processados e se tornam sites estáticos completos. Toda vez que você confirma uma alteração na ramificação de origem associada ao site, o site é regenerado usando as atualizações mais recentes e publicado automaticamente na URL de destino.
Saiba mais sobre Origens de publicação para sites do GitHub Pages.
Habilitar o GitHub Pages
A primeira etapa para usar o GitHub Pages é habilitá-lo na guia Configurações de seu repositório. Você pode optar por usar o branch main ou por especificar a pasta docs dentro dele. Se quiser desabilitar o GitHub Pages, você poderá fazer isso aqui.
Escolher um tema com o Jekyll
O Jekyll é o gerador de site estático que o GitHub usa para criar seu site com base no conteúdo de seu repositório. Além de ser muito conveniente com relação ao conteúdo, ele também está em conformidade com uma convenção de design padrão. Com essa padronização de estilo, é possível ter temas intercambiáveis, que podem ser selecionados na configuração do GitHub Pages.
O GitHub fornece vários temas. Também existe uma variedade de temas comerciais e de código aberto disponíveis da comunidade Jekyll.
Saiba mais sobre os Temas do Jekyll.
Usar front matter YAML
O termo front matter refere-se aos metadados YAML que precedem o conteúdo de um arquivo. Para o Jekyll, esses metadados incluem instruções generativas para indicar o estilo de layout de uma página de markdown (post, page e assim por diante). Também pode incluir metadados da página, como o título do documento, ou variáveis de conteúdo da página, como a criação de uma postagem no blog.
O exemplo a seguir usa o layout post. O exemplo pressupõe que exista um arquivo _layouts/post.html que define o HTML do contêiner. Outras opções de layout podem ser oferecidas adicionando seus respectivos arquivos HTML na pasta _layouts.
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
Saiba mais sobre o Front Matter.
Personalizar o site
Quando o site estiver em execução, você poderá personalizar os detalhes dele usando _config.yml. Esse arquivo inclui praticamente todas as opções de configuração do site, incluindo metadados, menus de navegação, cores de tema e opções do compilador do site, entre outras.
Saiba mais sobre a Configuração com _config.yml.
Criando e editando conteúdo
A criação e a edição de páginas no site seguem a experiência padrão do GitHub. Os arquivos que você usa para o seu site do GitHub Pages têm todos os mesmos benefícios que outros arquivos no seu repositório GitHub. Você pode editá-los com qualquer ferramenta, criar e mesclar ramificações e vincular-se a problemas ou pull request.
Além de Markdown e HTML, o Jekyll dá suporte à sintaxe da linguagem do modelo Liquid. O Liquid permite que os usuários insiram dinamicamente variáveis e constructos de fluxo de lógica básica em seus arquivos de conteúdo. Quando compilado, o produto final é um HTML padrão.
O exemplo a seguir mostra uma combinação de looping for e inserção de variáveis.
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
Saiba mais sobre a Linguagem do modelo Liquid.
Trabalhando com postagens no blog
Apesar de não ter um banco de dados com o qual trabalhar, o Jekyll ainda dá suporte ao conceito de blogar usando uma convenção específica: _posts/2020-06-25-blog-post-name.md. Como você provavelmente pode inferir, todas as postagens no blog são armazenadas na pasta _posts e usam a convenção de data e nome mostrada. Durante a compilação, o Jekyll processa os arquivos nessa pasta para produzir uma lista de postagens no blog em HTML.
O exemplo a seguir ilustra a estrutura de uma simples postagem no blog. Ele inclui os metadados para subtitle, tags e comments. O tema que você escolher pode não dar suporte para esses metadados.
---
layout: post
title: Blog post title rendered by theme
subtitle: Blog post subtitle rendered by theme
tags: welcoming
comments: true
---
This is the first line of rendered content in the post.
Saiba mais sobre Adicionar conteúdo ao site do GitHub Pages usando o Jekyll.