Jekyll Tutorial: Como criar um site estático

Na era digital de hoje, ter um site é essencial para estabelecer uma presença online, promover sua marca e alcançar clientes em potencial. No entanto, criar um site pode ser uma tarefa assustadora.

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

Neste artigo, você será apresentado a um dos SSGs populares - Jekyll, aprenderá como ele funciona e como você pode criar um site estático com ele.

Aqui está uma demonstração ao vivo do blog que você criará com Jekyll.

Você pode acessar o repositório GitHub do projeto se quiser dar uma olhada mais de perto.

O que é Jekyll?

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

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

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

1. Fácil de usar : 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 do lado do servidor, o que significa que há menos risco de vulnerabilidades e ataques. Ele gera arquivos HTML estáticos tornando seu site incrivelmente rápido e seguro.
3. Personalizável: Jekyll é altamente personalizável, permitindo que você use layouts e modelos ou até mesmo crie plugins para estender a funcionalidade.
4. Fácil de implantar : Jekyll gera arquivos HTML estáticos que podem ser implantados em um servidor web ou provedor de hospedagem sem a necessidade de um sistema de gerenciamento de conteúdo dinâmico.
5. Apoiado por uma grande comunidade: Jekyll tem uma grande comunidade de usuários e desenvolvedores, o que significa que muitos recursos estão disponíveis se você precisar de ajuda ou quiser estender a funcionalidade do seu site.

Como instalar Jekyll

Você primeiro precisa instalar o Ruby em sua máquina antes de prosseguir com a instalação do 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 usar essa versão do Ruby para instalar o Jekyll porque é antigo. Por exemplo, no Ventura, o sistema operacional mais recente da Apple, a versão do Ruby que vem pré-instalada é a 2.6.10, da qual a versão mais recente é a 3.1.3 (a partir do momento em que este artigo foi escrito).

Para corrigir isso, você precisaria instalar o Ruby corretamente usando um gerenciador de versão como o chruby. Você precisaria instalar o Homebrew no seu Mac primeiro usando o comando abaixo no seu terminal:

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

Depois que a instalação for bem-sucedida, saia e reinicie o Terminal e verifique se o Homebrew está pronto executando este comando:

 brew doctor

Se você obtiver “ Your system is ready to brew” , agora você pode prosseguir para instalar chruby e o ruby-install com o comando abaixo:

 brew install chruby ruby-install

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

 ruby-install 3.1.3

Isto leverá alguns minutos. Depois de bem-sucedido, configure seu shell para usar chruby automaticamente 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

Agora você pode sair e reiniciar seu terminal e verificar se tudo funciona executando este comando:

 ruby -v

Deve dizer ruby ​​3.1.3 .

Agora você tem a versão mais recente do Ruby instalada em sua máquina. Agora você pode prosseguir para instalar o Jekyll e a gem do bundler mais recentes:

 gem install jekyll bundler

Como instalar o Jekyll no Windows

Para instalar Ruby e Jekyll em uma máquina Windows, você usaria o RubyInstaller. Isso pode ser feito baixando e instalando uma versão Ruby+Devkit de RubyInstaller Downloads e usando as opções padrão para instalação.

No último estágio do assistente de instalação, execute a etapa ridk install — que é usada para instalar gems. Leia mais na documentação do RubyInstaller.

Nas opções, escolha a cadeia de ferramentas de desenvolvimento MSYS2 e MINGW. Abra uma nova janela de prompt de comando e instale o Jekyll and 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 seu terminal e execute o seguinte comando:

 jekyll -v

Se você vir o número da versão, 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 customizar um site estático com Jekyll, é bom se familiarizar com seus vários comandos CLI e parâmetros de arquivo de configuração.

Jekyll Comandos CLI

