Crie seu portfolio numa Github Page

1️⃣ Criar um repositório no GitHub

Antes de começar, precisamos criar um repositório no GitHub:

  1. Acesse o GitHub (https://github.com/) e faça login na sua conta.
  2. Clique no botão “New Repository” para criar um novo repositório.
  3. Defina um nome para o repositório (exemplo: portfolio).
  4. Defina o repositório como público para que o GitHub Pages possa acessá-lo.
  5. ⚠️ NÃO adicione README.md, .gitignore ou LICENSE, pois isso pode causar conflitos pelo menos por agora.
  6. Clique em “Create repository” e copie a URL do repositório para usarmos mais tarde.

2️⃣ Configurar o ambiente

🔹 RStudio

  1. Abra o RStudio.

  2. Vá para File > New Project > New Directory > Quarto Website.

  3. Escolha um nome e um local para o projeto (local, OneDrive, Google Drive, …) e marque as opções Create a git repository, Use renv with this project

  4. Clique em Create Project.

  5. Instale os pacotes necessários no console do RStudio: (opcional)

    install.packages("quarto")

  6. Edite o arquivo quarto.yml e da linha 1 a 3 copie e cole o codigo abaixo:

    project:
  type: website
  output-dir: "."

  7. Para renderizar o site, rode:

    quarto::quarto_render()

    ou no Terminal execute

    quarto render

    Ou simplesmente clique no botão Render quando estiver com o arquivo index.qmd ou about.qmd abertos para visualizar um preview do site.

Obs.: Se encontrar alguma mensagem de erro como - The project is out-of-sync -- use renv::status() for details. em Background Jobs, no console do RStudio, digite:

renv::status()

Isso mostrará o que precisa ser atualizado.

Em seguida, para sincronizar pacotes, rode:

renv::restore()

Se quiser atualizar todos os pacotes:

renv::update()

Depois de resolver os problemas dos pacotes, tente renderizar o site no RStudio:

quarto::quarto_render()

🔹 Positron

  1. Baixe e instale o Positron: https://positron.dev/ ou em https://github.com/posit-dev/positron
  2. File > New File > Quarto Project > Website Project.
  3. Escolha o diretório onde pretende salvar o seu projeto, local, OneDrive, Google Drive…crie um nome pro seu subdir em Project Directory Name
  4. File > Open Recent > e abra o subdir que você acabou de criar
  5. Note que vc terá no seu projeto os seguintes arquivos:
  • _quarto.yml
  • about.qmd
  • index.qmd
  • styles.css

  1. Edite o arquivo quarto.yml e da linha 1 a 3 copie e cole o codigo abaixo:

    project:
  type: website
  output-dir: "."

  2. Abra qualquer um dos dois .qmd e execute ele clicando em Preview ou usando o atalho CTRL+Shift+K (Windows)

  3. Renderize o site:

    quarto render

🔹 VSCode

  1. Baixe e instale o Quarto se ainda não tiver: https://quarto.org/

  2. Abra a pasta do projeto (File > Open Folder).

  3. Instale a extensão do Quarto:

    • Vá em Extensions (Ctrl + Shift + X).
    • Pesquise por “Quarto” e instale.

  4. Para renderizar o site, abra o terminal e rode:

    quarto render

    Maiores infos podem ser obtidas nesse link oficial do quarto.org ou p. ex. nesse vídeo aqui e aqui

3️⃣ Configurar o Git e conectar ao GitHub

Agora, vamos configurar o Git para versionamento e conectar ao GitHub.

  1. Abra o terminal na sua IDE.

  2. Inicialize o repositório Git no projeto:

    git init

  3. Conecte o repositório local ao GitHub (substitua SEU-USUARIO pelo seu nome no GitHub):

    git remote add origin https://github.com/SEU-USUARIO/portfolio.git

  4. Adicione todos os arquivos ao Git:

    git add .

  5. Crie um commit inicial:

    git commit -m "Primeira versão do portfolio ou site"

  6. Defina a branch principal como main:

    git branch -M main

  7. Envie os arquivos para o GitHub:

    git push -u origin main

4️⃣ Configurar o GitHub Pages

Agora que os arquivos estão no GitHub, vamos ativar o GitHub Pages.

  1. Acesse o repositório no GitHub.
  2. Vá até Settings > Pages.
  3. Em “Build and deployment”, escolha “Deploy from a branch”.
  4. Selecione a branch main e defina / (root) como diretório de origem.
  5. Clique em “Save”.

Após alguns minutos, seu site estará disponível no link:

https://SEU-USUARIO.github.io/portfolio/

5️⃣ Atualizar o site

Se você quiser modificar o site/portfolio no futuro, basta seguir os passos abaixo para atualizar:

  1. Edite os arquivos do site.

  2. No terminal, adicione as mudanças ao Git:

    git add .

  3. Crie um novo commit descrevendo as mudanças:

    git commit -m "Atualização do site"

  4. Envie as alterações para o GitHub:

    git push origin main

🎯 Conclusão

Agora seu site está publicado no GitHub Pages e pronto para ser atualizado sempre que necessário! 🚀

Em seguida, recomendo que dê uma olhada no manual de referência do Quarto visitando o site oficial:

Aqui você pode encontrar dicas úteis de como editar seu .yml pro design que preferir:

Caso queira seguir um vídeo tutorial simples que faz uso de um template pronto veja:

Ou então você poderia ver um bom vídeo tutorial de uso do Python no Quarto:

Veja alguns exemplos de alguns portfólios hospedados em GitHub Pages feitas por alguns Data Scientists ….

  • Natassha’s Portfolio – Um portfólio interativo que destaca projetos, artigos e habilidades em Data Science.
    Natassha’s Portfolio :contentReferenceoaicite:0

  • Haruka Takagi’s Data Science Portfolio – Apresenta projetos acadêmicos e experiências profissionais com ênfase em machine learning e NLP.
    Haruka Takagi’s Portfolio :contentReferenceoaicite:1

  • 6 Examples | Developing Your Data Science Portfolio – Uma coleção de portfólios de Data Science, útil para ter ideias sobre estrutura e conteúdo.
    6 Examples :contentReferenceoaicite:2

  • Joanna Khek’s Portfolio – Portfólio que foca em projetos de IA, com links para aplicações interativas e repositórios de código.
    Joanna Khek’s Portfolio :contentReferenceoaicite:3

  • Hannah Yan’s Portfolio – Combina projetos de Data Science com arte generativa e visualizações de dados, mostrando diversidade de habilidades.
    Hannah Yan’s Portfolio :contentReferenceoaicite:4

  • Ajay Gurav’s Portfolio – Um exemplo de portfólio que apresenta tanto projetos técnicos quanto experiências profissionais em Data Science e desenvolvimento.
    Ajay Gurav’s Portfolio :contentReferenceoaicite:5

Além desses exemplos, há também tutoriais — como o de Chris Tran — que ensinam a criar um portfólio minimalista usando GitHub Pages, o que pode ser uma ótima inspiração para montar o seu próprio:

Lembre-se que a nossa intenção nessa disciplina de Big Data for finance project é que vocês trabalham em colaboração para a criação de uma Github Page ÚNICA pro projeto do seu grupo!

Aproveite os conhecimentos práticos aqui obtidos pra futuramente criar a sua própria Github Page, se inspirar nas páginas com os templates oferecidos pelo quarto.org (pra ganhar bastante tempo) e nesses links desses portfolios de alguns desses Data Scientists que postei aqui pra que em breve você crie a sua própria page de portfolio de quaisquer outros projetos de Data Science que forem fazer!