Nesse curso você aprenderá a fazer um portifólio acadêmico usando o framework Quarto. Clique na imagem abaixo para ver uma prévia do site.

Nota

O repositório do site pode ser encontrado em https://github.com/tiagowtbt/Ex_Curso_1

Requisitos

RStudio (a versão mais atualizada)
Quarto framework
GitHub

Importante

Devido a erros na versão 1.43 do Knitr, estamos usando a versão 1.42.  
Também é necessário usar o Rmarkdown versão 2.21.

Por que fazer sites em Quarto?

Programação pode ser uma atividade que demanda tempo e bastante investimento para ser aperfeiçoada. Muitas pessoas as vezes precisam de um site para divulgar seus projetos, portifolios, vender seus produtos, uma infinidade de ojetivos, mas não possuem o tempo para ser investido em aprender uma linguagem nova. O Quarto veio ser uma alternativa fácil, gratúita e rápida para criar páginas, poupando assim o custo de contratar um programador ou um gerador de paginas de terceiros. Ele disponibiliza o Quarto MarkDown, sua própria versão da linguagem Markdown que converte os documentos em páginas html.
Dentre suas funcionalidades, o Quarto também permite a criação de livros, blogs, slides e documentos acadêmicos, com suporte a temas e outros tipos de customização.

Criando o projeto

As versões mais novas do RStudio já vem com suporte nativo para qmd (Quarto MarkDown), então basta ir em criar um novo projeto e selecionar quarto website. É necessário dar um nome ao projeto e indicar onde ele será armazenado.

Configurações

A configuração geral da página pode ser alterada no arquivo _quarto.yml.


project:
  type: website

website:
  title: "AGATHA CHRISTIE" #título da nossa página
  navbar: #nosso menu de navegação
    right:
      - href: index.qmd #pagina inicial
        text: Home
      - pages/sobre.qmd #endereço da página sobre
      - pages/projetos.qmd #endereço da pagina projetos

format:
  html:
    theme: litera #tema utilizado
    css: styles.css #arquivo de estilização adicional
    toc: true

editor: visual

Toda vez que adicionarmos novas páginas, temos que referencia-las no arquivo, colocando na ordem que eles aparecerão no menu. Para colocar conteúdo nas páginas será necessário cria-las dentro do diretório do projeto. Para isso, criaremos uma pasta denominada pages onde serão armazenados nossos arquivos .qmd. Iremos criar primeiramente a pagina sobre.

Página sobre

Primeiro deve ser criado um arquivo sobre.qmd na pasta pages. Iremos editar o cabeçalho do código, que é a area entre as marcações abaixo:

---
title: "Sobre"
css: about.css #arquivo css para formatação do texto
about:
  template: marquee
  image: assets/profile.jpg #imagem do autor
  links:
    - icon: twitter
      text: twitter
      href: https://twitter.com
    - icon: github
      text: Github
      href: https://github.com
---

A seção about usa um template existente para apresentar as informações sobre o autor, como um texto, links para paginas importantes e até anexo do curriculo lattes. Iremos envolver o texto de apresentação na tag .justificar, que será alterado pelo css mais tarde.


::: {.justificar}

#nosso texto será justificado e conterá uma citação

:::

::: {.fonte}

#essa div irá formatar a fonte de onde foi retirado nosso texto

:::

about.css

iremos criar o arquivo about.css no mesmo local da pagina sobre. Ele irá conter as caracteristicas estéticas da nossa tag .justificar e .fonte.

.justificar{
  text-align: justify !important
}

Isso fará com que nosso texto saia justificado.

.fonte{
  text-align: right !important
}

Isso fará com que a fonte saia do lado direito da página.

Página projetos

Iremos criar a pagina projetos.qmd no mesmo diretório que as outras. Note que o elemento título do cabeçalho é o que definirá como o link da pagina será exibido no menu. Dessa vez, estaremos usando a seção listing para criar uma lista de subpaginas, que irão conter nossos projetos academicos.

---
title: "Projetos"
lang: pt #linguagem da pagina
listing: 
  contents: projetos
  sort: "date desc" #ordem que os projetos aparecerão
  type: default 
  categories: true #mostrar categoria de cada projeto
  sort-ui: true #mudar ordem
  filter-ui: false #filtros de pesquisa
page-layout: full 
title-block-banner: true
---

Para popular nossa página projetos teremos que criar arquivos .qmd dentro da pasta indicada na seção contents (/projetos). Veja no repositório do github exemplos de como criar seus arquivos de projeto.

A nível de exemplo, abaixo está o cabeçalho de um dos projetos:

---
title: "O NATAL DE POIROT"
lang: pt
author: "Agatha Christie"
date: "12-19-1938"
image: ../assets/project1.jpg
categories: 
  - Mistério
  - Poirot
---

Página inicial

A ultima página que nos falta criar é a página inicial. Iremos combinar as funções about e listing apresentadas acima para criar uma página com uma breve introdução que quando clicada nos redireciona para a pagina sobre, e uma pequena seção com os últimos 3 projetos publicados.

Para isso, iremos utilizar o arquivo index.qmd que é disponibilizado em novos projetos quarto.

---
title: "Agatha Christie" #título
lang: pt
sort-ui: false #removendo filtros e navegação da página
filter-ui: false
page-navigation: false

listing: #Nossa seção de ultimos projetos
  id: projetos
  contents: pages/projetos
  sort: "date desc"
  type: grid 
  categories: false #sem categorias
  sort-ui: false #Sem ui, apenas os cards
  filter-ui: false
  max-items: 3 #Numero máximo de itens
  fields: [image, date, title] #o que aparecerá no card 
  #(adicione reading-time caso queira tempo de leitura)

about: #Nossa seção de convite
    id: card
    template: jolla
    image: pages/assets/profile.jpg #Foto do autor do site
    links: #links
      - icon: twitter
        text: twitter
        href: https://twitter.com
      - icon: github
        text: Github
        href: https://github.com
    # - 
    #   text: Vitae
    #   href: pages/cv.pdf 
    # - 
    #   text: Lattes
    #   href: https://www.lattes.cnpq.br/
---

Como nossa página está usando dois tipos de elementos, iremos associar uma tag a cada um para que eles sejam renderizados de maneira ordenada.


::: {#card}
Aqui deve ser escrita uma breve apresentação sobre o autor.
:::

::: {#projetos}
:::

E está pronto nosso site! Agora basta você editar a seu gosto, adicionando seus projetos, links, novas páginas, etc. e depois renderizar o mesmo no botão Render Website da aba Build. É muito fácil personalizar seu site com o Quarto. Aprenda mais em quarto.org/docs/websites/.

Hosteando a pagina

Agora precisamos colocar a página no ar. Para isso, o github disponibiliza um serviço gratúito chamado Github Pages, uma plataforma gratúita que permite guardar nossos projetos em repositórios e disponibilizar páginas para os mesmos.

Primeiro devemos criar uma conta no site do github. Tendo a conta criada, iremos criar um repositório para colocar nosso site. É importante que o nome desse repositório seja “nome de usuário”.github.io, afinal estamos criando uma página de usuário e não de um projeto. Veja as diferenças nesse link.

Depois é só colocar os arquivos em html (o conteúdo da pasta _site) dentro do repositório e por volta de 5 minutos ele já estará no ar.
Certifique que seu site foi corretamente hosteado indo na aba Settings (configurações) do projeto e clicando na seção pages.