Tutorial do Jekyll: Como Criar um Site Estático

Na atual era digital, ter um site é essencial para estabelecer presença on-line, promover sua marca e atingir clientes em potencial. Entretanto, criar um site pode ser uma tarefa desafiadora.

É aí que entram os geradores de sites estáticos (SSGs), que facilitam a criação de sites bonitos e de carregamento rápido sem a necessidade de complexos sistemas de backend ou bancos de dados.

Neste artigo, você conhecerá um dos SSGs mais populares, o Jekyll, aprenderá como ele funciona e como você pode criar um site estático com ele.

Aqui está uma demonstração em tempo real do site de blog que você criará com o Jekyll.

Você pode acessar o repositório GitHub do projeto se quiser examiná-lo mais de perto.

O que é o Jekyll?

O Jekyll é um SSG gratuito de código aberto que foi criado e é executado na linguagem de programação Ruby. Você não precisa entender como o Ruby funciona para usar o Jekyll; apenas precisa ter o Ruby instalado em sua máquina.

O Jekyll pode ser usado para criar vários tipos de sites estáticos, como um blog pessoal, um site de portfólio e um site de documentação, sem precisar de banco de dados nem usar um sistema de gerenciamento de conteúdo como o WordPress.

Aqui está o que faz o Jekyll se destacar entre os SSGs:

1. Fácil de usar: O Jekyll usa arquivos de texto simples e sintaxe Markdown para criar e gerenciar conteúdo, o que significa que você não precisa ter conhecimento de HTML ou CSS para começar.
2. Rápido e seguro: O Jekyll não lida com nenhum banco de dados ou script no lado do servidor, o que significa que há menos risco de vulnerabilidades e ataques. Ele gera arquivos HTML estáticos, o que torna seu site incrivelmente rápido e seguro.
3. Personalizável: O Jekyll é altamente personalizável, permitindo que você use layouts e templates, ou até mesmo crie plugins para ampliar a funcionalidade.
4. Fácil de implementar: O Jekyll gera arquivos HTML estáticos que podem ser implementados em um servidor web ou provedor de hospedagem sem a necessidade de um sistema de gerenciamento de conteúdo dinâmico.
5. Suporte de uma grande comunidade: O Jekyll tem uma grande comunidade de usuários e desenvolvedores, o que significa que existem muitos recursos disponíveis caso você precise de ajuda ou queira ampliar a funcionalidade do seu site.

Como instalar o Jekyll

Primeiro, você precisa instalar o Ruby em seu computador, antes de instalar o Jekyll, conforme indicado na documentação do Jekyll.

Como instalar o Jekyll no macOS

Por padrão, o Ruby vem pré-instalado com o macOS, mas não é recomendável que você use essa versão do Ruby para instalar o Jekyll, pois ela é antiga. Por exemplo, no Ventura, o sistema operacional mais recente da Apple, a versão do Ruby que vem pré-instalada é a 2.6.10, sendo que no momento em que este artigo está sendo escrito a versão mais recente é a 3.1.3.

Para corrigir isso, você precisa instalar o Ruby corretamente usando um gerenciador de versão como o chruby. Primeiro você precisa instalar o Homebrew no Mac, usando o comando abaixo no Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Quando a instalação for bem-sucedida, saia e reinicie o Terminal. Então verifique se o Homebrew está pronto para ser usado executando este comando:

brew doctor

Se você receber a mensagem “Your system is ready to Brew” (‘Seu sistema está pronto para o Brew’), poderá prosseguir com a instalação do chruby e do ruby-install com o comando abaixo:

brew install chruby ruby-install

Agora você pode instalar a versão mais recente do Ruby (hoje, a 3.1.3), usando o pacote ruby-install que acabou de instalar:

ruby-install 3.1.3

Isso levará alguns minutos. Depois que a instalação for bem-sucedida, configure seu shell para usar automaticamente o chruby com o comando abaixo:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

Você pode sair e reiniciar o Terminal, e, em seguida, verificar se tudo está funcionando corretamente executando este comando:

ruby -v

A resposta deverá ser ruby 3.1.3.

Agora você tem a versão mais recente do Ruby instalada em sua máquina. Prossiga instalando a versão mais recente do Jekyll e do pacote bundler com o seguinte comando:

gem install jekyll bundler

Como instalar o Jekyll no Windows

