DEV Community

Pâmella Araújo Balcaçar 🇧🇷
Pâmella Araújo Balcaçar 🇧🇷

Posted on • Edited on

[Tutorial] Usando o Pelican na implementação de site estático

Esse artigo tem como objetivo explicar os passos de implementação de sites estáticos com Pelican.

Antes de mais nada, para acompanhar esse tutorial é necessário conhecimento da ferramenta git/github, linguagem python, linguagem de marcação html e markdown, de estilo CSS, linha de comando a depender do seu sistema operacional.

Crie uma pasta separada para trabalhar com o Pelican para iniciarmos nossas tarefas. Feito isso, vamos os passos abaixo:

Primeiro passo é preparar o ambiente (se você já tiver o ambiente segue pelo passo dois):

sudo apt-get install python-pip [Linux]
ou
python get-pip.py [Windows]

pip install virtualenv

Segundo passo, criar a venv utilizando o seguinte comando, substituindo o nome de sua preferência:

python3 -m venv nomedavenv

Terceiro passo, a ativação da venv:

source nomedavenv/bin/activate [Linux]
ou
nomedavenv\Scripts\activate [Windows]

Quarto passo, a instalação do pelican:

pip install pelican markdown

Na sequência, iniciaremos o pelican com o seguinte comando:

pelican-quickstart

Este comando lhe fará uma série de perguntas sobre seu site, basta responder de acordo com suas necessidades. As opções em maiúsculo são as default, veja abaixo:

Where do you want to create your new web site? [.]  #pasta onde você quer salvar seu projeto
What will be the title of this web site? #Titulo do site  
Who will be the author of this web site? #Seu nome aqui  
What will be the default language of this web site? [en] - #pt para portugues  
Do you want to specify a URL prefix? e.g., http://example.com   (Y/n) - #Url do seu blog  
What is your URL prefix? #www.seublog.dev  
Do you want to enable article pagination? (Y/n) - #Paginação  
How many articles per page do you want? [10] - #Itens por paginação  
Do you want to generate a Fabfile/Makefile to automate generation and publishing? (Y/n) - Sim - #Facilita muito  
Do you want an auto-reload & simpleHTTP script to assist with theme and site development? (Y/n) - #Um server para testes  
Do you want to upload your website using FTP? (y/N)  - #Opcional  
Do you want to upload your website using SSH? (y/N) - #Opcional  
Do you want to upload your website using Dropbox? (y/N) - #Opcional  
Do you want to upload your website using S3? (y/N) - #Opcional  
Do you want to upload your website using Rackspace Cloud Files? (y/N) - #Opcional  
Do you want to upload your website using GitHub Pages? (y/N) - #Opcional
Enter fullscreen mode Exit fullscreen mode

Teremos a seguinte configuração na pasta raiz do projeto:

├── content
│ └── teste.md # este arquivo é o que vamos adicionar
├── output
├── Makefile
├── pelicanconf.py
└── publishconf.py

Após esse processo de perguntas e respostas, iremos criar nosso primeiro artigo, dentro da pasta content, crie o arquivo teste.md, digite o seguinte dentro do arquivo:

Title: Olá Pelican!  
Date: 2021-08-20 17:00  
Category: Python  
Tags: pelican, markdown  
Slug: primeiro-artigo  
Author: Nome Sobrenome
Summary: Um breve resumo sobre o post do Pelican

#Testando nosso primeiro post no Pelican

Pelican é um gerador de páginas estáticas criado em python
para facilitar nossa vida, na criação de blogs, landing pages ou site estáticos.
Enter fullscreen mode Exit fullscreen mode

Para ver como ficou o nosso site inicialmente, no terminal (linux) ou no prompt comando (Windows), acesse a pasta do projeto, depois digite o seguinte comando:

make html && make serve

Se tiver tudo certo, você poderá acessá-lo no navegador digitando o seguinte endereço:

http://127.0.0.1:8000/

Agora, poderemos iniciar o processo de designer do nosso site, ao escolher um tema no site de temas do pelican. Assim, deve baixar o tema e colocar em uma pasta denominada theme dentro da pasta raiz do projeto. E no arquivo pelicanconf.py, deve ser acrescentado o seguinte trecho de código:

THEME = 'theme/nomedotemapelican'
Enter fullscreen mode Exit fullscreen mode

Dependendo do temas, poderá solicitar a configuração de algum plugin, então, acrescente também a pasta plugins na pasta raiz do projeto. E no arquivo pelicanconf.py, deve ser editado:

PLUGIN_PATHS = ["plugins"]
PLUGINS = ["nomedoplugin"] 
Enter fullscreen mode Exit fullscreen mode

Outra configuração importante que deve ser feita no arquivo pelicanconf.py é de conteúdo estático:

STATIC_PATHS = ['images', 'extra/robots.txt', 'extra/favicon.ico', 'extra/CNAME']
EXTRA_PATH_METADATA = {
    'extra/robots.txt': {'path': 'robots.txt'},
    'extra/favicon.ico': {'path': 'favicon.ico'},
    'extra/CNAME':{'path': 'CNAME'}
    }
Enter fullscreen mode Exit fullscreen mode

Também é importante acrescentar ao final do arquivo pelicanconf.py, para orientação do designer do site conforme os templates do tema escolhido:

DIRECT_TEMPLATES = ['index', 'tags', 'categories', 'authors', 'archives']
Enter fullscreen mode Exit fullscreen mode

Dica de ouro: Leia os detalhes no arquivo readme.md do tema escolhido. Pois, pode haver detalhes de configurações interessantes e específicos do tema.

Para publicar depois de está tudo ok, digite no terminal/prompt comando da pasta raiz do projeto, para instalar o ghp-import:

pip install ghp-import

Antes de terminamos, precisamos iniciar o git na pasta raiz do projeto e adicionar o github do projeto. Assim no terminal do projeto digite:

git init
git remote add origin https://github.com/seunick/seunick.github.io.git

Para publicar e construir o build, utilizando o github pages, digite os seguintes comandos:

make publish
pelican content -o output -s pelicanconf.py
ghp-import output -b gh-pages
git push origin gh-pages

Olha um exemplo do resultado desse tutorial em: https://pamellabiotec.github.io/

Considerações Finais

Vimos nesse tutorial como implementar site estático utilizando o CMS Pelican e programação python, e hospedagem no github page. Se tiverem alguma dúvida, deixe nos comentários que logo responderei.

Top comments (0)