Neste artigo, voc\u00ea conhecer\u00e1 um dos SSGs mais populares, o Jekyll, aprender\u00e1 como ele funciona e como voc\u00ea pode criar um site est\u00e1tico<\/a> com ele.<\/p>\n Aqui est\u00e1 uma demonstra\u00e7\u00e3o em tempo real do site de blog<\/a> que voc\u00ea criar\u00e1 com o Jekyll.<\/p>\n Voc\u00ea pode acessar o reposit\u00f3rio GitHub do projeto<\/a> se quiser examin\u00e1-lo mais de perto.<\/p>\n O Jekyll \u00e9 um SSG gratuito de c\u00f3digo aberto que foi criado e \u00e9 executado na linguagem de programa\u00e7\u00e3o Ruby<\/a>. Voc\u00ea n\u00e3o precisa entender como o Ruby funciona para usar o Jekyll; apenas precisa ter o Ruby instalado em sua m\u00e1quina.<\/p>\n O Jekyll pode ser usado para criar v\u00e1rios tipos de sites est\u00e1ticos, como um blog pessoal, um site de portf\u00f3lio e um site de documenta\u00e7\u00e3o, sem precisar de banco de dados nem usar um sistema de gerenciamento de conte\u00fado como o WordPress<\/a>.<\/p>\n Aqui est\u00e1 o que faz o Jekyll se destacar entre os SSGs:<\/p>\n Primeiro, voc\u00ea precisa instalar o Ruby em seu computador, antes de instalar o Jekyll, conforme indicado na documenta\u00e7\u00e3o do Jekyll<\/a>.<\/p>\n Por padr\u00e3o, o Ruby vem pr\u00e9-instalado com o macOS, mas n\u00e3o \u00e9 recomend\u00e1vel que voc\u00ea use essa vers\u00e3o do Ruby para instalar o Jekyll, pois ela \u00e9 antiga. Por exemplo, no Ventura, o sistema operacional mais recente da Apple, a vers\u00e3o do Ruby que vem pr\u00e9-instalada \u00e9 a 2.6.10, sendo que no momento em que este artigo est\u00e1 sendo escrito a vers\u00e3o mais recente \u00e9 a 3.1.3.<\/p>\n Para corrigir isso, voc\u00ea precisa instalar o Ruby corretamente usando um gerenciador de vers\u00e3o como o chruby<\/a>. Primeiro voc\u00ea precisa instalar o Homebrew<\/a> no Mac, usando o comando abaixo no Terminal:<\/p>\n Quando a instala\u00e7\u00e3o for bem-sucedida, saia e reinicie o Terminal. Ent\u00e3o verifique se o Homebrew est\u00e1 pronto para ser usado executando este comando:<\/p>\n Se voc\u00ea receber a mensagem “Your system is ready to Brew<\/strong>” (‘Seu sistema est\u00e1 pronto para o Brew’), poder\u00e1 prosseguir com a instala\u00e7\u00e3o do <\/span> Agora voc\u00ea pode instalar a vers\u00e3o mais recente do Ruby (hoje, a 3.1.3), usando o pacote Isso levar\u00e1 alguns minutos. Depois que a instala\u00e7\u00e3o for bem-sucedida, configure seu shell para usar automaticamente o Voc\u00ea pode sair e reiniciar o Terminal, e, em seguida, verificar se tudo est\u00e1 funcionando corretamente executando este comando:<\/p>\n A resposta dever\u00e1 ser\u00a0ruby 3.1.3<\/strong>.<\/p>\n Agora voc\u00ea tem a vers\u00e3o mais recente do Ruby instalada em sua m\u00e1quina. Prossiga instalando a vers\u00e3o mais recente do Jekyll e do pacote bundler com o seguinte comando:<\/p>\n Para instalar o Ruby e o Jekyll em uma m\u00e1quina Windows, voc\u00ea deve usar o RubyInstaller<\/a>. Voc\u00ea pode fazer isso baixando e instalando uma vers\u00e3o do Ruby+Devkit<\/strong> em RubyInstaller Downloads<\/a> e usando as op\u00e7\u00f5es padr\u00e3o para instala\u00e7\u00e3o.<\/p>\n Na \u00faltima etapa do assistente de instala\u00e7\u00e3o, execute a entrada Entre as op\u00e7\u00f5es, 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:<\/p>\n Para verificar se o Jekyll est\u00e1 instalado corretamente em sua m\u00e1quina, abra o terminal e execute o seguinte comando:<\/p>\n Se o n\u00famero da vers\u00e3o aparecer, isso significa que o Jekyll est\u00e1 instalado e funcionando corretamente em seu sistema. Agora voc\u00ea est\u00e1 pronto para usar o Jekyll!<\/p>\n Antes de come\u00e7armos a criar e personalizar um site est\u00e1tico com o Jekyll, \u00e9 bom que voc\u00ea se familiarize com os v\u00e1rios comandos da CLI e os par\u00e2metros do arquivo de configura\u00e7\u00e3o.<\/p>\n Aqui est\u00e3o alguns dos comandos populares da CLI do Jekyll. Voc\u00ea n\u00e3o precisa memoriz\u00e1-los, apenas saber que eles existem e ficar \u00e0 vontade para verificar o que cada um deles faz quando perceber seu uso mais adiante neste artigo.<\/p>\n Voc\u00ea tamb\u00e9m pode anexar algumas op\u00e7\u00f5es a esses comandos. Consulte uma lista completa de comandos e op\u00e7\u00f5es do Jekyll na documenta\u00e7\u00e3o do Jekyll<\/a>.<\/p>\n O arquivo de configura\u00e7\u00e3o do Jekyll \u00e9 um arquivo YAML chamado _config.yml<\/strong> que cont\u00e9m configura\u00e7\u00f5es e op\u00e7\u00f5es para o seu site Jekyll. \u00c9 usado para configurar v\u00e1rios aspectos do seu site, inclusive o t\u00edtulo, a descri\u00e7\u00e3o, a URL e outras configura\u00e7\u00f5es.<\/p>\n Aqui est\u00e3o algumas das configura\u00e7\u00f5es mais comumente usadas:<\/p>\n Voc\u00ea tamb\u00e9m pode criar vari\u00e1veis personalizadas em seu arquivo de configura\u00e7\u00e3o e us\u00e1-las nos templates, layouts e includes do seu site. Por exemplo, voc\u00ea pode criar uma vari\u00e1vel chamada Para modificar o arquivo de configura\u00e7\u00e3o do Jekyll, abra o arquivo _config.yml<\/strong> no diret\u00f3rio do projeto Jekyll em um editor de texto e fa\u00e7a as altera\u00e7\u00f5es.<\/p>\n Observa\u00e7\u00e3o<\/strong>: qualquer altera\u00e7\u00e3o que voc\u00ea fizer no arquivo de configura\u00e7\u00e3o entrar\u00e1 em vigor na pr\u00f3xima vez que voc\u00ea gerar o site com Agora que voc\u00ea tem o Jekyll instalado em seu computador, \u00e9 poss\u00edvel criar um site est\u00e1tico no Jekyll com um comando em poucos segundos. Abra seu terminal e execute este comando:<\/p>\n Certifique-se de substituir “joels-blog” pelo nome de site de sua prefer\u00eancia.<\/p>\n Em seguida, navegue at\u00e9 a pasta do site. Voc\u00ea notar\u00e1 uma estrutura b\u00e1sica do site Jekyll que inclui diret\u00f3rios e arquivos como estes:<\/p>\n Veja a seguir para que serve cada um desses diret\u00f3rios e arquivos:<\/p>\n Existem mais arquivos e pastas que podem ser usados para personalizar seu site Jekyll. As pastas incluem:<\/p>\n Essa estrutura de arquivos fornece uma base s\u00f3lida para um projeto Jekyll, mas voc\u00ea pode modific\u00e1-la conforme necess\u00e1rio para atender \u00e0s necessidades espec\u00edficas do seu projeto.<\/p>\n Como alternativa para iniciar seu projeto usando a CLI do Jekyll, voc\u00ea pode criar um reposit\u00f3rio Git usando o template Jekyll “Hello World”<\/a>\u00a0da Kinsta no GitHub. Selecione Use this template > Create a new repository<\/strong>\u00a0para copiar o c\u00f3digo inicial em um novo reposit\u00f3rio dentro da sua pr\u00f3pria conta do GitHub.<\/p>\n Agora voc\u00ea tem um site Jekyll, mas como visualiz\u00e1-lo antes de come\u00e7ar a personaliz\u00e1-lo para atender \u00e0s suas necessidades? Abra o terminal e v\u00e1 at\u00e9 o diret\u00f3rio do projeto. Em seguida, execute o seguinte comando:<\/p>\n Isso gerar\u00e1 uma pasta _site<\/strong> que inclui todos os arquivos est\u00e1ticos gerados no seu projeto. Ele tamb\u00e9m iniciar\u00e1 o servidor Jekyll, e voc\u00ea poder\u00e1 visualizar o site em http:\/\/localhost:4000<\/strong>.<\/p>\n Se voc\u00ea acessar a URL no navegador de internet, ver\u00e1 o site do Jekyll com o tema “minima”:<\/p>\n Ao criar um site com o Jekyll e usar um tema, voc\u00ea pode personalizar o site para atender \u00e0s suas necessidades. Por exemplo, talvez voc\u00ea queira adicionar novas p\u00e1ginas, alterar o layout de uma p\u00e1gina ou ajustar como alguns itens s\u00e3o exibidos. Tudo isso \u00e9 poss\u00edvel com o Jekyll.<\/p>\n Ao abrir cada p\u00e1gina ou artigo de blog na pasta do seu projeto, voc\u00ea notar\u00e1 um bloco de informa\u00e7\u00f5es dentro de tr\u00eas tra\u00e7os (—) na parte superior da p\u00e1gina. Isso \u00e9 chamado de front matter<\/strong>. \u00c9 um formato de metadados usado no Jekyll para armazenar informa\u00e7\u00f5es sobre uma p\u00e1gina ou artigo. Pode ser escrito em YAML ou JSON.<\/p>\n No exemplo acima, o front matter inclui vari\u00e1veis, como o t\u00edtulo, a descri\u00e7\u00e3o e a data da publica\u00e7\u00e3o. Essas vari\u00e1veis podem ser usadas no layout ou no conte\u00fado da p\u00e1gina ou publica\u00e7\u00e3o.<\/p>\n O Jekyll analisa o front matter e o utiliza para gerar o HTML de sa\u00edda para o seu site. Voc\u00ea pode usar o front matter para especificar v\u00e1rias op\u00e7\u00f5es, como layout, permalink, status da publica\u00e7\u00e3o etc.<\/p>\n Voc\u00ea tamb\u00e9m pode configurar o front matter padr\u00e3o, para n\u00e3o 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\u00ea pode definir um front matter personalizado no arquivo _config.yml<\/strong> para atender a todas os artigos de um blog.<\/p>\n A forma como ele \u00e9 estruturado \u00e9 um pouco complexa, mas aqui est\u00e1 o que voc\u00ea ver\u00e1 nele. Cole isto abaixo da \u00faltima configura\u00e7\u00e3o em seu arquivo _config.yml<\/strong>:<\/p>\n Ao executar o comando Observa\u00e7\u00e3o<\/strong>: quando voc\u00ea n\u00e3o define um caminho, todos os arquivos usar\u00e3o os valores definidos no front matter.<\/p>\n Quando voc\u00ea cria um arquivo no diret\u00f3rio raiz do seu projeto, ele \u00e9 considerado uma p\u00e1gina. Na maioria das vezes, o nome que voc\u00ea d\u00e1 ao arquivo \u00e9 usado na URL; portanto, voc\u00ea deve dar a cada arquivo de p\u00e1gina um nome que tenha um bom significado.<\/p>\n Por exemplo, se voc\u00ea quiser criar uma p\u00e1gina com a URL https:\/\/example.com\/about<\/strong>, crie um arquivo chamado about.html<\/strong>\u00a0ou about.md<\/strong>. A extens\u00e3o do arquivo determina a linguagem de marca\u00e7\u00e3o a ser usada para o conte\u00fado da p\u00e1gina (HTML ou Markdown).<\/p>\n Depois que voc\u00ea tiver criado um arquivo, adicione o front matter e conte\u00fado apropriados. Salve o arquivo e atualize o site Jekyll no navegador. A nova p\u00e1gina dever\u00e1 estar acess\u00edvel na URL correspondente ao nome do arquivo.<\/p>\n Voc\u00ea pode usar layouts para definir a estrutura e o design das p\u00e1ginas e publica\u00e7\u00f5es do seu site. Em geral, isso \u00e9 feito principalmente com c\u00f3digo HTML. Voc\u00ea pode incluir um cabe\u00e7alho, rodap\u00e9 e metainforma\u00e7\u00f5es com os metadados da p\u00e1gina.<\/p>\n O primeiro passo seria criar uma pasta _layouts<\/strong> no diret\u00f3rio raiz do seu projeto. Da\u00ed crie um arquivo para cada layout \u2014 o arquivo deve ter um nome descritivo que reflita a finalidade do layout. Por exemplo, voc\u00ea pode criar um arquivo chamado page.html <\/strong>para definir o layout de todas as p\u00e1ginas do seu site.<\/p>\n \u00c9 melhor voc\u00ea definir a estrutura geral de seus layouts com HTML ou outra linguagem de marca\u00e7\u00e3o.<\/p>\n Voc\u00ea pode incluir espa\u00e7os reservados para qualquer conte\u00fado din\u00e2mico que ser\u00e1 inserido no layout, como o t\u00edtulo da p\u00e1gina, o conte\u00fado e metadados. Por exemplo, voc\u00ea pode criar um layout b\u00e1sico que inclua um cabe\u00e7alho, um rodap\u00e9 e uma \u00e1rea de conte\u00fado como este:<\/p>\n Neste exemplo, os espa\u00e7os reservados Nesse ponto, qualquer p\u00e1gina ou artigo que use page como valor de layout em seu front matter ter\u00e1 esse layout. Voc\u00ea pode criar v\u00e1rios layouts na pasta _layouts<\/strong> e estilizar seus layouts como quiser. Voc\u00ea tamb\u00e9m pode substituir o layout de um tema definindo um layout com um nome semelhante.<\/p>\n A pasta _includes<\/strong> cont\u00e9m trechos reutiliz\u00e1veis de c\u00f3digo que voc\u00ea pode incluir em diferentes partes do seu site. Por exemplo, voc\u00ea pode criar um arquivo navbar.html<\/strong> na pasta includes e adicion\u00e1-lo ao arquivo de layout page.html<\/strong> usando a tag No momento da build, o Jekyll substituir\u00e1 a tag pelo conte\u00fado de navbar.html<\/strong>.<\/p>\n A pasta _includes<\/strong> pode conter qualquer tipo de arquivo, como HTML, Markdown ou arquivos Liquid. O objetivo principal \u00e9 manter seu c\u00f3digo DRY (Don’t Repeat Yourself \u2014 N\u00e3o Se Repita), permitindo que voc\u00ea reutilize c\u00f3digo em todo o site.<\/p>\n Talvez voc\u00ea queira criar uma p\u00e1gina de blog dedicada para armazenar todas as publica\u00e7\u00f5es do seu blog, o que significa buscar todas as publica\u00e7\u00f5es do seu site e percorr\u00ea-las. Com o Jekyll, voc\u00ea pode fazer isso facilmente usando a tag Todas as publica\u00e7\u00f5es em qualquer site do Jekyll s\u00e3o armazenadas na vari\u00e1vel Voc\u00ea tamb\u00e9m pode usar vari\u00e1veis Liquid adicionais para gerar outras informa\u00e7\u00f5es sobre cada publica\u00e7\u00e3o, como a data ou o autor da publica\u00e7\u00e3o:<\/p>\n Observe que, no exemplo acima, o filtro Liquid de data formata a data de cada publica\u00e7\u00e3o em um formato mais leg\u00edvel.<\/p>\n Agora voc\u00ea tem uma ideia de algumas formata\u00e7\u00f5es b\u00e1sicas que podem ser feitas no seu site Jekyll. Mas talvez n\u00e3o seja necess\u00e1rio usar tudo isso para criar um site Jekyll do zero, pois voc\u00ea sempre pode procurar um tema que atenda \u00e0s suas necessidades e adicion\u00e1-lo mais tarde ao seu site Jekyll.<\/p>\n Existem v\u00e1rios temas f\u00e1ceis de adicionar, com informa\u00e7\u00f5es claras sobre como instal\u00e1-los no arquivo ReadMe no GitHub. Voc\u00ea pode optar por clonar o tema, ou, se for um tema baseado em gems<\/a>, o processo \u00e9 ainda mais f\u00e1cil.<\/p>\n Para este artigo, voc\u00ea instalaria um tema de blog<\/a> e o personalizaria para ter um site de blog implementado na Kinsta<\/a>. Esse \u00e9 um tema baseado em gem e voc\u00ea pode acessar seu c\u00f3digo-fonte<\/a> e instru\u00e7\u00f5es no GitHub<\/a>.<\/p>\n Para adicionar um tema baseado em gem, abra o Gemfile do seu site e adicione a gem para o tema que voc\u00ea deseja usar. O tema que usaremos \u00e9 o jekyll-theme-clean-blog<\/strong>. Voc\u00ea pode substituir o tema padr\u00e3o minima<\/strong> no Gemfile:<\/p>\n Execute o comando No arquivo _config.yml<\/strong> do seu site, adicione a seguinte linha para especificar o tema que deseja usar:<\/p>\n A esta altura, seu tema est\u00e1 pronto para ser usado.<\/p>\n Voc\u00ea deve remover todos os layouts do diret\u00f3rio _layouts<\/strong> para evitar que eles substituam o layout do tema.<\/p>\n Em seguida, voc\u00ea pode encontrar os nomes de layout dos seus arquivos na documenta\u00e7\u00e3o do tema<\/a>. Por exemplo, se voc\u00ea estiver usando o tema jekyll-theme-clean-blog<\/strong>, o nome do layout do arquivo index.html<\/strong> \u00e9 home<\/strong>, o de outras p\u00e1ginas \u00e9 page<\/strong> e o de todas as publica\u00e7\u00f5es \u00e9 post<\/strong>.<\/p>\n Por fim, execute \u00c9 isso a\u00ed! Seu site Jekyll agora deve estar usando o novo tema baseado em gem que voc\u00ea adicionou. Voc\u00ea pode personalizar ainda mais o tema modificando seu layout nos diret\u00f3rios _layouts<\/strong> do seu site.<\/p>\n Agora que voc\u00ea adicionou o tema ao seu site, a pr\u00f3xima a\u00e7\u00e3o ser\u00e1 personalizar o site para que ele atenda \u00e0s suas necessidades e funcione como deve. Por exemplo, as imagens de cada p\u00e1gina e artigo n\u00e3o s\u00e3o exibidas, mas sim um fundo cinza.<\/p>\n Voc\u00ea pode corrigir isso adicionando uma op\u00e7\u00e3o de front matter a cada p\u00e1gina e publica\u00e7\u00e3o, especificando o caminho para uma imagem que deseja usar. No Jekyll, os recursos como imagens s\u00e3o armazenados na pasta assets<\/strong>. Nessa pasta, voc\u00ea pode decidir criar subpastas para organizar suas imagens.<\/p>\n Agora voc\u00ea pode adicionar uma op\u00e7\u00e3o de plano de fundo ao bloco front matter e um caminho para sua imagem. Por exemplo, na p\u00e1gina Sobre, este \u00e9 o front matter:<\/p>\n Se voc\u00ea fizer isso em todas as p\u00e1ginas e publica\u00e7\u00f5es, sua p\u00e1gina ter\u00e1 a seguinte apar\u00eancia:<\/p>\n Outra personaliza\u00e7\u00e3o que voc\u00ea pode fazer \u00e9 ajustar as op\u00e7\u00f5es da barra de navega\u00e7\u00e3o. Por exemplo, talvez voc\u00ea n\u00e3o precise de uma p\u00e1gina de contato, o que significa que deve remover o link dela das op\u00e7\u00f5es da barra de navega\u00e7\u00e3o. Voc\u00ea pode fazer isso estudando o c\u00f3digo-fonte do tema<\/a>, observando o arquivo respons\u00e1vel pelos links de navega\u00e7\u00e3o e replicando o arquivo de forma exata em seu projeto, removendo a op\u00e7\u00e3o de que n\u00e3o precisa.<\/p>\n![\"Site](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/joels-blog-jekyll-site.jpg\")
O que \u00e9 o Jekyll?<\/h2>\n
\n
Como instalar o Jekyll<\/h2>\n
Como instalar o Jekyll no macOS<\/h3>\n
\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"<\/code><\/pre>\nbrew doctor<\/code><\/pre>\nchruby<\/code> e do <\/span>ruby-install<\/strong> com o comando abaixo:<\/span><\/p>\nbrew install chruby ruby-install<\/code><\/pre>\nruby-install<\/code> que acabou de instalar:<\/p>\nruby-install 3.1.3<\/code><\/pre>\nchruby<\/code> com o comando abaixo:<\/p>\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/chruby.sh\" >> ~\/.zshrc\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/auto.sh\" >> ~\/.zshrc\necho \"chruby ruby-3.1.3\" >> ~\/.zshrc<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install jekyll bundler<\/code><\/pre>\nComo instalar o Jekyll no Windows<\/h3>\n
ridk install<\/code>, usada para instalar gems. Para mais informa\u00e7\u00f5es, consulte a documenta\u00e7\u00e3o do RubyInstaller<\/a>.<\/p>\ngem install jekyll bundler<\/code><\/pre>\nComo verificar se o Jekyll est\u00e1 instalado corretamente<\/h3>\n
jekyll -v<\/code><\/pre>\nComandos e configura\u00e7\u00e3o do Jekyll<\/h2>\n
Comandos da CLI do Jekyll<\/h3>\n
\n
jekyll build<\/code>: Gera o site est\u00e1tico no diret\u00f3rio _site<\/strong>.<\/li>\njekyll serve<\/code>: Constr\u00f3i o site e inicia um servidor da internet em sua m\u00e1quina local, permitindo que voc\u00ea visualize o site no navegador em http:\/\/localhost:4000.<\/li>\njekyll new [site name]<\/code>: Cria um novo site Jekyll em um novo diret\u00f3rio com o nome do site especificado.<\/li>\njekyll doctor<\/code>: Retorna qualquer configura\u00e7\u00e3o ou problema de depend\u00eancia que possa estar presente.<\/li>\njekyll clean<\/code>: Exclui o diret\u00f3rio _site<\/strong>, onde os arquivos do site gerado s\u00e3o armazenados.<\/li>\njekyll help<\/code>: Retorna a documenta\u00e7\u00e3o de ajuda do Jekyll.<\/li>\njekyll serve --draft<\/code>: Gera e serve seu site Jekyll, incluindo todas as publica\u00e7\u00f5es que est\u00e3o no diret\u00f3rio _drafts<\/strong>.<\/li>\n<\/ul>\nArquivo de configura\u00e7\u00e3o do Jekyll<\/h3>\n
\n
minima<\/code>. Voc\u00ea pode usar qualquer outro tema<\/a> definindo seu nome e implementando outras configura\u00e7\u00f5es sobre as quais aprenderemos mais adiante neste artigo.<\/li>\n<\/ul>\nauthor_name<\/code> e us\u00e1-la em seus templates da seguinte forma: {{ site.author_name }}<\/code>.<\/p>\njekyll build<\/code> ou jekyll serve<\/code>.<\/p>\nComo criar um site est\u00e1tico no Jekyll?<\/h2>\n
jekyll new joels-blog<\/code><\/pre>\n![\"Site](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-jekyll-site.jpg\")
\u251c\u2500\u2500 _config.yml\n\u251c\u2500\u2500 _posts\n\u251c\u2500\u2500 Gemfile\n\u251c\u2500\u2500 Gemfile.lock\n\u251c\u2500\u2500 index.md\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n
\n
Op\u00e7\u00e3o de in\u00edcio r\u00e1pido: use nosso modelo do GitHub<\/h3>\n
Como visualizar um site Jekyll<\/h2>\n
jekyll serve<\/code><\/pre>\n![\"Visual](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/minima-jekyll-theme.jpg\")
Como personalizar um site Jekyll<\/h2>\n
Como o front matter funciona no Jekyll<\/h3>\n
---\ntitle: \"Welcome to Jekyll!\"\ndescription: \"Introduction to what Jekyll is about and how it works\"\ndate: 2023-03-07 16:54:37 +0100\n---<\/code><\/pre>\nComo configurar o front matter padr\u00e3o<\/h4>\n
defaults:\n -\n scope:\n path: \"posts\" # empty string means all files\n values:\n layout: \"post\"\n author: \"John Doe\"<\/code><\/pre>\njekyll serve<\/code>, voc\u00ea notar\u00e1 que, mesmo que n\u00e3o defina o layout e o autor em cada publica\u00e7\u00e3o, ainda ter\u00e1 acesso a eles em seus arquivos.<\/p>\nCria\u00e7\u00e3o de p\u00e1ginas no Jekyll<\/h3>\n
![\"Front](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-page.jpg\")
Cria\u00e7\u00e3o de layouts no Jekyll<\/h3>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>{{ page.title }}<\/title>\n <\/head>\n <body>\n <header>\n \n <\/header>\n <main>{{ content }}<\/main>\n <footer>\n \n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n{{ page.title }}<\/code> e {{ content }}<\/code> ser\u00e3o substitu\u00eddos pelo t\u00edtulo e pelo conte\u00fado reais da p\u00e1gina que est\u00e1 sendo renderizada.<\/p>\nComo a pasta _includes funciona no Jekyll<\/h3>\n
{% include %}<\/code>.<\/p>\n<!DOCTYPE html>\n <html>\n <head>\n <title>{{ page.title }} <\/title>\n <\/head>\n <body>\n <header>{% include navbar.html %} <\/header>\n <main>{{ content }} <\/main>\n <footer>\n \n <\/footer>\n <\/body>\n <\/html><\/code><\/pre>\nPercorrendo publica\u00e7\u00f5es no Jekyll<\/h3>\n
{% for %}<\/code>.<\/p>\nsite.posts<\/code>. Voc\u00ea pode percorr\u00ea-las e usar a vari\u00e1vel Liquid {{ post.title }}<\/code> para gerar o t\u00edtulo de cada publica\u00e7\u00e3o desta forma:<\/p>\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n{% endfor %}<\/code><\/pre>\n\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n <p>Published on {{ post.date | date: \"%B %-d, %Y\" }} by {{ post.author }}<\/p>\n{% endfor %}<\/code><\/pre>\nComo adicionar um tema a um site Jekyll<\/h2>\n
gem \"jekyll-theme-clean-blog\"<\/code><\/pre>\nbundle install<\/code> no diret\u00f3rio do seu site para instalar a gem do tema e suas depend\u00eancias.<\/p>\ntheme: jekyll-theme-clean-blog<\/code><\/pre>\njekyll serve<\/code> para criar e servir seu site usando o novo tema.<\/p>\n![\"Site](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-blog-theme.jpg\")
Personalizar um tema do Jekyll<\/h3>\n
![\"Pasta](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-assets.jpg\")
---\nlayout: page\ntitle: About\ndescription: This is the page description. \npermalink: \/about\/\nbackground: '\/assets\/images\/about-page.jpeg'\n---<\/code><\/pre>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-page-customized.jpg\")