Para instalar o Ruby e o Jekyll em uma máquina Windows, você deve usar o RubyInstaller. Você pode fazer isso baixando e instalando uma versão do Ruby+Devkit em RubyInstaller Downloads e usando as opções padrão para instalação.

Na última etapa do assistente de instalação, execute a entrada ridk install, usada para instalar gems. Para mais informações, consulte a documentação do RubyInstaller.

Entre as opções, escolha MSYS2 e a cadeia de ferramentas de desenvolvimento MINGW. Abra uma nova janela do prompt de comando e instale o Jekyll e o Bundler usando o comando abaixo:

gem install jekyll bundler

Como verificar se o Jekyll está instalado corretamente

Para verificar se o Jekyll está instalado corretamente em sua máquina, abra o terminal e execute o seguinte comando:

jekyll -v

Se o número da versão aparecer, isso significa que o Jekyll está instalado e funcionando corretamente em seu sistema. Agora você está pronto para usar o Jekyll!

Comandos e configuração do Jekyll

Antes de começarmos a criar e personalizar um site estático com o Jekyll, é bom que você se familiarize com os vários comandos da CLI e os parâmetros do arquivo de configuração.

Comandos da CLI do Jekyll

Aqui estão alguns dos comandos populares da CLI do Jekyll. Você não precisa memorizá-los, apenas saber que eles existem e ficar à vontade para verificar o que cada um deles faz quando perceber seu uso mais adiante neste artigo.

• jekyll build: Gera o site estático no diretório _site.
• jekyll serve: Constrói o site e inicia um servidor da internet em sua máquina local, permitindo que você visualize o site no navegador em http://localhost:4000.
• jekyll new [site name]: Cria um novo site Jekyll em um novo diretório com o nome do site especificado.
• jekyll doctor: Retorna qualquer configuração ou problema de dependência que possa estar presente.
• jekyll clean: Exclui o diretório _site, onde os arquivos do site gerado são armazenados.
• jekyll help: Retorna a documentação de ajuda do Jekyll.
• jekyll serve --draft: Gera e serve seu site Jekyll, incluindo todas as publicações que estão no diretório _drafts.

Você também pode anexar algumas opções a esses comandos. Consulte uma lista completa de comandos e opções do Jekyll na documentação do Jekyll.

Arquivo de configuração do Jekyll

O arquivo de configuração do Jekyll é um arquivo YAML chamado _config.yml que contém configurações e opções para o seu site Jekyll. É usado para configurar vários aspectos do seu site, inclusive o título, a descrição, a URL e outras configurações.

Aqui estão algumas das configurações mais comumente usadas:

• title: O título do seu site.
• description: Uma breve descrição do seu site.
• url: A URL de base do seu site.
• baseurl: O subdiretório do seu site, se ele estiver hospedado em um subdiretório de um domínio.
• permalink: A estrutura de URL para seus artigos e páginas.
• exclude: Uma lista de arquivos ou diretórios a serem excluídos do processo de geração do site.
• include: Uma lista de arquivos ou diretórios a serem incluídos no processo de geração do site.
• paginate: O número de publicações a serem exibidas por página quando você usar a paginação.
• plugins: Uma lista de plugins do Jekyll a serem carregados.
• theme: Por padrão, o tema definido é o minima. Você pode usar qualquer outro tema definindo seu nome e implementando outras configurações sobre as quais aprenderemos mais adiante neste artigo.

Você também pode criar variáveis personalizadas em seu arquivo de configuração e usá-las nos templates, layouts e includes do seu site. Por exemplo, você pode criar uma variável chamada author_name e usá-la em seus templates da seguinte forma: {{ site.author_name }}.

Para modificar o arquivo de configuração do Jekyll, abra o arquivo _config.yml no diretório do projeto Jekyll em um editor de texto e faça as alterações.

Observação: qualquer alteração que você fizer no arquivo de configuração entrará em vigor na próxima vez que você gerar o site com jekyll build ou jekyll serve.

Como criar um site estático no Jekyll?

Agora que você tem o Jekyll instalado em seu computador, é possível criar um site estático no Jekyll com um comando em poucos segundos. Abra seu terminal e execute este comando:

jekyll new joels-blog

Certifique-se de substituir “joels-blog” pelo nome de site de sua preferência.

