Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jekyll

Configurando Jekyll para GitHub Pages em 60 Segundos

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Jekyll pode ser usado com o GitHub Pages para criar sites estáticos simples e até blogs. Esse vídeo mostrará como configurar a estrutura de arquivos do Jekyll em 60 segundos!

Uma vez pronto, se precisar de inspiração, veja o que há de disponível para temas Jekyll no Envato Market.

Se preferir uma explicação escrita, eis o processo inteiro descrito em passos claros:

Novo Projeto

Primeiro, crie um diretório em seu sistema para um novo repositório. Vá até o terminal e navegue ao local onde o novo diretório será criado e digite: mkdir mysite. Nosso novo diretório é chamado "mysite", mas pode ser qualquer outro nome.

Acesse esse novo diretório, digitando cd mysite–uma vez lá, crie um arquivo de configuração digitando o comando vim _config.yml. Seu terminal mostrará o conteúdo desse arquivo, então pressione i para entrar no modo de inserção e adicione isso:

Aperte Esc para sair do modo de inserção, então aperte :x para salvar as mudanças realizadas.

Crie a Página Inicial

Agora, precisamos criar a página inicial, então digite vim index.md e, como ante, adicione:

Adicione O Diretório Layouts

Agora, crie um novo diretório digitando mkdir _layouts e acesse-o com cd _layouts. Crie um modelo padrão com vim default.html e adicione:

Inicialize o Novo Repositório

Agora precisamos inicializar o diretório como um novo repositório e enviar as mudanças. Então volte ao diretório raiz do projeto com cd ... Então digite git init, seguido de git add --all && git commit --all.

Enviando para o GitHub

Acesse o GitHub pelo navegador e crie um novo repositório.

Você receberá algumas opções, então escolha os comandos relacionados a push an existing repository from the command line. Os comandos serão algo como:

Cole esses comandos no terminal e envie seu repositório local para o GitHub.

Configurações do GitHub

Por último, nas Configurações do GitHub, opte por usar a ramificação master para o GitHub Pages e Salve.

Jekyll está todo configurado e seu site pronto para ser construído.

Estrutura de Arquivos do Jekyll Explicada

  • _config.yml funciona como configurção do Jekyll. É isso que o GitHub Pages lê para as configurações gerais do site como variáveis globais e mais.
  • index.md é o documento raiz (página inicial) do site no GitHub Pages.
  • _layouts/default.html é o modelo padrão que index.md se baseará.

Recursos Úteis

Para mais informações sobre como construir sites estáticos usando Jekyll, veja mais no Envato Tuts+:


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.