Adicionar um tema ao site do GitHub Pages usando Jekyll

É possível personalizar o site do Jekyll adicionando e personalizando um tema.

Quem pode usar esse recurso?

O GitHub Pages está disponível em repositórios públicos com o GitHub Free e o GitHub Free para organizações, e em repositórios públicos e privados com o GitHub Pro, o GitHub Team, o GitHub Enterprise Cloud e o GitHub Enterprise Server. Para mais informações, confira "Planos do GitHub".

O GitHub Pages agora usa o GitHub Actions para executar a compilação Jekyll. Ao usar uma ramificação como a origem da sua compilação, o GitHub Actions deverá estar habilitado em seu repositório se você quiser usar o fluxo de trabalho interno do Jekyll. Como alternativa, se o GitHub Actions não estiver disponível ou estiver desabilitado, adicionar um .nojekyll arquivo à raiz da ramificação de origem ignorará o processo de compilação do Jekyll e implantará o conteúdo diretamente. Para mais informações sobre ativar o GitHub Actions, confira "Gerenciando as configurações do GitHub Actions para um repositório".

Neste artigo

Pessoas com permissões de gravação para um repositório podem adicionar um tema a um site do GitHub Pages usando Jekyll.

Se você estiver publicando de um branch, as alterações no seu site serão publicadas automaticamente quando forem mescladas na fonte de publicação do seu site. Se você estiver publicando de um fluxo de trabalho personalizado de GitHub Actions, as alterações serão publicadas sempre que seu fluxo de trabalho for disparado (normalmente por um push para o branch padrão). Se você desejar pré-visualizar suas alterações primeiro, você poderá fazer as alterações localmente em vez de fazer em GitHub. Em seguida, teste seu site localmente. Para obter mais informações, confira "Testar o site do GitHub Pages localmente com o Jekyll".

Adicionar um tema

  1. Em GitHub, acesse o repositório do seu site.
  2. Navegue até a fonte de publicação do seu site. Para obter mais informações, confira "Configurar uma fonte de publicação para o site do GitHub Pages".
  3. Procure _config.yml.
  4. No canto superior direito da exibição de arquivo, clique em para abrir o editor de arquivos.

Captura de tela de um arquivo. No cabeçalho, um botão, rotulado com um ícone de lápis, está contornado em laranja escuro.

Observação: em vez de editar o arquivo e fazer commit dele usando o editor de arquivos padrão, você pode optar por usar o editor de código github.dev selecionando o menu suspenso e clicando em github.dev. Você também pode clonar o repositório e editar o arquivo localmente por meio de GitHub Desktop clicando em GitHub Desktop .

Captura de tela de um arquivo. No cabeçalho, um ícone de triângulo para baixo está contornado em laranja escuro.

1. Adicione uma nova linha ao arquivo para o nome do tema. * Para usar um tema com suporte, digite `theme: THEME-NAME`, substituindo _THEME-NAME_ pelo nome do tema, conforme mostrado no `_config.yml` do repositório do tema (a maioria dos temas seguem uma convenção de nomenclatura `jekyll-theme-NAME`). Para ver a lista de temas com suporte, confira "[Temas com suporte](https://pages.github.com/themes/)" no site do GitHub Pages. Por exemplo, para selecionar o tema Mínima, digite `theme: jekyll-theme-minimal`. * Para usar qualquer outro tema do Jekyll hospedado no GitHub, digite `remote_theme: THEME-NAME`, substituindo THEME-NAME pelo nome do tema, conforme mostrado no LEIAME do repositório do tema.

  1. Clique em Fazer commit das alterações...

  2. No campo "Mensagem do commit", digite uma mensagem curta e relevante que descreva a alteração que você fez no arquivo. Você pode atribuir o commit a mais de um autor na mensagem de commit. Para obter mais informações, confira "Criar um commit com vários autores".

  3. Se você tiver mais de um endereço de email associado à sua conta em GitHub, clique no menu suspenso do endereço de email e selecione o email a ser usado como o endereço de email do autor do Git. Apenas endereços de e-mail verificados aparecem neste menu suspenso. Se você habilitou a privacidade do endereço de email, um email sem resposta será o endereço de email do autor de commit padrão. Para obter mais informações sobre a forma exata que o endereço de email sem resposta pode assumir, consulte "Configurar o endereço de e-mail do commit”.

    Captura de tela de uma solicitação de pull do GitHub que mostra um menu suspenso com opções para escolher o endereço de email do autor do commit. octocat@github.com está selecionado.

  4. Abaixo dos campos de mensagem do commit, opte por adicionar o commit ao branch atual ou a um novo branch. Se seu branch atual for o branch-padrão, você deverá optar por criar um novo branch para seu commit e, em seguida, criar um pull request. Para obter mais informações, confira "Como criar uma solicitação de pull".

    Captura de tela de uma solicitação de pull GitHub mostrando um botão de opção para confirmar diretamente no branch principal ou para criar um branch. O novo branch está selecionado.

  5. Clique em Fazer commit de alterações ou em Propor alterações.

Personalizar o CSS do tema

Estas instruções funcionam melhor com temas que são oficialmente compatíveis com GitHub Pages. Para ver uma lista completa de temas com suporte, confira "Temas com suporte" no site do GitHub Pages.

O repositório de origem do seu tema pode oferecer alguma ajuda na personalização do tema. Por exemplo, confira o LEIAME da Mínima.

  1. Em GitHub, acesse o repositório do seu site.

  2. Navegue até a fonte de publicação do seu site. Para obter mais informações, confira "Configurar uma fonte de publicação para o site do GitHub Pages".

  3. Crie um arquivo chamado /assets/css/style.scss.

  4. Adicione o seguinte conteúdo ao topo do arquivo:

    ---
---

@import "{{ site.theme }}";

  5. Adicione qualquer CSS ou Sass personalizado que desejar (incluindo as importações) imediatamente após a linha @import.

Personalizar o layout HTML do tema

Estas instruções funcionam melhor com temas que são oficialmente compatíveis com GitHub Pages. Para ver uma lista completa de temas com suporte, confira "Temas com suporte" no site do GitHub Pages.

O repositório de origem do seu tema pode oferecer alguma ajuda na personalização do tema. Por exemplo, confira o LEIAME da Mínima.

  1. No GitHub, navegue até o repositório de origem do tema. Por exemplo, o repositório de origem do Mínima é https://github.com/pages-themes/minimal.
  2. Na pasta _layouts, procure o arquivo default.html do tema.
  3. Copie o conteúdo do arquivo.
  4. Em GitHub, acesse o repositório do seu site.
  5. Navegue até a fonte de publicação do seu site. Para obter mais informações, confira "Configurar uma fonte de publicação para o site do GitHub Pages".
  6. Crie um arquivo chamado _layouts/default.html.
  7. Cole o conteúdo do layout padrão que você copiou anteriormente.
  8. Personalize o layout como desejado.

Leitura adicional