Home
Instituição: Ada Tech
Curso: Vem Ser Tech - DevOps (iFood)
Módulo: Versionamento e Arquivos de Marcação
Projeto: Wiki/blog
Este projeto tem como finalidade aplicar todos os conhecimentos adquiridos durante a realização do módulo "Versionamento e Arquivos de Marcação"
[Crie um novo repositório no GitHub para o seu Wiki e clone-o para o seu ambiente de desenvolvimento local]
O repositório criado para este projeto é o: {Repositório}. Além do repositório principal existe um {Fork} do repositório dentro da organização cria pelos membros do grupo. Membros:
[Configure a estrutura básica do projeto, incluindo a pasta de templates e recursos estáticos]
A estrutura básica aplicada ao projeto está apresentada na imagem abaixo:
A estrutura apresentada é a visualizada na Branch "develop". Na raiz do projeto estão os seguintes arquivos/diretórios:
-
[Diretório] .github/workflows: diretório contendo o workflow "deploy.ml".
- [Arquivo] deploy.ml: arquivo responsável por realizar o deploy da site no GitHub Pages. Toda vez que um commit é realizado na branch "develop" o fluxo de trabalho é executado para atualizar os arquivos na branch "main". Portanto, ao atualizar um arquivo Markdown (conteúdo da página) e realizar o commit na "develop", automaticamente a branch "main" será atualizada com o novo conteúdo, permitindo a atualização do site.
-
[Diretório] development: principal diretório onde os arquivos de de desenvolvimento do blog estão armazenados.
-
[Diretório] build: diretório com o conteúdo gerado pelo Frozen-Flask. O Frozen-Flask é utilizado para criar as páginas estáticas a partir dos modelos (templates) do Flask. Nesses projeto é construído as páginas estáticas com os conteúdos dos diretórios "markdown" e "templates". Portanto: "markdown" + "templates" -> "build".
-
[Diretório] markdown: diretório com o conteúdo das postagens do site. Cada arquivo markdown (.md) dentro do diretório é uma página distinta.
-
[Diretório] static: diretório com o conteúdo estático do site, respeitando o modelo definido ao utilizar o Flask.
-
[Diretório] css: diretório com as folhas de estilos (.css) utilizadas para estilização do site. Nesse projeto é utilizado o Bootstrap, realizando uma chamada interna do conteúdo, assim o arquivo (.css) do Bootstrap também está nesse diretório.
-
[Diretório] img: diretório com as imagens contidas no site.
-
[Diretório] js: diretório com os arquivos JavaScript (.js) auxiliares para o funcionamento do Bootstrap.
-
-
[Diretório] templates: diretório com os templates (.html) renderizados pelo Flask. O conteúdo principal escrito em HTML está no arquivo "base.html". Os demais arquivos do diretório são extensões do arquivo "base.html".
-
-
[Arquivo] app.py: arquivo Python (.py) com definições de rotas e demais configurações para a construção das páginas dinamicamente pelo Flask.
-
[Arquivo] freeze.py: arquivo Python (.py) com as configurações e a execução do método freeze() do Frozen-Flask para a construção das páginas estáticas usando as páginas dinamicamente construídas no Flask.
-
[Diretório] wiki: diretório onde os arquivos desta wiki estão armazenados.
-
[Arquivo] .gitignore: utilizado para definir quais arquivos/diretórios serão ignorados ao realizar a atualização do conteúdo para o repositório remoto. Nesse projeto o ".gitignore" está configurado para ignorar arquivos/diretórios criados para ambientes virtuais (venv) das máquinas locais.
-
[Arquivo] README.md: utilizado para uma descrição do projeto, informando para outras pessoas por que seu projeto é útil, o que elas podem fazer com o projeto e como elas podem usá-lo etc.
-
[Arquivo] requirements.txt: utilizado para armazenar as informações ralativas as dependências necessárias para a instalação de um determinado módulo. Nesse projeto foi necessário a instalação de 3 módulos: Flask, Markdown2 e Frozen-Flask.
[Crie um arquivo JSON para armazenar as informações gerais como titulo, descrição e autor]
Como requesito opcional do projeto, optamos por não utilizar a leitura de dados por arquivos JSON (.json). Centralizamos a inserção de conteúdo nas páginas por meio dos arquivos Markdown (.md).
[Use a linguagem Python para ler os dados de um arquivo markdown e gerar páginas HTML estáticas para cada postagem do blog]
Esse requisito foi atendido utilizando as bibliotecas Python: os, flask e markdown2 no arquivo "app.py" e as bibliotecas: os, app e flask_frozen no arquivo "freeze.py".
[Configure um fluxo de trabalho com o Gitflow, que envolve a criação de branches para desenvolvimento, features e releases, para melhor organização e colaboração]
Pela simplicidade do projeto, optou-se por utilizar apenas duas branchs para o fluxo de trabalho. A branch develop, para o desenvolvimento e contrução das páginas e a branch main, onde é feito o deploy do projeto no qual é vinculado ao GitHub Pages.
[Personalize o estilo do blog usando CSS, criando uma aparência agradável (Isso fica a critério)]
Como descrito no item 2 (Estrutura Básica), a estilização do site foi realizada usando o Bootstrap. Além dos estilos definidos no Bootstrap o arquivo "style.css" contido no mesmo diretório é responsável por adicionar uma estilização extra.
[Teste o blog localmente para verificar se as postagens são geradas corretamente e se o estilo está de acordo com o esperado]
Todo o processo de teste do site foi realizado em máquina local; as instalações das bibliotecas Python necessárias para o funcionamento do projeto (contidos em "requirements.txt") foram instaladas em ambiente virtual (venv).
- [raiz] Para criar o ambiente virtual:
python -m venv venv
- [raiz] Para ativar o ambiente virtual:
venv\Scripts\activate
- [raiz]{venv} Para instalar as dependências:
pip install -r requirements.txt
- [/development]{venv} Para executar o Flask em modo debug:
flask run --debug
- [/development]{venv} Para construir as páginas estáticas com Frozen-Flask:
python freeze.py
[Faça o push do projeto para o repositório no GitHub e habilite o GitHub Pages nas configurações do repositório. Isso permitirá que o blog seja publicado online]
Este requisito pode ser observado acessando: GitHub Pages
[O primeiro post no Wiki/blog deve ser uma documentação de como você pensou e quais os principais procedimentos que realizou para concluir essa atividade]
A descrição (documentação) de como foi desenvolvido o blog(site) está definida nesse projeto de forma separada do site. Portanto, para acessar essas informações deve-se direcionar para este Wiki. Em resumo:
- Documentação: Wiki
- Blog(site): GitHub Pages
[Implemente automações usando scripts Python para atualizar automaticamente o blog quando novas postagens forem adicionadas (Opcional)]
A automatização da atualização das páginas (posts) do site foi desenvolvida no arquivo "deplou.yml", ao realizar um commit na branch "develop", como mencionado anteriormente. Contudo, novas páginas não são automaticamente construidas simplesmente ao acrescentar novos arquivos markdown. Como item opcional, essa funcionalidade poderá ser adicionada futuramente ao projeto.