Convertir el blog en web personal

(3ª parte del taller Mi primer blog con Quarto)

Autor
Afiliación
Pedro J. Pérez

Universitat de València

Fecha de Publicación

24 de noviembre de 2022

  • Tutorial preparado para el taller Mi primer blog con Quarto impartido en Córdoba (Spain) durante el I Congreso & XII Jornadas de Usuarios de R, 23-25 de noviembre de 2022.

  • El taller está pensado para realizar con R. Se utilizará el IDE RStudio y Quarto. Se recomienda tener instaladas versiones recientes de los 3 programas

  • Este tutorial es sólo una parte del taller. El taller completo está aquí.

  • En esta tercera parte del taller vamos a “convertir” nuestro blog en una web personal.

  • Las anteriores secciones del taller son

    1. Intro: se presenta el taller

    2. Creación de un blog (básico) con Quarto: vimos como crear y alojar un blog básico con RStudio y Quarto.

    3. Tuneado básico del blog. Modificamos ligeramente los ficheros _quarto.yml, index.qmd, about.qmd y styles.css.


¿Qué haremos en este tutorial?

  • Convertir nuestro blog en una web personal.

  • Haremos que la “landing page” o Home de nuestra web no sea una página con el listado de posts, sino que sea una página en la que se reciba a los futuros visitantes de nuestra web

  • Para ello solo tendremos que cambiar el nombre de dos ficheros y referenciar uno de ellos en _quarto.yml.

1 Intro

Vamos a transformar nuestro blog en una página web personal con blog. Lo único que tendremos que hacer será que la “landing page” o Home de nuestra web no sea una página con el listado de posts, si no que sea una página en la que se reciba a los futuros visitantes de nuestra web: lo normal es presentarnos y darles la bienvenida.


2 Proceso

Tarea 3.1

Tarea 3.1: Renombrar el archivo index.qmd

  • Cambia el nombre del fichero index.qmd a blog.qmd

  • Ahora este archivo no está referenciado en _quarto.yml, por lo que no se mostraría si hacemos un rebuild1.


Tarea 3.2

Tarea 3.2: Incluir blog.qmd en la web

  • 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
  • Aún no podemos refrescar la web porque ahora no tenemos archivo index.qmd.

:::


Tarea 3.3

Tarea 3.3: Renombrar el archivo about.qmd

  • 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”


Tarea 3.4

Tarea 3.4: Hacemos un rebuild de la web

  • 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.


3 Resumen

  • En esta tercera parte del taller hemos visto como hacer que nuestro blog se convierta en una página personal con un blog.

  • Sólo había que intercambiar 2 ficheros: que about.qmd pasase a ser nuestra landing page.


  • En los siguientes tutoriales veremos en profundidad las posibilidades que nos ofrece Quarto para escribir nuestros posts.

Notas

  1. Además, como nuestro Qproject ahora no tiene fichero index.qmd el rebuild no funcionaría↩︎

Reutilizar

https://creativecommons.org/licenses/by/4.0/deed.es