Em seguida, navegue até a pasta do site. Você notará uma estrutura básica do site Jekyll que inclui diretórios e arquivos como estes:

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

Veja a seguir para que serve cada um desses diretórios e arquivos:

• _config.yml: O arquivo de configuração do Jekyll que contém as configurações e opções do seu site.
• _posts: Um diretório que contém o conteúdo do seu site (podem ser artigos de blog). Podem ser arquivos Markdown ou HTML com uma convenção específica de nomenclatura de arquivos: YEAR-MONTH-DAY-title.MARKUP.
• Gemfile e Gemfile.lock: O Bundler usa esses arquivos para gerenciar as gems Ruby nas quais o seu site se baseia.
• index.md: A página inicial padrão do seu site, gerada a partir de um arquivo Markdown ou HTML.

Existem mais arquivos e pastas que podem ser usados para personalizar seu site Jekyll. As pastas incluem:

• _includes: Um diretório que contém trechos de HTML reutilizáveis que podem ser incluídos em seus layouts e páginas. Por exemplo, barra de navegação, rodapé, etc.
• _layouts: Um diretório que contém templates de layout HTML que definem a estrutura de suas páginas.
• assets: Um diretório que contém todos os arquivos usados pelo site, como imagens e arquivos CSS.
• _sass: Um diretório que contém arquivos Sass que podem ser usados para gerar CSS para o seu site.

Essa estrutura de arquivos fornece uma base sólida para um projeto Jekyll, mas você pode modificá-la conforme necessário para atender às necessidades específicas do seu projeto.

Opção de início rápido: use nosso modelo do GitHub

Como alternativa para iniciar seu projeto usando a CLI do Jekyll, você pode criar um repositório Git usando o template Jekyll “Hello World” da Kinsta no GitHub. Selecione Use this template > Create a new repository para copiar o código inicial em um novo repositório dentro da sua própria conta do GitHub.

Como visualizar um site Jekyll

Agora você tem um site Jekyll, mas como visualizá-lo antes de começar a personalizá-lo para atender às suas necessidades? Abra o terminal e vá até o diretório do projeto. Em seguida, execute o seguinte comando:

jekyll serve

Isso gerará uma pasta _site que inclui todos os arquivos estáticos gerados no seu projeto. Ele também iniciará o servidor Jekyll, e você poderá visualizar o site em http://localhost:4000.

Se você acessar a URL no navegador de internet, verá o site do Jekyll com o tema “minima”:

Como personalizar um site Jekyll

Ao criar um site com o Jekyll e usar um tema, você pode personalizar o site para atender às suas necessidades. Por exemplo, talvez você queira adicionar novas páginas, alterar o layout de uma página ou ajustar como alguns itens são exibidos. Tudo isso é possível com o Jekyll.

Como o front matter funciona no Jekyll

Ao abrir cada página ou artigo de blog na pasta do seu projeto, você notará um bloco de informações dentro de três traços (—) na parte superior da página. Isso é chamado de front matter. É um formato de metadados usado no Jekyll para armazenar informações sobre uma página ou artigo. Pode ser escrito em YAML ou JSON.

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

No exemplo acima, o front matter inclui variáveis, como o título, a descrição e a data da publicação. Essas variáveis podem ser usadas no layout ou no conteúdo da página ou publicação.

O Jekyll analisa o front matter e o utiliza para gerar o HTML de saída para o seu site. Você pode usar o front matter para especificar várias opções, como layout, permalink, status da publicação etc.

Como configurar o front matter padrão

Você também pode configurar o front matter padrão, para não precisar definir o mesmo front matter para arquivos semelhantes. Por exemplo, se cada postagem de um blog usar os mesmos nome de autor e layout. Você pode definir um front matter personalizado no arquivo _config.yml para atender a todas os artigos de um blog.

A forma como ele é estruturado é um pouco complexa, mas aqui está o que você verá nele. Cole isto abaixo da última configuração em seu arquivo _config.yml:

defaults:
 -
   scope:
     path: "posts" # empty string means all files
   values:
     layout: "post"
     author: "John Doe"

Ao executar o comando jekyll serve, você notará que, mesmo que não defina o layout e o autor em cada publicação, ainda terá acesso a eles em seus arquivos.

Observação: quando você não define um caminho, todos os arquivos usarão os valores definidos no front matter.

Criação de páginas no Jekyll

