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
teste/oulintpara 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:
- Abra o terminal na raiz do repositório do seu site Jekyll.
- 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 deployNã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.
- Confira a branch
main:
git checkout main- Crie um diretório .github/workflows em
main.
- 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- 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:
- Constrói seu site Jekyll com os arquivos estáticos em _site.
- Cria artefatos com o conteúdo de _site.
- Verifica a branch
deploy. - 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:
- Abra o arquivo .gitignore do seu repositório e remova a linha com
_site. - 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.
- Faça login em sua conta MyKinsta ou crie uma nova.
- Vá para o painel de controle do MyKinsta.
- Clique no ícone do menu no canto superior esquerdo da tela.
- Na barra lateral, clique em Sites estáticos.
- No canto superior direito, clique em Adicionar site.
- Autorize seu provedor Git.
- Selecione seu repositório.
- Selecione a branch
deploycomo a branch padrão (onde o conteúdo da pasta _site está localizado). - Selecione Implantação automática no commit para implantar o site a cada envio para o seu repositório.
- Adicione um Nome de exibição exclusivo ao seu site e clique em Continuar.
- Defina suas configurações de build:
- Comando de build: Deixe em branco.
- Versão do node: Deixe como está.
- Diretório de publicação:
_site.
- 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.
Sou o líder da equipe editorial na Kinsta. Sou um entusiasta de código aberto e adoro programar. Com mais de 7 anos de experiência em redação e edição técnica para a indústria de tecnologia, adoro colaborar com pessoas para criar conteúdos claros e concisos e melhorar fluxos de trabalho.
Deixe um comentário