O que é o GitHub Pages?
Aqui, vamos falar sobre o processo de criação e manutenção de um site do GitHub Pages.
As Páginas do GitHub são sites estáticos hospedados diretamente do seu repositório GitHub, mas são mais do que apenas uma coleção de arquivos estáticos. Ao fazer uso de tecnologias de geração de sites como Jekyll e Liquid, os desenvolvedores definem modelos dinâmicos que são processados em sites estáticos completos. Sempre 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.
Ativar o GitHub Pages
O primeiro passo para usar o GitHub Pages é habilitá-lo na guia Configurações do repositório. Você pode optar por usar a ramificação ou especificar a maindocs pasta dentro dela. Se pretender desativar o GitHub Pages, pode fazê-lo aqui.
Escolher um tema com o Jekyll
Jekyll é o gerador de site estático que o GitHub usa para construir seu site a partir do conteúdo do seu repositório. Além de ser muito conveniente em termos de conteúdo, também está em conformidade com uma convenção de design padrão. Esta estandardização de estilos permite temas com capacidade de troca, que pode selecionar na configuração do GitHub Pages.
O GitHub fornece vários temas. Há também uma variedade de temas comerciais e de código aberto disponíveis na comunidade Jekyll.
Saiba mais sobre os Temas do Jekyll.
Utilizar código inicial do YAML
O termo código inicial refere-se aos metadados do YAML que antecedem os conteúdos de um ficheiro. Para Jekyll, esses metadados incluem instruções de gerador para indicar o estilo de layout de uma página de Markdown (post, , pagee assim por diante). Também pode incluir metadados de página, como o título do documento, ou variáveis de conteúdo da página, como o autor de uma postagem de blog.
O exemplo a seguir usa o post layout. O exemplo pressupõe que há um _layouts/post.html arquivo que define o contêiner HTML. Outras opções de layout podem ser oferecidas adicionando seus respetivos arquivos HTML na _layouts pasta.
---
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 Front Matter (Código Inicial).
Personalizar o seu site
Quando o site estiver funcional, pode personalizar os detalhes do mesmo através de _config.yml. Este ficheiro inclui praticamente todas as opções de configuração para todo o site, incluindo metadados do site, menus de navegação, cores de temas, opções do compilador, entre outros.
Saiba mais sobre a Configuração _config.yml.
Criar e editar conteúdos
A criação e edição de páginas no seu site segue a experiência padrão do GitHub. Os arquivos que você usa para seu site GitHub Pages desfrutam dos mesmos benefícios que outros arquivos em seu repositório GitHub. Você pode editá-los com quaisquer ferramentas, criar e mesclar ramificações e vincular a problemas ou solicitações pull.
Além de Markdown e HTML, o Jekyll suporta a sintaxe da linguagem de modelos Liquid. O Liquid permite que os usuários insiram dinamicamente variáveis e construções básicas de fluxo lógico em seus arquivos de conteúdo. Após a compilação, o produto final é HTML padrão.
O exemplo a seguir mostra uma combinação de looping e inserção de for 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 de modelos Liquid.
Trabalhar com publicações de blogue
Apesar de não ter uma base de dados, o Jekyll ainda suporta o conceito de blogue através de uma convenção específica: _posts/2020-06-25-blog-post-name.md. Como poderá deduzir, todas as publicações de blogue estão armazenadas na pasta _posts e utilizam a convenção de datas e nomes apresentada. Durante a compilação, o Jekyll processa os ficheiros nesta pasta para produzir uma lista de publicações de blogue HTML.
O exemplo a seguir ilustra a estrutura de uma postagem de blog simples. Inclui metadados para subtitle, tagse comments. O tema escolhido pode não suportar 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údos ao seu site do GitHub Pages com Jekyll.