Quando você cria um arquivo no diretório raiz do seu projeto, ele é considerado uma página. Na maioria das vezes, o nome que você dá ao arquivo é usado na URL; portanto, você deve dar a cada arquivo de página um nome que tenha um bom significado.

Por exemplo, se você quiser criar uma página com a URL https://example.com/about, crie um arquivo chamado about.html ou about.md. A extensão do arquivo determina a linguagem de marcação a ser usada para o conteúdo da página (HTML ou Markdown).

Depois que você tiver criado um arquivo, adicione o front matter e conteúdo apropriados. Salve o arquivo e atualize o site Jekyll no navegador. A nova página deverá estar acessível na URL correspondente ao nome do arquivo.

Criação de layouts no Jekyll

Você pode usar layouts para definir a estrutura e o design das páginas e publicações do seu site. Em geral, isso é feito principalmente com código HTML. Você pode incluir um cabeçalho, rodapé e metainformações com os metadados da página.

O primeiro passo seria criar uma pasta _layouts no diretório raiz do seu projeto. Daí crie um arquivo para cada layout — o arquivo deve ter um nome descritivo que reflita a finalidade do layout. Por exemplo, você pode criar um arquivo chamado page.html para definir o layout de todas as páginas do seu site.

É melhor você definir a estrutura geral de seus layouts com HTML ou outra linguagem de marcação.

Você pode incluir espaços reservados para qualquer conteúdo dinâmico que será inserido no layout, como o título da página, o conteúdo e metadados. Por exemplo, você pode criar um layout básico que inclua um cabeçalho, um rodapé e uma área de conteúdo como este:

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                
        </header>
        <main>{{ content }}</main>
        <footer>
            
        </footer>
    </body>
</html>

Neste exemplo, os espaços reservados {{ page.title }} e {{ content }} serão substituídos pelo título e pelo conteúdo reais da página que está sendo renderizada.

Nesse ponto, qualquer página ou artigo que use page como valor de layout em seu front matter terá esse layout. Você pode criar vários layouts na pasta _layouts e estilizar seus layouts como quiser. Você também pode substituir o layout de um tema definindo um layout com um nome semelhante.

Como a pasta _includes funciona no Jekyll

A pasta _includes contém trechos reutilizáveis de código que você pode incluir em diferentes partes do seu site. Por exemplo, você pode criar um arquivo navbar.html na pasta includes e adicioná-lo ao arquivo de layout page.html usando a tag {% include %}.

<!DOCTYPE html>
 <html>
     <head>
         <title>{{ page.title }} </title>
     </head>
     <body>
         <header>{% include navbar.html %} </header>
         <main>{{ content }} </main>
         <footer>
             
         </footer>
     </body>
 </html>

No momento da build, o Jekyll substituirá a tag pelo conteúdo de navbar.html.

A pasta _includes pode conter qualquer tipo de arquivo, como HTML, Markdown ou arquivos Liquid. O objetivo principal é manter seu código DRY (Don’t Repeat Yourself — Não Se Repita), permitindo que você reutilize código em todo o site.

Percorrendo publicações no Jekyll

Talvez você queira criar uma página de blog dedicada para armazenar todas as publicações do seu blog, o que significa buscar todas as publicações do seu site e percorrê-las. Com o Jekyll, você pode fazer isso facilmente usando a tag {% for %}.

Todas as publicações em qualquer site do Jekyll são armazenadas na variável site.posts. Você pode percorrê-las e usar a variável Liquid {{ post.title }} para gerar o título de cada publicação desta forma:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

Você também pode usar variáveis Liquid adicionais para gerar outras informações sobre cada publicação, como a data ou o autor da publicação:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

Observe que, no exemplo acima, o filtro Liquid de data formata a data de cada publicação em um formato mais legível.

Agora você tem uma ideia de algumas formatações básicas que podem ser feitas no seu site Jekyll. Mas talvez não seja necessário usar tudo isso para criar um site Jekyll do zero, pois você sempre pode procurar um tema que atenda às suas necessidades e adicioná-lo mais tarde ao seu site Jekyll.

Como adicionar um tema a um site Jekyll

Existem vários temas fáceis de adicionar, com informações claras sobre como instalá-los no arquivo ReadMe no GitHub. Você pode optar por clonar o tema, ou, se for um tema baseado em gems, o processo é ainda mais fácil.

