O Jekyll é um dos geradores de site estático (SSGs) mais populares, amplamente usado pela comunidade de desenvolvedores para criar blogs, portfólios e sites pessoais. Este artigo explica como você pode criar um site Jekyll com o GitHub Actions e implantá-lo gratuitamente com a Hospedagem de Site Estático da Kinsta.

Com a Hospedagem de Site Estático da Kinsta, você pode criar sites automaticamente a partir de SSGs e aplicativos web criados com base no Node.js. Para atender a outros conteúdos estáticos, como sites estáticos gerados pelo Jekyll (desenvolvido em Ruby), precisamos de outra abordagem.

Requisitos

Para este tutorial, assumimos que você possui:

  • Experiência com Jekyll e Git.
  • Um site Jekyll instalado e em execução localmente.

Para acompanhar, você pode usar este exemplo de base de código como referência.

Implante seu site Jekyll na Kinsta

Há diferentes maneiras de implantar seu site Jekyll na Kinsta, como, por exemplo, você pode:

  • Usar a hospedagem de aplicativos da Kinsta.
  • Usar a hospedagem de site estático da Kinsta por meio de um desses métodos:
    • A. Construindo seu site com Integração Contínua e Implantação Contínua (CI/CD) antes de implantar na Kinsta.
    • B. Servindo apenas seus arquivos estáticos.

Neste artigo, mostraremos a você os dois métodos de implantação do Jekyll com a Hospedagem de Site Estático da Kinsta.

A. Crie seu site com GitHub Actions antes de implantar na Kinsta

Esse método usa um fluxo de trabalho do GitHub Actions (GHA) para criar seu site em um branch específico (deploy) e usar essa branch para implantar os arquivos estáticos gerados na Kinsta.

Para usar esse método, como usamos o GitHub Actions, sua base de código deve estar hospedada em um repositório do GitHub (público ou privado). Mas você pode usar outras ferramentas de CI/CD para obter o mesmo resultado.

As vantagens mais significativas desse método são:

  • Você pode implementar ainda mais processos de integração contínua (CI) para o seu site, por exemplo, um estágio test e/ou lint para verificar seu código.
  • Seu site é criado automaticamente a cada envio para o seu repositório. Você não precisa criá-lo antes de fazer o envio.
  • Você garante que seu site só será atualizado se o pipeline de CI/CD for concluído com êxito.

Etapas:

  1. Abra o terminal na raiz do repositório do seu site Jekyll.
  2. Crie uma nova branch órfã (vazia) (deploy) e envie para o seu repositório:
git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

Não adicione nenhum arquivo para essa branch. Ele será preenchido automaticamente pelo fluxo de trabalho do GitHub Actions com o conteúdo da pasta _site do Jekyll gerado.

  1. Confira a branch main:
git checkout main
  1. Crie um diretório .github/workflows em main.
  1. Para configurar o GHA, crie um novo arquivo gh-actions.yml em .github/workflows com o seguinte conteúdo:
name: Deploy Jekyll
on:
  # The workflow runs only on pushes to the <main> branch
  push:
    branches: ["main"]
    workflow_dispatch:
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
      - name: Set up Jekyll
        run: gem install bundler && bundle install
      - name: Build site
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: compiled-site
          path: _site
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
# Commit and push the artifacts to the <deploy> branch
      - uses: actions/checkout@v4
        with:
          ref: deploy
      - name: Download artifacts
        uses: actions/download-artifact@v3
        with:
          name: compiled-site
          path: _site
      - name: Commit and push
      # Replace "<username>" with your GH org or user name
        run: |
          git config user.name "<username>"
          git config user.email "<username>@users.noreply.github.com"
          git pull origin deploy
          git add _site
          git commit -m "Auto generated from ${GITHUB_SHA::7}"
          git push
  1. Faça o commit e envie o código para a branch main.

A cada envio para a branch main, o fluxo de trabalho do GitHub Actions:

  1. Constrói seu site Jekyll com os arquivos estáticos em _site.
  2. Cria artefatos com o conteúdo de _site.
  3. Verifica a branch deploy.
  4. Faz o commit das alterações de _site para a branch deploy.

Para atualizar o site, você só precisa enviar as alterações para a branch main.

