Ismael Damiao

Bacharelando em física

4 minuto(s) de leitura

Olá,

Nesta página explico como montar um site usando o Jekyll e publica-lo na internet utilizando o GitHub. O método utilizado é, até onde tenho conhecimento, a maneira mais simples de construir um site (praticamente) de graça.

Para começar

Para montar o site usaremos o sistema operacional linux, neste tutorial utilizarei o Ubuntu mas sintasse à vontade para usar a distribuição que achar melhor.

Instalando os pacotes

Precisaremos instalar o Jekyll, que é o programa que hospedará finalmente nosso site. Para fazer isso podemos usar em qualquer distro o comando gem do Ruby:

gem update --system
sudo gem install \
  minimal-mistakes-jekyll \
  github-pages \
  liquid \
  jekyll \
  jekyll-seo-tag \
  jekyll-paginate \
  jekyll-scholar \
  jekyll-sitemap \
  jekyll-gist \
  jekyll-feed \
  jekyll-seo-tag \
  jemoji unicode bundler json wdm hawkins mercenary

Caso você ainda não possua o Ruby instalado você pode instalar ele no Ubuntu com o comando:

sudo apt install ruby-dev ruby-bundler nodejs

Descarregando um modelo

Agora você deve escolher um modelo de site construido usando o Jekyll. Os modelos mais utilizados são os seguintes:

  1. Minimal Mistakes
  2. academicpages

Os modelos mostrados acima foram utilizados para construção de vários sites, como exemplo e inspiração cito os seguintes:

Já o código fonte do meu site pode ser descarregado aqui.

Uma vez escolhido o modelo de sua preferência, você precisará baixar todos os arquivos no seu computador, o que resultará em um diretório mais ou menos assim:

$ ls
assets       _data     Gemfile.lock
_includes    index.md  LICENSE
_posts       _sass     _bibliography
_config.yml  Gemfile   images
index.html   _layouts  _pages
README.md    _site

Hospedando o site localmente

Uma vez descarregado o modelo de sua preferência abra o diretório dos arquivos do modelo em um terminal. Da primeira vez que for executar o site você deverá instalar todos os arquivos necessário para executa-lo, conforme informado no arquivo Gemfile, para isso basta digitar no terminal:

bundle update
bundle clean --force
bundle install

Agora, sempre que quiser executar seu site bastará digitar o seguinte comando:

jekyll server

Uma menssagem informará como acessar o site, no meu caso a menssagem informa Server address: http://127.0.0.1:4000 e eu acesso o site http://127.0.0.1:4000.

Configurando seu site

Agora, para que o site possa ser chamado de “seu” é preciso iniciar as configurações.

Configurações gerais

As configurações gerais do seu site devem ser editadas no arquivo _config.yml, detalhes sobre como fazer isso podem ser encontrados aqui.

Páginas e posts

No diretório _pages você poderá verenciar suas páginas, uma página no seu site é criada para cada arquivo MarkDown no diretório _pages que possua um cabeçalho parecido com o seguinte:

---
title: "Título da página"
permalink: /link/interno/
---

De maneira similar um post no blog do site é criado usando arquivos MarkDown no diretório _posts, os arquivos devem ser o nome começando com a data no formato YYYY-MM-DD, por exemplo 2022-11-18-jekyll.md, e seu cabeçalho é deve ser parecido com o seguinte:

---
permalink: /posts/link/interno/
title: "Título do post"
date: YYYY-MM-DD
categories:
  - AlgumaCategoria
tags:
  - AlgumaTag
---

Mais detalhes podem ser encontrados em:

Barra de navegação

As pricipais páginas do seu site podem estar hiperligadas na barra de navegação, para tanto basta editar o arquivo _data/navigation.yml. Caso você esteja usando o meu site como modelo notará que há a possibilidade de definir uma barra de navegação para cada idioma o seu site, nesse caso talvez seja preciso editar também o arquivo _includes/masthead.html.

Publicando seu site

Você pode escolher a opção de hospedagem que preferir para publicar seu site, neste post direi como fazer isso usando o GitHub.

Usando o GitHub

O GitHub é uma ferramenta gratuita para compartilhar códigos e também permite a publicação de um site.

Primeiro crie uma conta no GitHub. Depois crie um repositório com o seu nome de usuário no GitHub seguido de .github.io, por exemplo o nome do repositório do meu site é ismaeldamiao.github.io, pois o meu nome de usuário no GitHub é @ismaeldamiao.

Agora você precisa iniciar seu site localmente com o comando jekyll server, como indicado anteriormente, para gerar os arquivos HTML do seu site. Feito isso basta copiar todos os arquivos do diretório _site para o GitHub. Assim bastará esperar um pouco e entrar no seu site, o link será o mesmo que o nome do repositório, no meu caso o link é https://ismaeldamiao.github.io/.

Conclusão

Nos modelos e exemplos já citados você poderá encontrar mais detalhes sobre como personalizar seu site, portanto deixo a cargo da sua determinação e curiosidade desvendar os demais detalhes sobre o Jekyll e os modelos baseados no Minimal Mistakes.

Talvez você goste também