La carpeta la creará Quarto, pero tenemos 3 formas de hacerlo:

A) Crear la carpeta (o Qproject) desde RStudio

• En RStudio sigue la siguiente ruta de menús:

  File > New Project > New Directory > Quarto Blog

• Mejor si llamas a la carpeta: blog_prueba_00

B) Crear la carpeta desde la Terminal

• Has de ejecutar desde la Terminal:

  quarto create-project blog_prueba_00 --type website --template blog         

C) Usando un Qproject ya creado con RStudio Cloud

• Tienes que ir aquí. Se abrirá Rstudio en el navegador con un Qproject llamado blog_prueba_00.

• Has de tener cuenta en RStudio Cloud. Haz una copia permanente y trabaja sobre ella

De cualquiera de las 3 maneras acabaremos teniendo una carpeta con todo o necesario para crear un blog.

• Ir al cuadrante superior-derecha de RStudio, pinchar en la pestaña Build y pinchar en Render Website.

• De esta forma, se procesarán los archivos del Qproject y se creará el blog.

• Podremos verlo en el cuadrante inferior-derecha de RStudio, concretamente en la pestaña Viewer.

• Enseguida publicaremos el blog en Quartopub, pero antes vamos a verlo en local.

• Para ello solo tienes que pinchar en el archivo ./blog_prueba_00/_site/index.html

• Ese fichero es el que contiene la “Landing Page” o “Home” de nuestro blog.

• Como ves el blog es muy sencillo, solo tiene 2 páginas:

  • la Home Page (que consiste en un listado de posts)

  • la página About

Para publicar nuestro blog en Quartopub sólo hay que:

• teclear en la Terminal de RStudio (panel inferior-izquierda) lo siguiente:

  quarto publish quarto-pub

• Tras ejecutar lo anterior, se te pedirá que autorices en la Terminal.

• Después se abrirá el navegador, tendrás que logearte en Quarto Pub y volverás a autorizar. Además te preguntarán el nombre del blog.

• Sustituye el contenido original del fichero _quarto.yml por el contenido del siguiente chunk.

• Pon un título que te guste a tu blog (línea 5 title: "titulo-de-mi-blog")

• Pon tu usuario de Github y cuenta de Twitter (lineas 12 y 14: href:)

• Pon tu email (línea 16: href:)

project:
  type: website

website:
  title: "Mi blog (aún en pruebas)"
  navbar:
    logo: "profile.jpg"
    right:
      - text: "About me"
        href: about.qmd
      - icon: github
        href: https://github.com/<tu-usuario-github>
      - icon: twitter
        href: https://twitter.com/<tu-usuario-twitter>
      - icon: envelope
        url: "mailto:<tu-mail@uv.es>"
    left: 
      - text: "Docencia"
        href: docencia.qmd
 
format:
  html:
    theme: flatly  
    css: styles.css
    toc: true
    highlight-style: a11y

• Podríamos crear el archivo docencia.qmd con cualquier contenido, incluso podría ser un documento sin contenido, PERO, mejor si lo creas con el siguiente contenido:

---
title: "Mi docencia"
---

Mi docencia es:

## curso 2021-2022

- [Econometría](/pdfs/econometria.pdf)

## curso 2022-2023

- [Algebra](/pdfs/econometria.pdf)

• Como puedes ver, en el archivo docencia.qmd se hace referencia al archivo /pdfs/econometria.pdf. Si quieres que el link funcione, tienes que crear dentro del Qproject, la subcarpeta pdfs, y dentro de ella el archivo econometria.pdf.

• Puede ser cualquier pdf, siempre que se llame econometria.pdf

• Una vez hechas las tareas 2 y 3, puedes crear de nuevo el blog con Build > Web page.

• He cambiado la segunda linea (title:) para poner un nombre a la página con el listado de posts.

• También podemos añadir una descripción (con description:).

---
title: "Mi listado de post"
description: |
  Estoy tratando de hacer mi blog
listing:
  contents: posts
  sort: "date desc"
  type: default
  categories: true
  sort-ui: false
  filter-ui: false
page-layout: full
title-block-banner: true
---

• Antes he dicho que solo modificaríamos la linea 5, pero mejor si lo complementamos con algunas acciones más, como el tamaño de la foto y su forma, por eso he añadido 2 lineas tras template:trestles.

