Criar um site do GitHub Pages com o Jekyll

É possível usar o Jekyll para criar um site do GitHub Pages em um repositório novo ou existente.

Quem pode usar esse recurso?

People with admin permissions for a repository can create a GitHub Pages site with Jekyll.

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".

Platform navigation

Neste artigo

Observação: os proprietários da organização podem restringir a publicação de sites do GitHub Pages em repositórios pertencentes à organização. Para obter mais informações, confira "Gerenciar a publicação dos sites do GitHub Pages para a sua organização".

Pré-requisitos

Antes de poder usar o Jekyll para criar um site do GitHub Pages, você precisa instalar o Jekyll e o Git. Para obter mais informações, confira Instalação na documentação do Jekyll e "Configurar o git".

Recomendamos usar o Bundler para instalar e executar o Jekyll. O Bundler gerencia as dependências do gem do Ruby, reduz os erros de compilação do Jekyll e evita erros relacionados ao ambiente. Para instalar o bundler:

  1. Instale o Ruby. Para obter mais informações, confira "Como instalar o Ruby" na documentação do Ruby.
  2. Instale o Bundler. Para obter mais informações, confira "Bundler".

Dica: caso você receba um erro do Ruby ao tentar instalar o Jekyll usando o Bundler, talvez seja necessário usar um gerenciador de pacotes, como o RVM ou o Homebrew, para gerenciar a instalação do Ruby. Para obter mais informações, confira "Solução de problemas" na documentação do Jekyll.

Criar um repositório para seu site

Você pode criar um repositório ou escolher um repositório existente para seu site.

Se você quiser criar um site do GitHub Pages para um repositório em que nem todos os arquivos do repositório estejam relacionados ao site, você poderá configurar uma fonte de publicação para seu site. Por exemplo, você pode ter um branch e uma pasta dedicados a armazenar os arquivos de origem do site ou usar um fluxo de trabalho personalizado do GitHub Actions para criar e implantar os arquivos de origem do site. Arquivos do

Se a conta que é o proprietário do repositório usar o GitHub Free ou o GitHub Free para organizações, o repositório precisará ser público.

Caso deseje criar um site em um repositório existente, vá para a seção "Como criar seu site".

  1. No canto superior direito de qualquer página, selecione e clique em Novo repositório.

    Captura de tela de um menu suspenso GitHub mostrando as opções para criar novos itens. Há um item de menu "Novo repositório" com o contorno em laranja escuro.

  2. Use o menu suspenso Proprietário para selecionar a conta que deseja atribuir como proprietário do repositório.

    Captura de tela do menu Proprietário de um novo repositório do GitHub. O menu mostra duas opções, octocat e github.

  3. Digite um nome para o repositório e uma descrição opcional. Se você estiver criando um site de usuário ou de organização, seu repositório precisará ser chamado <user>.github.io ou <organization>.github.io. Se o nome do usuário ou da organização contiver letras maiúsculas, você precisará colocá-las em minúsculas. Para obter mais informações, confira "Sobre o GitHub Pages".

    Captura de tela das configurações do GitHub Pages em um repositório. Há um campo de nome do repositório com o texto "octocat.github.io" e o contorno em laranja escuro.

  4. Escolha uma visibilidade do repositório. Para obter mais informações, confira "Sobre repositórios".

Criar seu site

Antes de criar seu site, você deve ter um repositório para seu site no GitHub. Se você não estiver criando seu site em um repositório existente, confira "Criar um repositório para seu site".

Aviso: Sites criados com GitHub Pages estão disponíveis publicamente na Internet, mesmo que o repositório do site seja privado (se o seu plano ou organização permitir). Se você tiver dados confidenciais no repositório do seu site, poderá removê-los antes de publicá-los. Para obter mais informações, confira "Sobre repositórios".

  1. Abra TerminalTerminalGit Bash.

  2. Se você ainda não tem uma cópia do seu repositório, procure o local em que deseja armazenar os arquivos de origem do seu site, substituindo PARENT-FOLDER pela pasta que deverá conter a pasta do repositório.

    cd PARENT-FOLDER

  3. Caso você ainda não tenha feito isso, inicialize um repositório Git local, substituindo REPOSITORY-NAME pelo nome do seu repositório.

    $ git init REPOSITORY-NAME
> Initialized empty Git repository in /REPOSITORY-NAME/.git/
# Creates a new folder on your computer, initialized as a Git repository

  4. Altere os diretórios no repositório.

    $ cd REPOSITORY-NAME
# Changes the working directory

  5. Decida qual fonte de publicação você deseja usar. Para obter mais informações, confira "Configurar uma fonte de publicação para o site do GitHub Pages".

  6. 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". Por exemplo, se você optar por publicar seu site por meio da pasta docs no branch padrão, crie e altere os diretórios para a pasta docs.

    $ mkdir docs
