1 Instalação

A instalação do pacote R blogdown é feita com o comando:

install.packages("blogdown")

O carregamento, com:

library(blogdown)

A instalação do gerador de site Hugo é feito com o comando:

blogdown::install_hugo()

A verificação de versão e mudança para nova versão de Hugo são feitas com:

blogdown::hugo_version()

blogdown::update_hugo()

Pode acontecer do R estar com uma versão antiga de Hugo e, ao tentar atualizá-la, a nova versão não é instalada. A primeira coisa a fazer é ver a saída do comando blogdown::update_hugo():

1. A saída mostra a última versão disponível de Hugo;
2. E o caminho para baixá-la.

Então, com o comando linux wget, pega-se o arquivo .deb (ver o meu caso):

wget https://github.com/gohugoio/hugo/releases/download/v0.78.2/hugo_extended_0.78.2_Linux-64bit.deb

A seguir, instala-se no linux com o comando:

sudo dpkg -i hugo_extended_0.78.2_Linux-64bit.deb

Por fim, instala-se no R usando blogdown::update_hugo().

2 Temas

O site precisa de um tema, aparência. O gerador de site Hugo possui centenas de modelos para escolher. Visite Hugo, decida qual tema se enquadra melhor com o propósito de seu site.

Em nosso treino, vamos usar o tema Academia Hugo.

A primeira coisa a fazer, é clicar no botão Download e copiar o endereço do tema:

https://github.com/themefisher/academia-hugo

Em seguida, retirar a primeira parte do endereço, https://github.com/, e ficar somente com a segunda parte:

themefisher/academia-hugo

Por fim, usar o comando para criar o site localmente (em seu computador):

blogdown::new_site(theme = "themefisher/academia-hugo")

Agora, chegou a hora de ver o site, fazer aparecer em seu navegador:

blogdown::serve_site()

É muito importante salvar todos arquivos que geram seu site em um só lugar. Com o comando abaixo, serão salvos no diretório public:

blogdown::build_site()

O site Academia vem com alguns estilos de cores e de fontes pré-programados. A escolha é feita no arquivo config/_default/params.toml:

# Color theme.
#   Choose from "default", "ocean", "forest", "dark", "apogee", "1950s", "coffee", "cupcake", or "strawberry".
color_theme = "default"             <--(mudar)--

# Font style.
#   Choose from "default", "classic", or "playfair".
font = "default"                    <--(mudar)--

Os próximos capítulos vão trabalhar o slogan:

Seu site, sua cara.

3 Contagem automática de equações

O site precisa ser configurado para atingir as expectativas do construtor e chamar atenção dos visitantes. A ativação da contagem automática de equações (LaTeX) precisa ser feita manualmente. Há 2 procedimentos que funcionam.

Procedimento 1:

Colocar o script abaixo no arquivo /themes/Academia-hugo/layouts/partials/site_header.html:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  TeX: { equationNumbers: { autoNumber: "all" } }
});
</script>

Procedimento 2:

Ajustar a opção math = true no arquivo /config/_default/params.toml:

# Enable global LaTeX math rendering?
#   If false, you can enable it locally on a per page basis.
math = false                                               <--(mudar)-- true

4 Menus e seções de menus

O site Academia Hugo foi desenvolvido originalmente em inglês. Neste capítulo, vamos editar os menus e as seções dos menus para aparecerem em português (principalmente, títulos e subtítulos).

A barra com os menus (Home, Posts, Projects, Publications, Courses e Contact) fica no topo da página. A edição é feita no arquivo /config/_default/menus.toml:

[[main]]
  name = "Home"              <--(mudar)--
  url = "#about"
  weight = 10

[[main]]
  name = "Posts"             <--(mudar)--
  url = "#posts"
  weight = 20

[[main]]
  name = "Projects"          <--(mudar)--
  url = "#projects"
  weight = 30

[[main]]
  name = "Publications"      <--(mudar)--
  url = "#publications"
  weight = 40

[[main]]
  name = "Courses"           <--(mudar)--
  url = "courses/"
  weight = 50

[[main]]
  name = "Contact"           <--(mudar)--
  url = "#contact"
  weight = 60

Ao fazer a edição, somente altere a variável name, por exemplo, name = "Publications" para name = "Publicações", mas não modifique a variável url.

