- Git
- R
- Hugo versão 0.121.2
- Pacote RBlogdown
O site foi construído com o pacote
blogdown, que permite escrever
com documentos do Rmarkdown. O mecanismo por trás do site é o
Hugo, que transforma em HTML páginas escritas em
Markdown (*.md).
Entretanto nós escrevemos diretamente em Markdown (*.md*), e o Hugo
converte para HTML, pois a dinâmica do site não está mais focada em
blogs, e sim em conteúdo das matérias do curso de Estatística e Ciência
de Dados e em informações sobre o PET Estastística UFPR.
A primeira coisa a fazer é clonar este repositório com
git clone https://github.com/pet-estatistica/pet-estatistica.github.io.gitou usando a interface do RStudio.
Depois basta abrir o R neste diretório e instalar o Hugo na versão
'0.121.2', para garantir a compatibilidade com a versão do
repositório.
blogdown::install_hugo(version="0.121.2")Após a instalação rode o comando blogdown::serve_site() para iniciar
um servidor do hugo, a fim de verificarmos se o site vai abrir sem
nenhum problema.
blogdown::serve_site()Obs.: Se estiver rodando o R em um container Docker na sua máquina local, use:
blogdown::serve_site(host="0.0.0.0")Em seguinda uma página irá abrir no seu navegador com o conteúdo do site já renderizado.
No RStudio, basta clicar no botão "Addins > Serve Site" que o mesmo acontecerá automaticamente.
Não altere a versão do Hugo, deixe na versão 0.121.2, a fim de
garantir a compatibilidade com os scripts da Netlify e o domínio do
https://pet.leg.ufpr.br
Só altere se você sabe o que está fazendo, e tem um backup de como voltar antes da alteração.
O site utiliza a estrutura padrão do hugo, com excessão que não temos o
diretório content/blog e ou content/postagens, ao invés possuímos
uma estrutura que atende as demandas atuais do PET.
Abaixo estão as pastas no diretório raiz do site:
tree -L 1
.
├── antigo/
├── config.toml
├── content/
├── data/
├── deploy.sh
├── layouts/
├── netlify.toml
├── public/
├── static/
└── themes/
11 directories, 6 filesBreve explicação dos diretórios:
antigo: é onde está o site antigo do PETconfig.toml: é o arquivo de configuração do Hugo, mais informações em All settingscontent: é onde fica os arquivos de conteúdo do site.data: é onde fica os arquivos com informações dos petianosdeploy.sh: é o arquivo de deploy para o Netlify.layouts: é onde ficam os templates de layouts das páginas.netlify.toml: é o arquivo de configuração do Netlify.public: é o diretório onde o site estático é gerado e salvo por padrão.static: é o diretório onde estão todos os arquivos PDF e Imagens do site, sempre que precisar salvar algum arquivo estático, salve nele.themes: é o diretório onde está o tema que estamos usando.
Abaixo estão as pastas do diretório content
.
├── 404.md
├── atividades\
├── contato\
├── integrantes\
├── materiais\
├── obrigado\
├── processos\
├── redessociais\
├── selecao\
└── sobre\Para criar um novo post no blog siga estes passos (supondo que está no RStudio):
- Crie um novo branch
- Nevegue até a pasta correspondente com a página que deseja alterar
dentro de
content - Abra o arquivo correspondente, ou crie um novo arquivo
.mdno caso de processos - Edite o arquivo e salve
- Faça um commit e push para o GitHub
- No GitHub, crie um pull request e marque alguém para revisar o post
Depois de finalizadas estas etapas, o responsável deverá fazer o merge do post no ramo principal.
As informações podem ser alteradas dentro do arquivo data/team.yml
Se as alterações forem grandes, crie um branch e faça um pull request (similar ao processo de criação de posts).
O site está configurado para ser publicado automaticamente quando
qualquer push for dado para o repositório (no ramo master), por meio
do Netlify. O arquivo netlify.toml já
possui as informações necessárias para gerar o site.
O custom domain pet.leg.ufpr.br foi configurado no Netlify e as
entradas apropriadas foram inseridas no DNS do servidor do LEG.
- Hugo Future Imperfect Slim wiki
- Configure Hugo: configurações básicas
- Hugo's Lookup Order: importante para saber o que é executado primeiro
- Hugo Shortcodes: maneiras de incluir snippets de código, como vídeos do Youtube, tweets, etc
- Multilingual Mode: sobre páginas multi-línguas
- Image Processing: processamento de figuras