Aqui estão alguns dos comandos Jekyll CLI populares. Você não precisa memorizá-los, apenas saiba que eles existem e sinta-se à vontade para verificar o que cada um deles faz quando notar 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 web em sua máquina local, permitindo que você visualize o site em seu 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 : gera qualquer problema de configuração ou dependência que possa estar presente.
• jekyll clean : Exclui o diretório _site , que é onde os arquivos do site gerados são armazenados.
• jekyll help : Gera a documentação de ajuda para Jekyll.
• jekyll serve --draft : Gera e exibe seu site Jekyll, incluindo quaisquer postagens que estejam no diretório _drafts .

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

Ficheiro de Configuração do JekyllName

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

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

• title: O título do seu site.
• descrição: Uma breve descrição do seu site.
• url: A URL base do seu site.
• baseurl: O subdiretório do seu site, se estiver hospedado em um subdiretório de um domínio.
• permalink: A estrutura de URL para suas postagens 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.
• paginar: O número de postagens a serem exibidas por página ao usar a paginação.
• plugins: Uma lista de plugins Jekyll para carregar.
• tema: Por padrão, é definido como 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 modelos, layouts e inclusões de seu site. Por exemplo, você pode criar uma variável chamada author_name e usá-la em seus modelos como este: {{ 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: todas as alterações feitas no arquivo de configuração entrarão em vigor na próxima vez que você gerar seu site com jekyll build ou jekyll serve .

Como você cria um site estático no Jekyll?

Agora que você tem o Jekyll instalado em sua máquina, agora é possível criar um site estático 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 do seu site preferido.

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 para que serve cada um desses diretórios e arquivos:

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

Mas há mais arquivos/pastas que podem ser usados ​​para personalizar seu site Jekyll. Essas 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. Como barra de navegação, rodapé, etc.
• _layouts: um diretório que contém modelos de layout HTML que definem a estrutura de suas páginas.
• assets: um diretório que contém todos os arquivos usados ​​pelo seu site, como imagens e arquivos CSS.
• _sass: Um diretório que contém arquivos Sass que podem ser usados ​​para gerar CSS para seu site.

Essa estrutura de arquivo fornece uma base sólida para um projeto Jekyll, mas você pode modificá-la conforme necessário para atender às necessidades específicas de 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 modelo Jekyll “Hello World” da Kinsta no GitHub. Selecione Usar este modelo > Criar um novo repositório para copiar o código inicial em um novo repositório em sua própria conta do GitHub.

Como visualizar um site Jekyll

Agora você tem um site Jekyll, mas como pode visualizar o site para ver como ele se parece antes de começar a personalizá-lo para atender às suas necessidades? Abra seu terminal e vá para o diretório do seu projeto e execute o seguinte comando:

 jekyll serve

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

Se você visitar o URL em seu navegador da Web, deverá ver seu site Jekyll com o tema mínimos:

Como personalizar um site Jekyll

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

Como o Front Matter funciona no Jekyll

Ao abrir cada página ou postagem de blog da pasta do seu projeto, você notará um bloco de informações dentro de três traços (—) na parte superior da página. Isso é conhecido como matéria inicial .

É um formato de metadados usado no Jekyll, para armazenar informações sobre uma página ou postagem — 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 assunto inicial inclui variáveis, como título, descrição e data do post. Essas variáveis ​​podem ser usadas no layout ou conteúdo da página ou post.

Jekyll analisa o material inicial e o usa para gerar o HTML de saída para o seu site. Você pode usar matéria inicial para especificar várias opções, como layout, permalink, status publicado, etc.

Como configurar a matéria frontal padrão

Você também pode configurar a capa padrão, para não precisar definir a mesma capa para arquivos semelhantes. Por exemplo, se cada postagem de blog usar o mesmo nome e layout do autor. Você pode definir um assunto inicial personalizado em seu arquivo _config.yml para atender a todas as postagens do seu blog.

A forma como está estruturado é um pouco complexo, mas aqui está como ficará. Cole isso 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"

Agora, ao executar o comando jekyll serve , você notará que, mesmo quando não definir o layout e o autor de cada postagem, ainda terá acesso a eles em seus arquivos.

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

Criando páginas no Jekyll

Quando você cria um arquivo no diretório raiz do seu projeto, ele é considerado uma página. O nome que você dá ao arquivo é usado na maioria das vezes no URL, então você nomeará cada arquivo de página com um nome que ressoe bem.

Por exemplo, se você deseja criar uma página com a URL https://example.com/about , crie um arquivo chamado about.htm l 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 de criar um arquivo, adicione matéria inicial e conteúdo apropriados. Salve o arquivo e atualize seu site Jekyll no navegador. A nova página agora deve estar acessível no URL correspondente ao nome do arquivo.

Criando layouts em Jekyll

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

A primeira etapa seria criar uma pasta _layouts no diretório raiz do seu projeto. Em seguida, 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.htm l para definir o layout de todas as páginas do seu site.

É melhor 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 título da página, conteúdo e metadados. Por exemplo, você pode criar um layout básico que inclua cabeçalho, rodapé e área de conteúdo como esta:

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

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

Neste ponto, qualquer página ou post que usa page como seu valor de layout em sua matéria inicial terá esse layout. Você pode criar vários layouts dentro da 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 de código reutilizáveis ​​que você pode incluir em diferentes partes do seu site. Por exemplo, você pode criar um arquivo navbar.html em sua pasta includes e adicioná-lo ao seu 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 content goes here --> </footer> </body> </html>

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

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

Percorrendo postagens em Jekyll

Você pode querer criar uma página de blog dedicada para conter todas as suas postagens, isso significa que você deseja buscar todas as postagens em seu site e percorrê-las. Com Jekyll é fácil conseguir usando a tag {% for %} .

Todas as postagens em qualquer site Jekyll são armazenadas na variável site.posts . Você pode percorrer e usar a variável Liquid {{ post.title }} para gerar o título de cada post 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 postagem, como a data ou o autor da postagem:

 {% 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 Date Liquid formata a data de cada postagem 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 você pode não precisar usar tudo isso para criar um site Jekyll do zero, porque sempre pode procurar um tema que atenda às suas necessidades e adicioná-lo ao seu site Jekyll.

Como adicionar um tema a um site Jekyll

Existem vários temas fáceis de adicionar, mas o bom é que, para cada tema, sempre há informações claras sobre como instalá-los no arquivo ReadMe no GitHub. Você pode decidir clonar o tema ou, se for um tema baseado em gem, o processo é mais fácil.

Para este artigo, você instalaria um tema de blog e o personalizaria para ter um site de blog implantado em Kinsta. Este é um tema baseado em geração 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 deseja usar. O tema que usaremos é o jekyll-theme-clean-blog . Você pode substituir o tema mínimo padrão 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

Neste ponto, seu tema está pronto para uso.

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

Você pode encontrar os nomes de layout para seus arquivos na documentação do tema. Por exemplo, se você estiver usando o tema jekyll-theme-clean-blog , os nomes de layout para o arquivo index.html são home , outras páginas são page e todas as postagens são post .

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

É isso! 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.

Personalize um tema Jekyll

Agora você tem seu tema adicionado ao seu site, a próxima ação seria customizar o site para atender às suas necessidades e funcionar como ele deve funcionar. Por exemplo, as imagens de cada página e postagem não são exibidas, mas exibem um fundo cinza.

Você pode corrigir isso adicionando uma opção de capa a cada página e postagem especificando o caminho para uma imagem que deseja usar. No Jekyll, ativos como imagens são armazenados na pasta de ativos . Nesta pasta, você pode decidir criar subpastas para organizar suas imagens.

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

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

Faça isso para todas as páginas e postagens e sua página ficará assim:

Outra personalização que você pode fazer é ajustar as opções da barra de navegação. Por exemplo, você pode não precisar de uma página de contato, o que significa que você deve remover seu link 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 exatamente no seu projeto, retirando a opção que não precisa.

Os links de navegação estão no arquivo navbar.html da pasta _includes. Você pode criar este 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 seu projeto, você notará que as opções de navegação serão personalizadas:

Por fim, uma última personalização seria criar uma página de postagens que conterá todas as postagens do seu blog - o que significa que você percorrerá todas as postagens dessa 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 sua imagem salva. No código acima, você está percorrendo todas as postagens para exibir todas as postagens desta página. É assim que a página de postagens ficará quando salva.

Como adicionar conteúdo a um site Jekyll

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

Todo o conteúdo é armazenado na pasta _posts. Cada conteúdo é armazenado em um arquivo com uma convenção de nomenclatura semelhante de AAAA-MM-DD-title.md (ou .html para arquivos HTML). Por exemplo, se você deseja criar um post chamado “My First Post”, crie um 2023-03-08-my-first-post.md no diretório _posts .

Em seguida, para cada postagem/arquivo de conteúdo, certifique-se de adicionar matéria inicial sobre a postagem na parte superior. Isso incluirá o layout, título, descrição, 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' ---

Em seguida, você pode adicionar seu conteúdo abaixo do bloco inicial com tags HTML ou sintaxe de remarcação.

Salve o arquivo e o Jekyll o criará e incluirá automaticamente em seu site.

Como implantar seu site Jekyll em Kinsta

Kinsta é uma plataforma de nuvem que permite hospedar sites estáticos, incluindo Jekyll. Isso pode ser feito definindo algumas configurações, enviando seus códigos para o GitHub e, finalmente, implantando no Kinsta.

Pré-requisitos: Configurando seu site Jekyll

Verifique seu arquivo Gemfile.lock e certifique-se de que inclui uma plataforma para todos os dispositivos. Para garantir que todas as plataformas estejam configuradas corretamente, execute o seguinte comando:

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

Em seguida, você pode criar um Procfile — esse arquivo especifica os comandos que são executados quando seu site é implantado. Este arquivo atualiza automaticamente os comandos a serem executados na guia Processo do MyKinsta. Este é o comando a ser adicionado ao seu Procfile:

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

Envie 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 ao URL do repositório.

Agora você pode inicializar um repositório Git local abrindo seu 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 Git local usando o seguinte comando:

 git add

Agora você pode confirmar suas alterações usando o seguinte comando:

 git commit -m "my first commit"

Observação: você pode substituir “meu primeiro 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

Nota: Certifique-se de substituir “[URL do repositório]” ​​pelo seu próprio URL do repositório GitHub.

Depois de concluir 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 implantar em Kinsta!

Implantando seu site Jekyll em Kinsta

A implantação em Kinsta acontece em apenas alguns minutos. Comece no painel My Kinsta para fazer login ou criar sua conta. Em seguida, você autorizará Kinsta no GitHub.

Você pode seguir estas etapas para implantar seu site Jekyll:

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

Aparecerá um modal através do qual você pode selecionar o repositório que deseja implantar. Selecione uma ramificação que deseja implantar se tiver várias ramificações em seu repositório.

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

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

Resumo

Até agora, você aprendeu como o Jekyll funciona e as várias personalizações que você pode fazer com o Jekyll. Agora é seguro concordar que Jekyll é uma excelente ferramenta para criar sites estáticos devido à sua simplicidade, flexibilidade e recursos poderosos.

O sistema de modelagem intuitivo de Jekyll, modelos líquidos e 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 com a Hospedagem de aplicativos Kinsta gratuitamente e, se gostar, opte por nosso plano Hobby Tier, a partir de US$ 7/mês .

Qual é a sua opinião sobre Jekyll? Você já utilizou Jekyll para construir alguma coisa? Sinta-se à vontade para compartilhar seus projetos e experiências conosco na seção de comentários abaixo.