Como construir um blog com jekyll

Sep 11, 2025

Como

(Crédito da imagem: net)

Este tutorial é para pessoas que ouviram dos geradores estáticos do site e decidiram que querem ter uma posição para construir seu próprio site usando um. Aqui você estaremos mostrando a você Como começar um blog usando jekyll.

Um conhecimento básico do terminal é bom, embora você possa ser capaz de acompanhar como os comandos são bastante simples. Os sites nas páginas do GitHub são alimentados por Jekyll nos bastidores, por isso, quando usado junto com as páginas do GitHub, ele cria uma maneira de hospedar e gerenciar seu site gratuitamente (consulte a nossa lista do melhor hospedagem na web. serviços para outras opções, ou veja nossa lista se você quiser um tipo diferente de Construtor de sites ).

Este tutorial assume que você está em um Mac; Como Jekyll é um programa Ruby, é possível executá-lo no Windows, mas não é oficialmente suportado. Se você estiver seguindo no Windows, Pule aqui para ajudar a obter o Ruby configurado.

Depois de completar este tutorial, você terá criado um blog jekyll e aprendeu como seus recursos e linguagem de modelos podem criar um blog pessoal. Este é um ótimo ponto de partida para desenvolver seu próprio site. E lembre-se, se você tem muitas ideias de design ou arquivos de mídia, não deixe de mantê-los com segurança no melhor armazenamento na núvem .

Encontre os arquivos para este tutorial aqui .

10 melhores geradores de site estáticos

01. Preparando-se

Em um Mac você deve ter Ruby instalado por padrão, mas vamos verificar digitando rubi -v. no seu terminal.

Agora podemos realmente obter jekyll executando no site, verifique se você está no diretório que deseja criar seu site e simplesmente digite Gem Instale Jekyll Bundler ; Seu computador irá então ir e pegar todas as dependências necessárias para executar um site.

02. Sirva localmente ou construir

Existem dois comandos principais que você usará com Jekyll - servir e Construir . Para executar seu site, digite localmente jekyll servir na sua linha de comando. Isso executará uma versão em http://127.0.0.1:4000 que você pode visualizar suas alterações. Se você já tem gem e outras dependências instaladas em sua máquina, este comando pode falhar devido a uma incompatibilidade em versões de dependência; Neste caso, tente Bundle Exec Jekyll servir em vez de. Correndo o mesmo, mas com a palavra Construir apenas compila o site.

03. Obtenha os arquivos iniciais

Copie os arquivos fornecidos com este tutorial neste momento para lhe dar uma base para trabalhar. Isso nos dará uma homepage, lista de blogs, página de detalhes e a estrutura de ativos para o site. Atualize sua página em http://127.0.0.1:4000 e você verá que agora temos algumas páginas básicas para construir. Vamos ter uma visão rápida de como funciona um site de Jekyll.

Um site de jekyll é estruturado de maneira fácil de seguir. Quaisquer coleções (tipos de postagens) são mantidas em sua própria pasta, assim como os layouts e incluem. Você vai notar uma pasta '_site' - esta é a pasta que Jekyll usa quando você executa um jekyll build. comando.

Generate CSS — Junte-se a nós em Londres em 26 de setembro para gerar CSS - clique na imagem para reservar seu ingresso (Crédito da imagem: futuro)

04. Configuração

Build a blog with Jekyll: Configuration — Jekyll lhe dá uma ótima estrutura para trabalhar e um arquivo de configuração fácil de gerenciar (Crédito da imagem: net)

Abra _config.yml no seu editor de texto e adicione seus próprios detalhes; Uma área chave para verificar é definir seu URL base. Esta é a pasta que seu site está carregando. O arquivo de configuração é semelhante ao uso de opções globais combinadas com o seu arquivo WP-Config se você estava construindo um tema WordPress.

Você pode controlar informações principais, como títulos e meta descrições, seus e-mail e contas sociais e, em seguida, todas as informações que o site precisa para compilar, como coleções e quaisquer plugins usados. Você pode usar uma mistura de HTML e marcação para páginas, dependendo do que é que você deseja alcançar. No entanto, páginas personalizadas como suas páginas de homepage e lista geralmente serão HTML, enquanto posts e outras páginas gerais que usam um modelo definido serão marcas.

