Como criar uma página estática a partir de um programa não tão estático assim
Como vocês viram na postagem de boas vindas, eu descobri esse programa fenomenal hoje, então nada melhor que criar um tutorial simples inicial a partir dele para que eu saiba como configurá-lo quando precisar, porque eu irei, com toda a certeza, esquecer de como se faz.
As seguintes instruções são para o Ubuntu
1 INSTALANDO O JEKYLL
O Jekyll é a parte fundamental desse tutorial, então nada é mais justo que iniciar ele com a sua instalação, que precisa de alguns pré-requisitos também.
1.1 INSTALAR O RUBY
Como essa aplicação roda com base no Ruby, é preciso instalar a linguagem no computador junto com alguns outros pacotes.
1
sudo apt install ruby-full build-essential zlib1g-dev
1.2 DEFINIÇÃO DA PASTA DAS GEMS
Para evitar que as Gems do Ruby sejam instaladas como root, é preciso definir o seu diretório base.
1
2
3
4
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
1.3 INSTALAR O JEKYLL E O BUNDLER
1
gem install jekyll bundler
2 PREPARANDO O AMBIENTE
Após a instalação do Jekyll, é preciso preparar o ambiente do computador antes de começar a edição do site.
2.1 INSTALANDO O GIT
Como o programa será hospedado no GitHub, é necessário instalar o Git para fazer as requisições.
1
sudo apt install git-all
Além disso, é importante configurar o básico no programa, definindo o seu nome de usuário e e-mail.
1
2
git config --global user.name "SEU NOME AQUI"
git config --global user.email SEUEMAIL@EMAIL.COM
2.2 INSTALANDO O VSCODE
Eu gostava muito de usar o Atom para esses projetos, mas eu vi que ele foi descontinuado e fui atrás de uma alternativa e encontrei essa aqui. Acho que é a melhor de todas devido a suas ferramentas que ajudam bastante na hora de colocar a mão na massa.
2.2.1 BAIXAR O VSCODE
O download pode ser feito no site oficial do programa. Para esse tutorial, faremos download da extensão .deb.
2.2.2 INSTALAR O VSCODE
É necessário entrar na pasta onde o pacote foi baixado pelo Terminal e executar o seguinte comando. No local onde está <NOME_DO_PACOTE>, deve ser colocado exatamente o nome do pacote como está no arquivo. Um dia interessante é usar a tecla tab para completar automaticamente.
1
sudo dpkg -i <NOME_DO_PACOTE>
2.2.3 INSTALAR PLUGINS NO VSCODE
Para facilitar a execução do programa no VSCode, alguns plugins podem ser instalados. Os mais importantes para esse projeto são o Jekyll Syntax Support para auxiliar com a sintaxe do Jekyll, o Jekyll Run para rodar o Jekyll diretamente do VSCode e o GitHub Pull Requests and Issues para integrar o VSCode com o GitHub. Além desses, também é possível usar o Code Spell Checker e o Brazilian Portuguese - Code Spell Checker, que não são obrigatórios, mas que ajudam muito ao corrigir a gramática diretamente do VSCode.
Para começar a usar o GitHub Pull Requests and Issues, é necessário configurá-lo com a sua conta, mas isso pode ser realizado facilmente na primeira vez de uso, haja vista que ele abre uma janela no navegador para que o usuário possa fazer login.
3 ESCOLHENDO UM TEMPLATE
Existem diversos templates para o Jekyll disponíveis na internet e uma lista de temas pode ser facilmente encontrada na sua documentação.
No meu caso, eu usei o template Chirpy, que pode ser facilmente copiado para um repositório no GitHub a partir do seu código fonte. Para isso, deve-se clicar em “Use this template” e “Create a new repository”.
Após isso, deve ser criado um repositório público com o mesmo nome do seu usuário, como pode ser visto na imagem. No meu caso, como eu já tenho o repositório, ele aparece como indisponível.
4 EDITANDO NO VSCODE
Antes de começar a editar, é preciso finalizar uma configuração no VSCode, que consiste em baixar todos os arquivos do GitHub para o computador local.
4.1 CLONAR REPOSITÓRIO
Após ter criado o repositório no GitHub e já estando com os plugins no VSCode, é possível cloná-lo facilmente no momento do primeiro uso. Para isso, selecione a opção de clone na tela inicial e siga as instruções do programa.
4.2 EXECUTAR O BUNDLE
Após instalar o programa pela primeira vez, é necessário executar o comando bundle para que as dependências locais sejam instaladas.
4.3 EDITAR O PROGRAMA
A parte de edição é bem pessoal de cada usuário e, para isso, recomendo que sejam seguidas as documentações tanto do Jekyll quanto do Chirpy. Além disso, como o minha página do GitHub precisa ser pública, o código-fonte dela é aberto e pode servir de ajuda também na hora de ver como os arquivos são configurados.
4.4 TESTAR O SITE
Para testar o servidor localmente, o Jekyll Run facilita bastante, pois ele cria um botão no canto superior direito da página que pode ser facilmente acessado. Ao clicar nele, uma saída será gerada com o link para o programa localmente.
4.5 ENVIAR O SITE PARA O GITHUB
Após todas as alterações terem sido feitas, o programa está pronto para ser enviado para o GitHub e ficar online. Para isso, na barra lateral esquerda, seleciona-se o ícone dos ramos. Em seguida, é necessário digitar uma pequena mensagem de descrição nas atualizações do código e clicar em “Confirmação”. Após isso, um novo botão aparecerá e deve ser apertado. Caso mensagens de texto apareçam na tela, pode permitir que o programa execute.
Depois que tudo isso tiver sido feito, é só correr pro abraço e aproveitar o seu site lindo e funcional.
Esse é o primeiro tutorial, mas não sei se o último. Vamos ver como vai ser o andamento desse perfil e espero que eu tenha te ajudado (mesmo que você seja o eu do futuro).