A url aponta para um arquivo: que contém um título, um subtítulo e outros itens que são disparados na página do site. Agora vamos editar o arquivo da url. Começaremos com o menu Posts, que possui a url = "#posts". O que vamos fazer é editar o arquivo /content/home/posts.md:

title = "Recent Posts"                                              <--(mudar)-- "Postagens Recentes"
subtitle = "MY FANS DON'T FEEL LIKE I HOLD ANYTHING BACK FROM THEM" <--(mudar)-- "Material não compartilhado é material não existente"

O mesmo procedimento pode ser feito com os outros menus:

O menu Projects é editado no arquivo /content/home/projects.md:

title = "Projects"
subtitle = "ALL THINGS ARE DIFFICULT BEFORE THEY ARE EASY"

O menu Publications é editado no arquivo /content/home/publications.md:

title = "Recent Publications"
subtitle = "Some publications I have recently published"

O menu Courses é editado no arquivo /content/courses/_index.md:

title: Courses

O menu Contact é editado no arquivo /content/home/contact.md:

title = "Contact"
subtitle = "Connect with me"

E o menu Academia é editado no arquivo config.toml:

# Title of your site
title = "Academia"

5 Autor

Dados sobre o autor do site aparecem em 3 locais diferentes. Você poderá, então, escrever e usar fotos para reforçar seu perfil acadêmico/profissional. As fotos (.jpg) (.png) devem ser gravadas no diretório /static/img/.

Local 1: Clicando no Menu Academia e, logo em seguida, no botão Know more, a edição é feita no arquivo /content/authors/admin/_index.md:

avatar_image: user-full.png (personagem apontando para o lado)  <--(mudar)-- SuaFoto1.png

btn:
- label: Download Resume                                        <--(mudar)
  url: https://sourcethemes.com/academic/docs/install/          <--(mudar)

Nelson Bighetti is a professor of artificial intelligence at the Stanford AI Lab.
His research interests include distributed robotics, mobile computing and programmable matter.
He leads the Robotic Neurobiology group, which develops self-reconfiguring robots, 
systems of self-organizing robots, and mobile sensor networks.

![reviews](../../img/certifacates.jpg)

Você deve ter notado que o arquivo acima é do tipo Markdown (.md). Isso significa que ele aceita outras marcações dessa linguagem. Por exemplo, caso queira adicionar mais fotos, uma tabela com informações pessoais e alterar o botão para disparar seu currículo Lattes, poderá deixar o arquivo /content/authors/admin/_index.md dessa forma:

avatar_image: SuaFoto1.png

btn:
- label: Currículo Lattes
  url: http://lattes.cnpq.br/NúmeroDoSeuLattes

Sou docente/discente da ... atuo na área ... logo abaixo,
apresento especializações que fiz durante minha carreira.

![Informação 1](../../img/Certificado1.jpg)

![Informação 2](../../img/Certificado2.jpg)

![Informação 3](../../img/Certificado3.jpg)

| Informação 1 | Informação 2 | Informação 3 |
| :----------: | :----------: | :----------: |
| Linha 1      | célula       | célula       |
| Linha 2      | célula       | célula       |
| Linha 3      | célula       | célula       |

Local 2: Clicando somente no Menu Academia, a edição é feita no arquivo content/home/hero.md:

+++
hero_media = "user-2.jpg" (personagem usando óculos)  <--(mudar)-- "SuaFoto2.jpg"

[btn]
  url = "/authors/admin"
  label = "Know more"                                 <--(mudar)-- "Saiba Mais"
  
[btn_alt]
  url = "#contact"
  label = "Contact me"                                <--(mudar)-- "Contate-me"
+++

## My name is **Michael Vahn** and I'm a **Professor** specializing in **Artificial Intelligence**

Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC.

Local 3: Por fim, clicando somente no Menu Home, a edição é feita no arquivo content/home/about.md:

avatar_image = "user-full-2.jpg" (personagem em pé na rua)  <--(mudar)-- "SuaFoto3.jpg"

6 Contato

Há necessidade de modificar 2 arquivos para atualizar o contato do autor no site. O título e subtítulo da seção Contato já deve estar em português, pois editamos o arquivo /content/home/contact.md – ver Capítulo 4. Agora, esse mesmo arquivo trás a opção de ativar/desativar a caixa de enviar mansagem para o autor:

# Email form provider
#   0: Disable email form
#   1: Netlify (requires that the site is hosted by Netlify)
#   2: formspree.io
email_form = 0                      <--(digitar sua opção)--

