Empezando

He creado mi sitio web usando vuepress (opens new window), utilizando esta herramienta puedes crear facilmente sitios web estáticos utilizando markdown

Para crear el blog me apoyé en el plugin vuepress-blog (opens new window) que permite de manera sencilla agrupar el contenido markdown para generar los post.

Configurar el plugin de blog

Para configurar el blog agregamos las siguientes opciones en el arreglo plugins

plugins: [
  ...
  ['@vuepress/blog', {
    directories: [
      {
        id: 'post',
        dirname: 'posts',
        path: '/posts/',
        title: 'Posts',
        itemPermalink: '/:slug',
        pagination: {
          perPagePosts: 5,
        },
      },
    ],
    frontmatters: [
      {
        id: 'tag',
        keys: ['tags'],
        path: '/tag/',
        title: 'Etiquetas',
        scopeLayout: 'Layout',
      },
    ],
  }],
  ...
]

Luego dentro de la carpeta posts se agregan los archivos .md correspondientes a cada uno de los posts,

Agregar Frontmatter metadata a los post

Tomemos una de las publicaciones de demostración y agreguemos algunos metadatos de Frontmatter.

Los metadatos estan en la sección superior del post sepáradas por ---, como:

---
date: 2022-11-07
tag:
  - frontmatter
  - vuepress
author: ME
location: Here
---

Personalizar el tema

He personalizado un poco el tema base agregando mi propios estilos y cambiando la estructura del Layout.

Cambiar el tema

Para cambiar el tema en blog/.vuepress/styles/palette.styl

El tema contiene Stylus (opens new window) variables, puedes cambiar $accentColor a #6A82FB o agregar una nueva variable $secondaryColor y darle el valor de #FC5C7D

🎉 Ahora el tema ha cambiado

Agrega Google Analytics

Luego de subir el blog se pueden necesitar saber algunas estadisticas sobre el sitio web. Cuantas visitas tiene el sitio web, entre otras cosas.

Para tener esa funcionalidad incorporamos Google Analytics, para comenzar, creamos una cuenta en Google Analytics, luego lo vinculamos al dominio, luego puede obtener el 'Tracking ID', generalmente se compone de algunos números, con el prefijo UA- agregamos el valor a themeConfig de esta manera:

themeConfig: {
    googleAnalytics: "UA-************", // replace this value with your tracking ID
    ...

Agregar Sitemap

Sitemaps son importantes para que tu sitio web pueda ser indexados, puedes aprender mas sobre Sitemaps here (opens new window)

Generaremos automaticamente el sitemap para el sitio web, lo que hay que hacer es agregar en la configuración

themeConfig: {
    sitemap: true,
    hostname: "https://www.yourdomain.com/",
    ...

🎉 Ya tenemos el blog creado 😉