Jekyll2022-11-21T21:57:51-03:00http://localhost:4000/feed.xmlIsmael DamiãoBacharelando em físicaIsmael Damiaoismaellxd@gmail.comMonte seu site2022-11-18T00:00:00-03:002022-11-18T00:00:00-03:00http://localhost:4000/pt/posts/2022/11/jekyll<p>Olá,</p>
<p>Nesta página explico como
montar um site usando o <a href="https://jekyllrb.com/">Jekyll</a>
e publica-lo na internet utilizando o <a href="https://github.com">GitHub</a>.
O método utilizado é, até onde tenho conhecimento, a maneira mais simples
de construir um site (praticamente) de graça.</p>
<h2 id="para-começar">Para começar</h2>
<p>Para montar o site usaremos o sistema operacional linux,
neste tutorial utilizarei o <a href="https://pt.wikipedia.org/wiki/Ubuntu">Ubuntu</a>
mas sintasse à vontade para usar a distribuição que achar melhor.</p>
<h3 id="instalando-os-pacotes">Instalando os pacotes</h3>
<p>Precisaremos instalar o <a href="https://jekyllrb.com/">Jekyll</a>,
que é o programa que hospedará finalmente nosso site.
Para fazer isso podemos usar em qualquer distro o comando
<code class="language-plaintext highlighter-rouge">gem</code> do <a href="https://www.ruby-lang.org/en/">Ruby</a>:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>gem update <span class="nt">--system</span>
<span class="nb">sudo </span>gem <span class="nb">install</span> <span class="se">\</span>
minimal-mistakes-jekyll <span class="se">\</span>
github-pages <span class="se">\</span>
liquid <span class="se">\</span>
jekyll <span class="se">\</span>
jekyll-seo-tag <span class="se">\</span>
jekyll-paginate <span class="se">\</span>
jekyll-scholar <span class="se">\</span>
jekyll-sitemap <span class="se">\</span>
jekyll-gist <span class="se">\</span>
jekyll-feed <span class="se">\</span>
jekyll-seo-tag <span class="se">\</span>
jemoji unicode bundler json wdm hawkins mercenary
</code></pre></div></div>
<p>Caso você ainda não possua o Ruby instalado você pode instalar ele
no Ubuntu com o comando:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">sudo </span>apt <span class="nb">install </span>ruby-dev ruby-bundler nodejs
</code></pre></div></div>
<h3 id="descarregando-um-modelo">Descarregando um modelo</h3>
<p>Agora você deve escolher um modelo de site construido usando
o Jekyll. Os modelos mais utilizados são os seguintes:</p>
<ol>
<li><a href="https://github.com/mmistakes/minimal-mistakes">Minimal Mistakes</a></li>
<li><a href="https://github.com/academicpages/academicpages.github.io">academicpages</a></li>
</ol>
<p>Os modelos mostrados acima foram utilizados para
construção de vários sites, como exemplo e inspiração cito
os seguintes:</p>
<ul>
<li><a href="https://github.com/tesschin/yuzhangbit.github.io">Yu Zhang</a></li>
<li><a href="https://scaomath.github.io/research/">An Amateur Computational Mathematician</a></li>
<li><a href="https://jayrobwilliams.com/publications/">Rob Williams</a></li>
<li><a href="https://schinlfc.github.io/posts/2020/07/customizing-website/">Sayorn Chin</a></li>
</ul>
<p>Já o código fonte do meu site pode ser descarregado
<a href="/assets/source/ismaeldamiao.github.io.zip">aqui</a>.</p>
<p>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:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">ls
</span>assets _data Gemfile.lock
_includes index.md LICENSE
_posts _sass _bibliography
_config.yml Gemfile images
index.html _layouts _pages
README.md _site
</code></pre></div></div>
<h3 id="hospedando-o-site-localmente">Hospedando o site localmente</h3>
<p>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 <code class="language-plaintext highlighter-rouge">Gemfile</code>,
para isso basta digitar no terminal:</p>
<div class="language-bash highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle update
bundle clean <span class="nt">--force</span>
bundle <span class="nb">install</span>
</code></pre></div></div>
<p>Agora, sempre que quiser executar seu site bastará digitar
o seguinte comando:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>jekyll server
</code></pre></div></div>
<p>Uma menssagem informará como acessar o site,
no meu caso a menssagem informa
<code class="language-plaintext highlighter-rouge">Server address: http://127.0.0.1:4000</code>
e eu acesso o site <a href="http://127.0.0.1:4000">http://127.0.0.1:4000</a>.</p>
<h2 id="configurando-seu-site">Configurando seu site</h2>
<p>Agora, para que o site possa ser chamado de “seu”
é preciso iniciar as configurações.</p>
<h3 id="configurações-gerais">Configurações gerais</h3>
<p>As configurações gerais do seu site devem ser editadas no arquivo
<code class="language-plaintext highlighter-rouge">_config.yml</code>,
detalhes sobre como fazer isso podem ser encontrados
<a href="https://mmistakes.github.io/minimal-mistakes/docs/configuration/">aqui</a>.</p>
<h3 id="páginas-e-posts">Páginas e posts</h3>
<p>No diretório <code class="language-plaintext highlighter-rouge">_pages</code> você poderá verenciar suas páginas,
uma página no seu site é criada para cada arquivo <code class="language-plaintext highlighter-rouge">MarkDown</code> no
diretório <code class="language-plaintext highlighter-rouge">_pages</code> que possua um cabeçalho parecido com o seguinte:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
title: "Título da página"
permalink: /link/interno/
---
</code></pre></div></div>
<p>De maneira similar um post no blog do site
é criado usando arquivos <code class="language-plaintext highlighter-rouge">MarkDown</code> no diretório
<code class="language-plaintext highlighter-rouge">_posts</code>, os arquivos devem ser o nome começando
com a data no formato <code class="language-plaintext highlighter-rouge">YYYY-MM-DD</code>, por exemplo <code class="language-plaintext highlighter-rouge">2022-11-18-jekyll.md</code>,
e seu cabeçalho é deve ser parecido com o seguinte:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
permalink: /posts/link/interno/
title: "Título do post"
date: YYYY-MM-DD
categories:
- AlgumaCategoria
tags:
- AlgumaTag
---
</code></pre></div></div>
<p>Mais detalhes podem ser encontrados em:</p>
<ul>
<li><a href="https://mmistakes.github.io/minimal-mistakes/docs/posts/">https://mmistakes.github.io/minimal-mistakes/docs/posts/</a></li>
<li><a href="https://mmistakes.github.io/minimal-mistakes/docs/pages/">https://mmistakes.github.io/minimal-mistakes/docs/pages/</a></li>
</ul>
<h3 id="barra-de-navegação">Barra de navegação</h3>
<p>As pricipais páginas do seu site podem estar hiperligadas
na barra de navegação, para tanto basta editar o arquivo
<code class="language-plaintext highlighter-rouge">_data/navigation.yml</code>.
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
<code class="language-plaintext highlighter-rouge">_includes/masthead.html</code>.</p>
<h2 id="publicando-seu-site">Publicando seu site</h2>
<p>Você pode escolher a opção de hospedagem que preferir para publicar seu site,
neste post direi como fazer isso usando o
<a href="https://github.com/">GitHub</a>.</p>
<h3 id="usando-o-github">Usando o GitHub</h3>
<p>O GitHub é uma ferramenta gratuita para compartilhar códigos
e também permite a publicação de um site.</p>
<p>Primeiro crie uma conta no GitHub.
Depois crie um repositório com o seu nome de usuário no GitHub seguido
de <code class="language-plaintext highlighter-rouge">.github.io</code>,
por exemplo o nome do repositório do meu site é
<code class="language-plaintext highlighter-rouge">ismaeldamiao.github.io</code>, pois o meu nome
de usuário no GitHub é @ismaeldamiao.</p>
<p>Agora você precisa iniciar seu site localmente com o comando
<code class="language-plaintext highlighter-rouge">jekyll server</code>, como indicado anteriormente,
para gerar os arquivos <code class="language-plaintext highlighter-rouge">HTML</code> do seu site.
Feito isso basta copiar todos os arquivos do diretório
<code class="language-plaintext highlighter-rouge">_site</code> 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 é <a href="https://ismaeldamiao.github.io/">https://ismaeldamiao.github.io/</a>.</p>
<h2 id="conclusão">Conclusão</h2>
<p>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.</p>Ismael Damiaoismaellxd@gmail.comOlá,