Você não deve enviar as alterações diretamente para a branch deploy. Você pode optar por bloquear a branch no GitHub para evitar envios não intencionais.

Veja abaixo como fazer a implantação na Kinsta.

B. Crie seu site localmente e implante na Kinsta

Como alternativa ao método acima, você pode criar seu site localmente (e atualizar o conteúdo da pasta _site localmente) e, em seguida, enviar o conteúdo da pasta _site do Jekyll para um repositório (no GitHub, GitLab ou Bitbucket). Ao usar esse método, você não precisa do GH Actions ou de qualquer outra ferramenta de CI/CD para criar seu site a cada envio para o repositório, portanto, é muito mais simples do que o método anterior.

A desvantagem desse método é que você precisa criar o conteúdo do site antes de cada envio para o repositório.

Esse método usa apenas o conteúdo da pasta _site e os serve diretamente na Hospedagem de Site Estático da Kinsta..

Etapas:

  1. Abra o arquivo .gitignore do seu repositório e remova a linha com _site.
  2. Faça o commit e envie a pasta _site para o seu repositório.

Para atualizar seu site, certifique-se de construí-lo com Jekyll antes de enviá-lo para o seu repositório.

Implante seu site Jekyll na Kinsta com Hospedagem de Site Estático

Método GitHub Actions

Se você usou o fluxo de trabalho do GitHub Actions para criar seu site, siga as etapas abaixo para implantá-lo com a Hospedagem de Site Estático da Kinsta.

  1. Faça login em sua conta MyKinsta ou crie uma nova.
  2. Vá para o painel de controle do MyKinsta.
  3. Clique no ícone do menu no canto superior esquerdo da tela.
  4. Na barra lateral, clique em Sites estáticos.
  5. No canto superior direito, clique em Adicionar site.
  6. Autorize seu provedor Git.
  7. Selecione seu repositório.
  8. Selecione a branch deploy como a branch padrão (onde o conteúdo da pasta _site está localizado).
  9. Selecione Implantação automática no commit para implantar o site a cada envio para o seu repositório.
  10. Adicione um Nome de exibição exclusivo ao seu site e clique em Continuar.
  11. Defina suas configurações de build:
    1. Comando de build: Deixe em branco.
    2. Versão do node: Deixe como está.
    3. Diretório de publicação: _site.
  1. Clique em Criar site.

A Kinsta implanta seu site e solicita que você forneça a URL padrão do site. Você pode então adicionar seu próprio domínio personalizado e seu próprio certificado SSL, se desejar.

Método de build local

Se você usou o método de build local, siga essas mesmas etapas para implantar seu site. Você só precisa alterar a branch da qual deseja implantar (na etapa 8). Em vez de deploy, use main ou qualquer branch de sua preferência.

Resumo

Este artigo forneceu a você dois métodos possíveis para implantar seu site Jekyll com a hospedagem de site estático da Kinsta.

O primeiro método usa CI/CD para criar seu aplicativo e gerar o conteúdo da pasta _site em outra branch do seu repositório. As maiores vantagens de usar esse método com a hospedagem de site estático da Kinsta são:

  • Com o CI/CD, há vários processos que você pode adicionar ao seu site.
  • Você implementa seu site com um excelente serviço de hospedagem e o atende com o máximo desempenho.
  • Você não precisa de uma conta premium do GitHub para manter seu repositório privado (como faria se usasse o GitHub Pages, por exemplo).

No segundo método, construímos o Jekyll localmente e enviamos o conteúdo da pasta _site para a mesma branch onde estão os demais arquivos do seu Jekyll. Esse processo pode ser repetido para repositórios hospedados em outros provedores Git (GitLab e Bitbucket) sem necessidade de configurações adicionais. É o método mais simples, mas com o inconveniente de ter que construir seu site antes de enviar para o seu repositório.

Além dessas opções, você pode optar por implantar seu site Jekyll com a hospedagem de aplicativos da Kinsta. Você pode optar por implantar seu site Jekyll com a hospedagem de aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais abrangente de benefícios e acesso a recursos mais robustos. Por exemplo, escalabilidade, implantação personalizada usando um Dockerfile e análises abrangentes que incluem dados históricos e em tempo real.

Leia mais artigos sobre sites estáticos no Blog da Kinsta.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.