05. Frente

A frente é um trecho de yaml no topo de um arquivo. O jekyll usa para segurar variáveis. Olhe no arquivo About.md e você pode ver que definimos o título, que layout para usar, o autor e quaisquer imagens relacionadas.

06. Tags líquidas

Build a blog with Jekyll: Liquid tags — As tags líquidas oferecem uma maneira fácil de trabalhar com modelos e também são usadas em temas de Shopify (Crédito da imagem: net)

O jekyll usa líquido - uma linguagem de modelos que usa objetos, tags e filtros. Nós usamos o objeto Tag cercada por chaves duplas {{}} para produzir variáveis de matéria frontal e uma cinta e porcentagem sinal para lógica {%%} .

07. Construa sua navegação

Em vez de uma navegação estática, usamos o poder dos arquivos de configuração para separar o conteúdo do modelo. Nós vamos detectar itens de navegação na pasta 'Data' como um arquivo de configuração e, em seguida, loop através deles no navegação.HTML. Podemos apenas entrar em qualquer páginas e links que queremos avançar sem voltar ao modelo. Certifique-se de que você é muito cuidadoso com o espaço em branco ao editar seus arquivos de configuração, como navegação.yml ou frontária no início de uma postagem porque um espaço perdido causará um erro.

O arquivo de configuração já está definido, portanto, insira o seguinte código no seu 'navegação.html' include arquivo:

 {% para item no site.Data.Navegation%}
     & lt; a href = "{{site.baseurl}} / {{item.link}}" {% se page.url == item.link%} classe = "corrente" {% final {{{{{{{} .NAME}} & lt; / a & gt;
   {% EndFor%}

Estamos usando tags lógicas líquidas para procurar no arquivo de configuração de navegação e loop um link e nome para cada entrada, basicamente apenas um padrão para loop.

08. Crie a página inicial

Na nossa página inicial, vamos listar nossa última postagem no blog como um herói e depois ter um trecho de nossa página sobre a página com um link. Vamos começar com o bloco herói. Abra o index.html e adicione o seguinte código:

 {% atribua post = site.posts.first%}
& lt; div Class = "C-Hero" estilo "estilo =" Background: URL ({{post.thumbnail_image.large | Relativo_Url}}) Centro inferior / capa sem repetição; "& gt;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{post.intro | MarkDownload}}
   & lt; a href = "{post.url}}" class = "btn - herói" & gt; ler o post completo & lt; / a & gt;
& lt; / div & gt;

Você verá que primeiro atribuímos a postagem mais recente e, em seguida, referência à imagem da miniatura definida na parte frontal do post. A introdução do post usa um filtro líquido marketiy. para converter a marcação para HTML.

Com isso no lugar, vamos adicionar um teaser da página sobre a página. Adicione o seguinte:

 & lt; div classe = "C-recurso" & gt;
   {% para página no site.pages%}
       {% se page.url == '/about.html'%}
           & lt; img src = "{{página.profile_image.small}}" alt = "profie imagem" Class = "C-feature__Image" / & gt;
           & lt; div class = "c-feature__text" & gt;
               & lt; h2 & gt; e lt; a href = "{{página.Url}}" & gt; {{page.title}} & lt; / a & gt; & lt; / h2 & gt;
               & lt; p & gt; {{{{{page.intro}} & lt; / p & gt;
           & lt; / div & gt;
          
       {% fim se %}
   {% endFor%}
& lt; / div & gt;

Desta vez estamos usando um pra loop para verificar as páginas no site. Nós estamos usando URL da página Para filtrar a página sobre a página e, em seguida, usamos um estilo de modelagem semelhante ao herói, a fim de produzir as informações das páginas.

09. Lista de blogs.

Build a blog with Jekyll: Blog list — Um layout de cartão simples para o restante dos posts no site que usa grade CSS e Flexbox (Crédito da imagem: net)

Com a página inicial criada, podemos passar para a página da lista de blogs. Para criar a página da lista, usamos novamente tags líquidas para nos dar a lógica para loop através de todos os arquivos na pasta 'Posts'.

O herói é feito por você porque segue o mesmo processo que a página inicial. Debaixo do herói em 'blog.html', adicione o seguinte:

& lt; div class = "restringir" & gt;
   & lt; h1 & gt; o melhor do resto & lt; / h1 & gt;
   & lt; seção classe = "lista de cartas" & gt;
           {% para post no site.posts offset: 1%}
           & lt; div classe = "cartão" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div classe = "Detalhes do cartão" & gt;
                   & lt; h3 & gt; {{post.date | Data: "% d% b"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" classe = "btn" & gt; ler mais & lt; / a & gt;
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endFor%}
          
   & lt; / seção & gt;
& lt; / div & gt;

Mais uma vez usamos um pra loop para passar pela coleção de posts. Mas como já saímos, o mais recente no herói, compensamos esse loop para começar em pós dois. Um filtro líquido é usado para converter a data para um formato de nossa escolha.

10. Página de detalhes do blog

Não muito tempo para ir agora: Nós quase temos todos os elementos básicos juntos. Um aspecto importante deixado para o endereço é a navegação. Quando você está lendo uma postagem de blog, você precisa de uma maneira de percorrer e ler mais. Podemos adicionar uma boa paginação ao nosso site usando uma variável de página. Abra post.html na pasta Layouts e adicione o seguinte:

 & lt; div classe = "C-paginação" & gt;
   {% se page.previous%}
   & lt; div & gt;
       & lt; h3 & gt; anterior & lt; / h3 & gt;
       & lt; p & gt; {{{Página.PREVIOUS.TITLE}} & lt; / p & gt;
       & lt; p & gt; & lt; a turma = "btn" href = "{{site.baseurl}} {{page.previous.url}}" & gt; ler post & lt; / a & gt; & lt; & gt;
   & lt; / div & gt;
   {% fim se %}
   {% se página.Next%}
   & lt; div & gt;
       & lt; h3 & gt; up próximo & lt; / h3 & gt;
       & lt; p & gt; {{{{página.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a class = "btn" href = "{{site.baseurl}} {{página.next.url}}" & gt; ler post & lt; / a & gt; & gt;
   & lt; / div & gt;
   {% fim se %}
& lt; / div & gt;

Nós usamos o page.Previous. e Page.Next. Variáveis para verificar se há um post para clicar em. Se houver, podemos emitir um bloco e incluir o título e link do post.

11. Construa e publique

Páginas do GitHub renderizam os arquivos Sass para nós, então quando você corre jekyll build. Os arquivos compilados são criados na pasta _site. Nenhum arquivo ou webpack Gulp aqui, apenas estilos magros agradáveis! Você pode até mesmo minificar a saída do Sass como uma configuração no arquivo principal do config.yml para o site. O conteúdo deste diretório pode ser transferido para sua hospedagem escolhida. Uma coisa a estar ciente é que as páginas do GitHub realmente suportam Jekyll para que você possa construir e hospedar um site usando sua filial mestre como fonte. Você pode encontrar mais informações sobre isso aqui .

Este artigo foi originalmente publicado em questão 320 de internet , a revista mais vendida do mundo para web designers e desenvolvedores. Comprar edição 320 aqui ou Inscreva-se aqui .

Artigos relacionados:

Construa um blog com grade e flexbox
As melhores plataformas de blogs grátis
Como construir um site de blog com Gatsby

Como construir um blog com jekyll

01. Preparando-se

02. Sirva localmente ou construir

03. Obtenha os arquivos iniciais

04. Configuração

05. Frente

06. Tags líquidas

07. Construa sua navegação

08. Crie a página inicial

09. Lista de blogs.

10. Página de detalhes do blog

11. Construa e publique

Como - Artigos mais populares

Como usar o armazenamento em nuvem como criativo

Como virar uma camada no Photoshop: um guia completo

Pinte uma lebre travessa em aquarela

Pinte uma configuração de jogo de ficção científica no Photoshop

Como criar glazes com aquarela

Adicione um efeito de glitch ao seu site

4 etapas fáceis para melhorar sua renderização

Crie ilustrações simples para a web

Categorias