Para este artigo, você instalaria um tema de blog e o personalizaria para ter um site de blog implementado na Kinsta. Esse é um tema baseado em gem e você pode acessar seu código-fonte e instruções no GitHub.

Para adicionar um tema baseado em gem, abra o Gemfile do seu site e adicione a gem para o tema que você deseja usar. O tema que usaremos é o jekyll-theme-clean-blog. Você pode substituir o tema padrão minima no Gemfile:

gem "jekyll-theme-clean-blog"

Execute o comando bundle install no diretório do seu site para instalar a gem do tema e suas dependências.

No arquivo _config.yml do seu site, adicione a seguinte linha para especificar o tema que deseja usar:

theme: jekyll-theme-clean-blog

A esta altura, seu tema está pronto para ser usado.

Você deve remover todos os layouts do diretório _layouts para evitar que eles substituam o layout do tema.

Em seguida, você pode encontrar os nomes de layout dos seus arquivos na documentação do tema. Por exemplo, se você estiver usando o tema jekyll-theme-clean-blog, o nome do layout do arquivo index.html é home, o de outras páginas é page e o de todas as publicações é post.

Por fim, execute jekyll serve para criar e servir seu site usando o novo tema.

É isso aí! Seu site Jekyll agora deve estar usando o novo tema baseado em gem que você adicionou. Você pode personalizar ainda mais o tema modificando seu layout nos diretórios _layouts do seu site.

Personalizar um tema do Jekyll

Agora que você adicionou o tema ao seu site, a próxima ação será personalizar o site para que ele atenda às suas necessidades e funcione como deve. Por exemplo, as imagens de cada página e artigo não são exibidas, mas sim um fundo cinza.

Você pode corrigir isso adicionando uma opção de front matter a cada página e publicação, especificando o caminho para uma imagem que deseja usar. No Jekyll, os recursos como imagens são armazenados na pasta assets. Nessa pasta, você pode decidir criar subpastas para organizar suas imagens.

Agora você pode adicionar uma opção de plano de fundo ao bloco front matter e um caminho para sua imagem. Por exemplo, na página Sobre, este é o front matter:

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

Se você fizer isso em todas as páginas e publicações, sua página terá a seguinte aparência:

Outra personalização que você pode fazer é ajustar as opções da barra de navegação. Por exemplo, talvez você não precise de uma página de contato, o que significa que deve remover o link dela das opções da barra de navegação. Você pode fazer isso estudando o código-fonte do tema, observando o arquivo responsável pelos links de navegação e replicando o arquivo de forma exata em seu projeto, removendo a opção de que não precisa.

Os links de navegação estão no arquivo navbar.html da pasta _includes. Você pode criar esse arquivo, colar o código do seu código-fonte e remover a opção de contato ou adicionar qualquer nova opção que desejar.

Ao salvar o projeto, você notará que as opções de navegação serão personalizadas:

Por fim, uma última personalização seria a criação de uma página de publicações que conterá todos os artigos do blog, o que significa que você percorrerá todas as publicações nessa página.

Crie um arquivo posts.html e cole o seguinte código:

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
        <h2 class="post-title">{{ post.title }}</h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        {% else %}
        <h3 class="post-subtitle">
            {{ post.excerpt | strip_html | truncatewords: 15 }}
        </h3>
        {% endif %}
    </a>
    <p class="post-meta">
        Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
        }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
        read_time.html content=post.content %}
    </p>
</article>

<hr />

{% endfor %}

Sinta-se à vontade para ajustar a imagem de fundo para refletir a imagem que você salvou. No código acima, você está percorrendo todas as publicações para exibir todas elas nesta página. É assim que a página de publicação ficará quando você a salvar.

Como adicionar conteúdo a um site Jekyll

Agora você criou um site Jekyll e o configurou para atender às suas necessidades. A última etapa seria adicionar conteúdo, ou saber como ele pode ser adicionado a um site Jekyll.

Todo o conteúdo é armazenado na pasta _posts. Cada peça de conteúdo é armazenada em um arquivo com nome convencionado, tipo YYYY-MM-DD-title.md (ou .html para arquivos HTML). Por exemplo, se quiser criar uma publicação chamada “Minha Primeira Postagem”, crie um arquivo 2023-03-08-minha-primeira-postagem.md no diretório _posts.

