Gerador de site estático

Como criar um gerador de site estático do zero

Posted by Leandro Soares on 02 de Novembro de 2023

Esse site foi criado usando Flask, para não ter que servir a aplicação usando um servidor dedicado criei um pequeno gerador de site estático usando como base o próprio Flask. Projeto no github https://github.com/qzar02/fish.

Os arquivos YAML

Para armazenar os dados sobre o site usei alguns arquivos YAML. O blog.yaml para armazenar dados sobre o nome do site, páginas, menu, links, etc.

Temos também os arquivos posts/draft.yaml e o posts/publish.yaml com as definições dos posts. O schema dos arquivos depende dos templates das páginas em Jinja.

Como usar ?

  1. Instale as dependências

pip install -r requirements.txt
  1. Edite o arquivo blog.yaml com as definições do site.

  2. Execute a aplicação


python app.py
  1. Acesse http://localhost:5432/index.html.

O “index.html” é o mesmo path configurado no arquivo blog.yaml na sessão pages, por padrão está como index.html .

Criando um post

Para criar um post, edite o arquivo posts/publish.yaml e crie novos posts com o seguinte schema:


- path: "posts/it/s/my/firs/post/first-post.html"
  template: post.html
  header_bg_image: assets/img/post-bg.jpg
  heading: Cool page
  subheading: This is a cool page
  user:
    name: Author name
  published_at: October 19, 2023
  content: contents/first-post.html

A chave path é o identificador da postagem e não tem restrições, esse identificador será usado para acessar o post através do link. Exemplo: O link http://localhost:5432/posts/it/s/my/firs/post/first-post.html vai apontar para o post definido anteriormente.

A chave template , pode ser um dos templates dentro da pasta templates.

A chave content é o caminho do arquivo de template com o conteúdo do post. Esse arquivo por ser um template, pode conter tags do Jinja.

Em seguida crie o arquivo indicado em content e adicione o conteúdo do post.

Com a aplicação executando, acesse http://localhost:5432/. A página com o post deverá ser exibida.

Executando o build

Para gerar o site estático execute o arquivo build_static.py.


python build_static.py

Todas as páginas definidas no arquivo blog.yaml e posts/publish.yaml serão criadas e escritas na pasta build e na mesma estrutura de pasta usada na chave path do arquivo YAML.

Para testar o site estático use:


cd build
python -m http.server 8080

Acesse http://localhost:8080/index.html