O segundo arquivo relacionado com a seção Contato, se encontra em config/_default/params.toml:

email = "Seu@Email"

phone = "9 888 8888"

address = "SuaRua, SeuBairro, SeuNúmero, SuaCidade, SeuEstado"

#autor# office_hours = """Monday 10:00 to 13:00<br>Wednesday 09:00 to 10:00"""

#autor# appointment_url = "https://calendly.com"

#autor# contact_links = [
#autor#   {icon = "twitter", icon_pack = "fab", name = "DM Me", link = "https://twitter.com/Twitter"},
#autor#   {icon = "skype", icon_pack = "fab", name = "Skype Me", link = "skype:echo123?call"},
#autor#   {icon = "keybase", icon_pack = "fab", name = "Chat on Keybase", link = "https://keybase.io/"},
#autor#   {icon = "comments", icon_pack = "fas", name = "Discuss on Forum", link = "https://discourse.gohugo.io"},
#autor#   {icon = "telegram", icon_pack = "fab", name = "Telegram Me", link = "https://telegram.me/@Telegram"},
#autor# ]

#autor# map = 2
#autor# map_api_key = "AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"
#autor# latitude = "37.4275"
#autor# longitude = "-122.1697"
#autor# zoom = 15

Você só precisa usar # para comentar/desativar uma linha. O uso de #autor# é para enfatizar que a desativação foi realizada pelo autor do site.

Como se vê, foram desativados um horário para marcar reunião, um calendário de reuniões, vários links de contatos e um mapa do google para localizar a sala de reuniões.

7 Postagens de documentos

Os documentos são postados (artigos científicos, por exemplo) no menu Posts. O diretório das postagens fica em content/post/. A dinâmica de trabalho é a seguinte: Dentro do diretório das postagens, deve-se criar um novo diretório para cada novo documento a ser postado, por exemplo, content/post/NovoDoc/. E dentro de NovoDoc/, deve-se gravar os seguintes arquivos:

index.Rmd

_bookdown.yml

bibliography.bib

featured.png

style.css

Arquivo index.Rmd:

---
title: "Força Eletromotriz"
subtitle: "Veja a diferença entre força eletromotriz e trabalho"
summary: "Veja a diferença entre força eletromotriz e trabalho"
authors:
- admin
date: "2021-01-30T00:00:00Z"
output:
  blogdown::html_page:
    css: style.css
    toc: true
    number_sections: true
categories: ["Mais"]
tags: ["Contando causos"]
bibliography: [bibliography.bib]
link-citations: true
image:
  caption: "Arte gráfica: o autor"
  focal_point: ""
  preview_only: false
---

# Introdução {-}

Escrever...

# O que é força eletromotriz {#cap1}

Escrever...

# O que é trabalho {#cap2}

Escrever...

# Difeça entre força eletromotriz e trabalho {#cap3}

Escrever...

# Considerações finais {#cap4}

Escrever...

# Referências {-}

O documento a ser postado (título, autor, data, texto, imagens, figuras, tabelas, equações e referências) é digitado no arquivo index.Rmd. Você deve ter notado que esse arquivo é do tipo R Markdown. Isso signigica que ele aceita as marcações da linguagem Markdowm e o recursos avançados da linguagem de programação R. Ademais, se precisarmos de algo mais, ele também aceita elementos da linguagem html. Veja alguns exemplos.

Exemplo de imagem:

```{r IMG1, echo = FALSE, fig.cap = "Escrever.", out.width = "60%", fig.align = "center"}
knitr::include_graphics("/img/SeuDiretorio/SuaImagem.jpg", error = FALSE)
```

As imagens (.jpg) (.png) ficam gravadas no diretório /static/img/. Dentro desse diretório, crie SeuDiretorio e salve a SuaImagem.jpg: para chamar no texto, use \@ref(fig:IMG1).

Exemplo de figura:

```{r FIG1, echo=F, message=F, warning=F, fig.cap="Uma parábola.", out.width="70%", fig.align="center"}
library(tidyverse)
x <- seq(-50,50)
y <- x^{2}
tb <- tibble(x,y)
p <- ggplot(tb, aes(x,y)) + geom_point(color="yellow") + theme_dark()
print(p)
```

As figuras científicas (baseadas em fórmulas matemáticas) são programadas por meio de código R e disparadas com o auxílio do pacote R ggplo2: para chamar no texto, use \@ref(fig:FIG1).