# Creates a new folder called docs
$ cd docs

    If you chose to publish your site from the gh-pages branch, create and checkout the gh-pages branch.

    $ git checkout --orphan gh-pages
# Creates a new branch, with no history or contents, called gh-pages, and switches to the gh-pages branch
$ git rm -rf .
# Removes the contents from your default branch from the working directory

  7. Para criar um site do Jekyll, use o comando jekyll new:

    $ jekyll new --skip-bundle .
# Creates a Jekyll site in the current directory

  8. Abra o Gemfile que o Jekyll criou.

  9. Adicione "#" ao início da linha que começa com gem "jekyll" para remover o comentário dessa linha.

  10. Adicione o gem github-pages editando a linha que começa com # gem "github-pages". Mudar esta linha para:

    gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

    Substitua GITHUB-PAGES-VERSION pela última versão compatível do gem github-pages. Encontre esta versão aqui: "Versões de dependência".

    A versão correta do Jekyll será instalada como uma dependência do gem github-pages.

  11. Salve e feche o Gemfile.

  12. Da linha de comando, execute bundle install.

  13. Abra o arquivo .gitignore que o Jekyll criou e ignore o arquivo de bloqueio de gemas adicionando esta linha:

    Gemfile.lock

  14. Opcionalmente, faça as edições necessárias no arquivo _config.yml. Isto é necessário para caminhos relativos quando o repositório é hospedado em um subdiretório. Para obter mais informações, confira "Dividir uma subpasta em um novo repositório".

    domain: my-site.github.io       # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
url: https://my-site.github.io  # the base hostname and protocol for your site, e.g. http://example.com
baseurl: /REPOSITORY-NAME/      # place folder name if the site is served in a subfolder

  15. Como alternativa, teste seu site localmente. Para obter mais informações, confira "Como testar seu site do GitHub Pages localmente com o Jekyll".

  16. Adicione e faça commit do seu trabalho.

    git add .
git commit -m 'Initial GitHub pages site with Jekyll'

  17. Adicione seu repositório ao GitHub.com como um repositório remoto, substituindo USER pela conta à qual o repositório pertence e REPOSITORY pelo nome do repositório.

    
$ git remote add origin https://github.com/USER/REPOSITORY.git

  18. Faça push no repositório para o GitHub, substituindo BRANCH pelo nome do branch em que você está trabalhando.

    git push -u origin BRANCH

  19. Configure a sua fonte de publicação. Para obter mais informações, confira "Configurar uma fonte de publicação para o site do GitHub Pages".

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

  21. Abaixo do nome do repositório, clique em Configurações. Caso não consiga ver a guia "Configurações", selecione o menu suspenso , clique em Configurações.

    Captura de tela de um cabeçalho de repositório que mostra as guias. A guia "Configurações" é realçada por um contorno laranja-escuro.

  22. Na seção "Código e automação" da barra lateral, clique em Páginas.

  23. Para ver o site publicado, em "GitHub Pages", clique em Visitar site.

    Captura de tela de uma mensagem de confirmação para o GitHub Pages listando a URL do site. À direita da URL, haverá um botão "Visitar o site" com o contorno em laranja escuro.

    Observação: poderá levar até dez minutos para que as alterações no seu site sejam publicadas depois que você efetuar push das alterações para o GitHub. Se as alterações no site de GitHub Pages não forem refletidas no navegador após uma hora, confira "Sobre erros de criação do Jekyll para sites do GitHub Pages".

  24. Seu site GitHub Pages está integrado e foi implantado com um fluxo de trabalho GitHub Actions. Para obter mais informações, confira "Visualizar o histórico de execução do fluxo de trabalho".

    Observação: o GitHub Actions é gratuito para repositórios públicos. Os encargos de uso se aplicam a repositórios privados e internos que vão além do loteamento mensal de minutos gratuitos. Para obter mais informações, confira "Limites de uso, cobrança e administração".

Observações:

  • Se você estiver publicando de um branch e seu site não tiver sido publicado automaticamente, verifique se alguém com permissões de administrador e um endereço de email verificado efetuou push para a fonte de publicação.

  • Commits enviados por push por um fluxo de trabalho de GitHub Actions que usa o GITHUB_TOKEN não disparam um build de GitHub Pages.

Próximas etapas

Para adicionar uma nova página ou postagem ao seu site, confira "Adicionar conteúdo ao site do GitHub Pages usando o Jekyll".

É possível adicionar um tema do Jekyll ao site do GitHub Pages para personalizar a aparência do seu site. Para saber, confira "Adicionar um tema ao site do GitHub Pages usando Jekyll".