Em seguida, para cada arquivo de publicação/conteúdo, certifique-se de adicionar o front matter sobre a publicação na parte superior. Isso incluirá o layout, o título, a descrição, a data e outras informações.

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

Daí você pode adicionar seu conteúdo abaixo do bloco front matter com tags HTML ou sintaxe Markdown.

Salve o arquivo, e o Jekyll fará a build e o incluirá automaticamente em seu site.

Como implantar seu site Jekyll na Kinsta

A Kinsta é uma plataforma de nuvem que permite que você hospede sites estáticos, incluindo o Jekyll. Você pode fazer isso definindo algumas configurações, enviando seus códigos para o GitHub e, por fim, implantado na Kinsta.

Pré-requisitos: Configurando seu site Jekyll

Verifique seu arquivo Gemfile.lock para se certificar de que inclui uma plataforma para todos os dispositivos. Para ter certeza de que todas as plataformas estão configuradas corretamente, execute o seguinte comando:

bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

A seguir, você pode criar um Procfile — arquivo que especifica os comandos que são executados quando o site é implementado. Esse arquivo atualiza automaticamente os comandos a serem executados na aba Processo do MyKinsta. Este é o comando a ser adicionado ao seu Procfile:

web: bundle exec jekyll build && ruby -run -e httpd _site

Enviando seu site Jekyll para o GitHub

Para este artigo, vamos usar os comandos do Git para enviar seus códigos para o GitHub. Primeiro, crie um repositório no GitHub; isso lhe dará acesso à URL do repositório.

Agora você pode inicializar um repositório Git local abrindo o terminal, navegando até o diretório que contém seu projeto e executando o seguinte comando:

git init

Agora adicione seu código ao repositório local do Git usando o seguinte comando:

git add

Confirme suas alterações usando o seguinte comando:

git commit -m "my first commit"

Observação: Você pode substituir “my first commit” por uma breve mensagem descrevendo suas alterações.

Por fim, envie seu código para o GitHub usando os seguintes comandos:

git remote add origin [repository URL]
git push -u origin master

Observação: Certifique-se de substituir “[repository URL]” pela URL do seu próprio repositório do GitHub.

Quando você tiver concluído essas etapas, seu código será enviado para o GitHub e poderá ser acessado por meio da URL do seu repositório. Agora você pode implementar na Kinsta!

Implantando seu site Jekyll na Kinsta

A implantação na Kinsta pode ser feita em questão de minutos. Comece no painel My Kinsta para fazer login ou criar sua conta. Em seguida, você autorizará a Kinsta no GitHub.

Você pode então seguir estas etapas para implantar seu site Jekyll com a Hospedagem de Aplicativos da Kinsta:

1. Clique em Aplicativos na barra lateral esquerda
2. Clique em Adicionar serviço
3. Clique em Aplicativo no menu suspenso

Será exibido um modal por meio do qual você pode selecionar o repositório que deseja implantar. Selecione o branch que você deseja implementar, se houver vários branches em seu repositório.

Você pode então atribuir um nome a esse aplicativo. Selecione um local de centro de dados entre os 25 disponíveis, e o Procfile fornecerá automaticamente o comando do processo da web.

Seu aplicativo começará a ser implantado. Em alguns minutos você receberá um link para acessar a versão implantada do seu site. Neste caso, ele é: https://myblog-84b54.kinsta.app/.

Você também tem a opção de implantar seu site Jekyll gratuitamente com a Hospedagem de Site Estático da Kinsta.

Resumo

Até aqui, você aprendeu como o Jekyll funciona e as várias opções de personalização que pode fazer com ele. Você pode constatar que o Jekyll é uma excelente ferramenta para criar sites estáticos devido à sua simplicidade, flexibilidade e recursos avançados.

O sistema intuitivo de templates do Jekyll, os templates Liquid e o suporte integrado para Markdown e outras linguagens de marcação facilitam a criação e o gerenciamento rápido de sites ricos em conteúdo.

Sinta-se à vontade para hospedar todos os seus sites estáticos gratuitamente com a Hospedagem de Aplicativos da Kinsta. E, se gostar, opte pelo nosso plano Hobby Tier, a partir de $7/mês.

O que você acha do Jekyll? Você já utilizou o Jekyll para criar alguma coisa? Fique à vontade para compartilhar seus projetos e experiências conosco na seção de comentários abaixo.