Exemplo de tabela:

```{r TAB1, echo = FALSE, message = FALSE, warning = FALSE}
library(tidyverse)
library(kableExtra)
cab1 <- c("Linha 1", "Linha 2", "Linha 3", "Linha 4")
cab2 <- c("célula", "célula", "célula", "célula")
cab3 <- c("célula", "célula", "célula", "célula")
tb <- tibble(cab1, cab2, cab3)
tb %>% rename(`Cabeça 1`=cab1, `Cabeça 2`=cab2, `Cabeça 3`=cab3) %>%
kbl(booktabs = TRUE, align = "lcc", caption = "Escrever a legenda.") %>%
kable_styling(bootstrap_options = "striped")
```

As tabelas são disparadas com o auxílio do pacote R kableExtra: para chamar no texto, use \@ref(tab:TAB1).

Exemplo de equação LaTeX:

$$
\vec{F} = q \left( \vec{v} \times \vec{B} \right).
(\#eq:EQ1)                                       <--(link da equação)--
$$

Cada equação rebere um link específico: para chamar no texto, use \@ref(eq:EQ1).

Exemplo de elemento html:

<a href="https://themes.gohugo.io/" target="_blank">Site Hugo</a>     <--(site que abre em nova Aba)--

Arquivo bibliography.bib:

@Book{Griffiths,                                             <--(link da referência)--
title = {Introduction to Quantum Mechanics},
author = {David J. Griffiths},
publisher = {Cambridge University Press, ISBN 978-1107179868},
year = {2016},
edition = {2nd},
}

Cada referência deve ser pormenorizada conforme acima: para chamar no texto, use [@Griffiths].

Arquivo _ bookdown.yml:

language:
  label:
    fig: 'Figura '
    tab: 'Tabela '
    eq: 'Equação '
    thm: 'Teorema '
    lem: 'Lema '
    def: 'Definição '
    cor: 'Corolário '
    prp: 'Proposição '
    ex: 'Exemplo '
    proof: 'Prova. '
    remark: 'Observação. '

Este arquivo é responsável por traduzir os rótulos acima para o português.

Arquivo featured.png:

Este arquivo contém uma imagem que será disparada quando se clicar no menu Posts – é o avatar do documento. Você não pode escolher outro nome para o arquivo. Isso significa que deve salvar qualquer imagem (.jpg) (.png) com o nome featured.

Arquivo style.css:

Como dito no Capítulo 2, o site Academia Hugo vem com estilos pré-programados. Mas você pode querer alterar alguma coisa específica do documento. Nesse caso, deve-se colocar seletores html no arquivo style.css. Por exemplo, caso queira alterar a cor e espessura da marcação >, use o seletor:

blockquote {
  border-left: 10px solid red;
}

Por outro lado, caso não queira fazer alteração no estilo geral, o arquivo style.css pode ficar em branco.

8 Títulos semelhantes

É produtivo colocar uma tag em cada documento postado. Assim, você organiza as postagens por tópicos. Para fazer isso, entre no arquivo index.Rmd (do seu documento, como mostra o Capítulo 7) e modifique a variável tags:

tags: ["Contando causos"]     <--(escolher palavra chave para seu documento)

Outra coisa, traduza o título do arquivo content/home/tags.md:

title = "Popular Topics"      <--(Títulos semelhantes)--

Por fim, para o visitante ter acesso aos títulos semelhantes do seu site, entre no arquivo /config/_default/menus.toml e crie este novo menu:

[[main]]
  name = "Títulos semelhantes"
  url = "#tags"
  weight = 21

Nota 1: A url = "#tags" aponta para o arquivo content/home/tags.md.

Nota 2: O peso (weight = 21) coloca o menu Títulos semelhantes logo após o menu Posts; este último possui peso (weight = 20) – ver o Capítulo 4.

9 Site minimalista

Deve ter notado que o site original Academia Hugo está repleto de opções.

Talvez nós não vamos precisar de tantas postagens (Home, Posts, Projects, Publications, Courses e Contact) para expressar o que pensamos. Lembra do slogan?

Seu site, sua cara.

Já pensou em um site minimalista? Ele pode atingir o alvo com maior eficiência. Pensando nisso, sugiro a construção de um site somente com as postagens: Home, Posts e Contact. Para isso, entre no diretório content e remova os seguintes diretórios:

rm -r courses

rm -r project

rm -r publication

rm -r slides

rm -r talk

Após a remoção, restará em content 3 diretórios: authors, home e post.

Agora, no arquivo /config/_default/menus.toml, apague os Menus Projects, Publications e Courses, e também 3 Menus dropdown, mas mantenha os menus abaixo:

[[main]]
  name = "Home"
  url = "#about"
  weight = 10

[[main]]
  name = "Posts"                  <--(mudar)-- "Postagens"
  url = "#posts"
  weight = 20

[[main]]
  name = "Tópicos Populares"      <--(criamos no capítulo anterior)--
  url = "#tags"
  weight = 21

[[main]]
  name = Contact                  <--(mudar)-- "Contato"
  url = "#contact"
  weight = 60

Continuando a criação do site minimalista, entre no diretório /content/home/ e remova os arquivos listados abaixo (.md) e também o diretório gallery:

rm skills.md

rm experience.md 

rm accomplishments.md

rm projects.md

rm talks.md

rm publications.md

rm featured.md

rm people.md

rm slider.md

rm -r gallery/          <--(único que é diretório)--

Verifique se permaneceram os arquivos:

about.md   contact.md   hero.md   index.md   posts.md   tags.md

Agora, relembrando o Capítulo 2, você visualiza o site minimalista no navegador fazendo:

blogdown::serve_site()

Por fim, salve o site no diretório public fazendo:

blogdown::build_site()

10 GitHub

GitHub usa o slogan:

Onde o mundo constrói software.

E complementa:

Milhões de desenvolvedores e empresas criam, enviam e mantêm seus softwares no GitHub \(\bf -\) a maior e mais avançada plataforma de desenvolvimento do mundo.

GitHub possui as ferramentas que precisamos para construir o que desejamos (parafraseando outro slogan deles). Então:

O site minimalista do Capítulo 9 fará parte da comunidade GitHub!

1. echo "# Minimalista" >> README.md             <--(cria README.md e coloca um título no arquivo)--
2. git init                                      <--(inicializa o git em seu computador)--
3. git add README.md                             <--(aqui é melhor usar git add ponto)--
4. git commit -m "meu primeiro commit"           <--(primeito comentário de seu projeto)--
5. git branch -M main                            <--(define o branch local como sendo o branch main)--
6. git remote add origin https://github.com/...  <--(origin recebe o endereço de seu projeto no site github)
7. git push -u origin main                       <--(empurra o branch local (main) para o projeto github (origin))--

Username for...          <--(digite seu login)--
Password for...          <--(digite sua senha)--

11 Netlify

Netlify é uma plataforma completa para automatizar projetos modernos da web. Eles explicam:

Usuários podem simplesmente mandar seu código-fonte e deixar a gente tomar conta do resto.

Isso quer dizer que a única coisa que temos que fazer é conectar um projeto GitHub com o Netlify, esperar um pouco, e o projeto estará hospedado no Netlify – no ar, para todos acessarem!

No capítulo anterior, criamos o projeto Minimalista no GitHub e subimos, para dentro desse projeto, o diretório public do site gerado no Capítulo 9. Agora, vamos conectar GitHub/Minimalista com Netlify:

1. Entre em sua conta GitHib.

2. Entre no site Netlify associado com GitHib: Clicar no botão GitHub.

3. Procure a opção Create a new site.

4. Aponte para GitHub/Minimalista.

5. Procure a opção Install.

6. Deixe EM BRACO a caixa Build command.

7. Digite public na caixa Publish directory.

8. Clique no botão Deploy Site.

Os motores Netlify vão fazer a compilação, por fim, será apresentado um endereço, algo como:

https://UmNúmeroAleatório.netlify.app

Pronto: O site está hospedado no Netlify!

Agora, você pode personalizar o endereço. Para isso:

9. Clique na opção Site setting.

10. Procure por Change name: digite um nome apropriado.

Você receberá o endereço personalizado.

No meu caso, escolhi bycfisica, assim, o endereço do meu site é:

https://bycfisica.netlify.app/

Mais uma coisa útil: As vezes desejamos apagar tudo e começar do zero. Para deletar um site hospedado no Netlify, você deve procurar a opção Site setting do site que quer deletar. Depois, procurar o botão Delete this site. Será solicitado que você digite exatamente o site que quer deletar.