Publicamos atualizações frequentes em nossa documentação, e a tradução desta página ainda pode estar em andamento. Para obter as informações mais recentes, acesse a documentação em inglês. Se houver problemas com a tradução desta página, entre em contato conosco.

Adicionar um tema ao site do GitHub Pages usando Jekyll

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

GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. Para obter mais informações, consulte "produtos de GitHub

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.

As alterações no seu site serão publicadas automaticamente quando forem mescladas na fonte de publicação do site. 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, consulte "Testar seu 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 sobre fontes de publicação, consulte "Sobre o GitHub Pages".

  3. Navegue até _config.yml.

  4. No canto superior direito da exibição do arquivo, clique em para abrir o editor de arquivos.

    Botão Edit file (Editar arquivo)

  5. Adicione uma nova linha ao arquivo para o nome do tema.

    • Para usar um tema compatível, digite theme: THEME-NAME, substituindo THEME-NAME pelo nome do tema, conforme mostrado no LEIAME do repositório do tema. Para obter uma lista de temas compatíveis, consulte "Temas compatíveis" no site do GitHub Pages.
      Tema compatível no arquivo de configuração
    • Para usar qualquer outro tema do Jekyll hospedado em GitHub, digite remote_theme: THEME-NAME, substituindo THEME-NAME pelo nome do tema, como mostrado no LEIAME do repositório do tema.
      Tema não compatível no arquivo de configuração
  6. No final da página, digite uma mensagem de commit curta e significativa que descreva a alteração feita no arquivo. Você pode atribuir o commit a mais de um autor na mensagem de commit. Para obter mais informações, consulte "Criar um commit com vários co-autores."

    Mensagem do commit para sua alteração

  7. Abaixo dos campos de mensagem de commit, clique no menu suspenso de endereço de e-mail e escolha um endereço de e-mail do autor do Git. Apenas endereços de e-mail verificados aparecem neste menu suspenso. Se você ativou a privacidade do endereço de e-mail, então <username>@users.noreply.github.com é o endereço de e-mail do autor de commit padrão. Para obter mais informações, consulte "Setting your commit email address."

    Escolha um endereço de e-mail commit

  8. 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, consulte "Criar uma nova pull request."

    Opções para fazer commit no branch

  9. Clique em Propose file change (Propor alteração no arquivo).

    Botão Propose changes (Propor alterações)

Personalizar o CSS do tema

Essas instruções funcionam melhor com temas que são oficialmente suportados por GitHub Pages. Para obter uma lista completa dos temas compatíveis, consulte "Temas compatíveis" no site do GitHub Pages.

O repositório de origem do seu tema pode oferecer alguma ajuda na personalização do tema. Por exemplo, consulte o "LEIAME de Minima."

  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 sobre fontes de publicação, consulte "Sobre o GitHub Pages".

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

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

    ---
    ---
    
    @import "";
    
  5. Adicione o CSS ou Sass personalizado (incluindo importações) que deseja imediatamente após a linha @import.

Personalizar o layout HTML do tema

Essas instruções funcionam melhor com temas que são oficialmente suportados por GitHub Pages. Para obter uma lista completa dos temas compatíveis, consulte "Temas compatíveis" no site do GitHub Pages.

O repositório de origem do seu tema pode oferecer alguma ajuda na personalização do tema. Por exemplo, consulte o "LEIAME de Minima."

  1. No GitHub, navegue até o repositório de origem do tema. Por exemplo, o repositório de origem do Minima é https://github.com/jekyll/minima.
  2. Na pasta _layouts, navegue até 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 sobre fontes de publicação, consulte "Sobre o 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.

Leia mais

Esse documento ajudou você?

Privacy policy

Ajude-nos a tornar esses documentos ótimos!

Todos os documentos do GitHub são de código aberto. Você percebeu que algo que está errado ou não está claro? Envie um pull request.

Faça uma contribuição

Ou, aprenda como contribuir.