• Lógicamente estaría bien que sustituyeses la foto: se trata de cambiar profile.jpg, en la linea 3, por la ruta a tu foto.

• Abajo tienes el código:

---
title: Yo mismo
image: profile.jpg
about:
  template: trestles    #- {jolla, solana, ...}
  image-width: 10em     #- https://cybmeta.com/em-y-rem
  image-shape: round    #- rectangle, round, rounded
  links:
    - icon: twitter
      text: Twitter
      href: https://twitter.com
    - icon: linkedin
      text: LinkedIn
      href: https://linkedin.com
    - icon: github
      text: Github
      href: https://github.com
---
        
Hola, soy "Yo mismo". 
      
Estoy asistiendo al taller **Mi primer blog con Quarto** impartido en el [I Congreso & XII Jornadas de Usuarios de R](http://r-es.org/12jr/){target="_blank"} celebradas en Córdoba (Spain), 23-25 de noviembre de 2022.
      
En un ratito ya piloto Quarto y genero my blog!!! 🙂

• Para que blog.qmd, la página que contiene el listado de posts, se muestre en nuestra web hay que refrenciarlo/incluirlo en _quarto.yml

• Simplemente, tendríamos que modificar las lineas 8 y 9 que ahora están referenciando al fichero about.qmd. Por ejemplo podríamos dejar las lineas 8 y 9 como se ve abajo (a la derecha):

• Para hacerlo, es mejor copiar el código de abajo y pegarlo en _quarto.yml

project:
  type: website

website:
  title: "Mi blog (aún en pruebas)"
  navbar:
    logo: "profile.jpg"
    #background: "#CCCCFF"    #- {“primary”, “secondary”,  “danger”, “warning”, “light”, “dark”, or hex color} (el backgroung de la navbar)
    left: 
      - text: "Docencia"
        href: docencia.qmd
      - text: "Más cosas"
        menu:
          - text: "Docencia 2"
            href: docencia.qmd
          - text: "Docencia 3"
            href: docencia.qmd
          - text: "---"
          - text: "Docencia 4"
            href: docencia.qmd
    right:
      - text: "Mi blog"
        href: blog.qmd
      - icon: github
        href: https://github.com/<tu-usuario-github>
      - icon: twitter
        href: https://twitter.com/<tu-usuario twitter>
      - icon: envelope
        url: "mailto:<tu-mail@uv.es>"
 

format:
  html:
    #- https://quarto.org/docs/output-formats/html-themes.html
    theme: flatly  
    css: styles.css
    toc: true
    #- https://quarto.org/docs/output-formats/html-code.html#highlighting
    highlight-style: a11y

• Cambia el nombre del fichero about.qmd a index.qmd, con lo que pasará ser nuestra “landing page”.

• Como el antiguo fichero about contenía nuestra foto parece que es un buen candidato a ser nuestra “Home”

• Ahora ya tenemos fichero index.qmd, por lo que ya podemos hacer un rebuild de nuestra web y veremos la nueva estructura de nuestra web, con una foto nuestra en la “landing page”.

• Para ello: Build > Render Website en RStudio.

• Crea una nueva subcarpeta en ./posts/

• Ponle nombre, por ejemplo: “my-primer-post”

• Copia en la carpeta que hemos creado el contenido de la carpeta de uno de los 2 posts. Por ejemplo copia los 2 archivos que hay en ./posts/welcome/ y pégalos en ./posts/my-primer-post/; es decir, pegamos el archivo index.qmd y tumbnail.jpg en nuestra nueva carpeta.

• Vuelve a regenerar el blog: Build > Render Website y verás que ahora nuestro blog ya tiene tres posts.

• Modifica el contenido de /.posts/my-primer-post/index.qmd. Por ejemplo, puedes dejarlo así:

---
title: "Mi primer post con Quarto"
author: "Pedro J. Pérez"
date: "2022-10-25"
categories: [R, quarto]
image: "thumbnail.jpg"
---

Este es mi **primer post** con Quarto!!!!

```{r}
sqrt(2 + 2)
```

Voy a poner una imagen:

![](thumbnail.jpg)


Acabé con mi primer post. FIN
  

• Sustituye thumbnail.jpg por otro archivo

• La opción de yaml (linea 6): image: "thumbnail.jpg" nos permite elegir la imagen que acompañara al post en la listing page.

• Vuelve a regenerar el blog: Build > Render Website