Tutorial conciso para construir un blog Hexo desde cero (Edición 2024)

#Crear un blog

¿Estás harto de las interfaces poco estéticas de esos sitios de blogs? ¿Cansado de las interminables notificaciones web? ¿Siempre has querido crear tu propio blog, pero te detienes ante tutoriales complicados y un sinfín de códigos que te dan dolor de cabeza? ¡Entonces, felicidades! Este artículo te guiará paso a paso, de la manera más sencilla posible, para que construyas tu propio blog. Solo necesitas un poco de paciencia y seguir cada instrucción.

Hexo, como un framework de blog rápido, conciso y eficiente, es una bendición para los principiantes, y GitHub nos ahorra la molestia de alquilar y desplegar un servidor adicional. Por ello, este artículo te mostrará cómo construir un blog usando Hexo y GitHub.

En 2018, escribí un tutorial conciso para construir un blog desde cero. Debido a las actualizaciones de los plugins, algunos detalles necesitaban ser modificados, por lo que lanzo nuevamente la edición 2024 de este tutorial conciso.

Preparación

Configurar un blog estático Hexo localmente

$ npm install -g hexo-cli
$ hexo init
$ npm install

¡Así es! La parte principal de tu blog ya está lista. Veamos el resultado. Ejecuta:

$ hexo server

Ahora, abre tu navegador, escribe localhost:4000 y podrás ver cómo luce tu blog. Disfruta el momento, y luego presiona Ctrl + C para continuar con los siguientes pasos.

Personalización (inicial)

Cambiar tema

$ git clone https://github.com/theme-next/hexo-theme-next themes/next
theme: next
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini
hexo g # o hexo generate
hexo server

Configuración del sitio

# Site
title: El mundo desconocido       // Nombre del blog
subtitle:
description:  Do something cool // Una frase/firma
author: LulalaP                 // Autor
language: es                    // Idioma del sitio
timezone:

Configurar el avatar de la barra lateral

avatar: 
    url: /uploads/avatar.jpg

Mejorar las páginas del blog

Añadir menú

menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive

Crear página de categorías

$ hexo new page categories
   title: Categories
   date: 2024-04-10 23:40:31
   type: "categories"
   comments: false
 ---

Crear interfaz de nube de etiquetas

$ hexo new page "tags"
---
   title: Tags
   date: 2024-04-10 23:41:25
   type: "tags"
   comments: false
---

Crear página “Acerca de mí”

$ hexo new page "about"
   title: About
   date: 2024-04-10 23:41:56
   comments: false
---

Configurar enlaces sociales en la barra lateral

# Social links
social:
 GitHub: https://github.com/your-user-name || fab fa-github
 E-Mail: mailto:[email protected] || fa fa-envelope
 #Weibo: https://weibo.com/yourname || fab fa-weibo
 #Google: https://plus.google.com/yourname || fab fa-google
 Twitter: https://x.com/your-user-name || fab fa-twitter
social_icons:
  enable: true
  GitHub: github
  Twitter: twitter

Vincular el blog con GitHub

deploy:
  type: git
  repository: https://github.com/your-name/your-name.github.io.git
  branch: main
npm install hexo-deployer-git --save
hexo g
hexo d

En este momento, abre tu navegador y visita http://your-name.github.io. ¡Felicidades! Tu blog ya está completamente configurado.

Vincular dominio

Hasta ahora, el blog está completamente configurado y es accesible a través del dominio de GitHub. Sería aún mejor si lo vinculas con un dominio corto personalizado.

Compra de dominio

Resolución de dominio

185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

CNAME —> philo-li.github.io

Una vez configurada la resolución del dominio, ve al directorio de tu blog. Dentro de la carpeta source, crea un nuevo archivo llamado CNAME (recuerda que debe estar en mayúsculas y sin extensión). Ábrelo con un editor de texto y escribe el dominio que has comprado, por ejemplo: www.philoli.com.

hexo g
hexo d

Ahora, abre tu navegador, introduce tu dominio y presiona Enter. ¡Felicidades! Ya tienes un blog con tu propio dominio independiente.

Publicar un nuevo artículo

title Título del artículo
date Fecha de creación (fecha de creación del archivo)
updated Fecha de modificación (fecha de modificación del archivo)
comments ¿Activar comentarios? true
tags Etiquetas
categories Categorías
permalink Nombre en la URL (nombre del archivo)
hexo g
hexo d

Personalización (avanzada)

A continuación, te ofrecemos algunas configuraciones avanzadas para personalizar el estilo de tu blog. Los principiantes pueden saltarse esta sección por ahora.

Añadir RSS

$ npm install hexo-generator-feed --save
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generator-feed
rss: /atom.xml || fa fa-rss

Truncar artículos en la página de inicio

    <!--more-->

Centrar el texto citado dentro de los artículos

{% centerquote %}
Texto citado
{% endcenterquote %}

{% centerquote %} Texto citado {% endcenterquote %}

Modificar el estilo de los bloques de código

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

Establecer la fecha de creación del sitio

since: 2024

Mejorar el estilo de los enlaces en los artículos

// link style
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

Añadir una imagen de fondo al blog

body {
    background:url(/uploads/background.jpg);
    background-repeat: no-repeat;   // Si la imagen no cubre, si se repite y cómo
    background-attachment:fixed;    // Si la imagen se desplaza con el scroll
    background-size: cover;         // Cubrir
    background-position:50% 50%;    // Posición de la imagen
}

Establecer el fondo del contenido del blog como semitransparente


// Transparencia del contenido del blog
// Configuración de la transparencia del contenido del artículo
if (hexo-config('motion.transition.post_block')) {
  .post-block {
    background: rgba(255,255,255,0.9);
    opacity: 0.9;
    radius: 10px;
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 40px;
    -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
    -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }
  .pagination, .comments {
    opacity: 0;
  }

  +tablet() {
    margin: 20px;
    padding: 10px;
  }

  +mobile() {
    margin: 15px;
    padding: 15px;
  }
}


// Configuración de la transparencia de la barra lateral
.sidebar {
  opacity: 0.9;
}

// Configuración de la transparencia de la barra de menú
.header-inner {
  background: rgba(255,255,255,0.9);
}

// Configuración de la transparencia del cuadro de búsqueda (local-search)
.popup {
  opacity: 0.9;
}

Optimizar el estilo de los bloques de código en línea

// Embellecimiento de la etiqueta de código
code {
  padding: 2px 4px;
  word-wrap: break-word;
  color: #c7254e;
  background: #f9f2f4;
  border-radius: 3px;
  font-size: 18px;
}

Añadir un contador de visitantes al pie de página del sitio

# Busca la sección de etiqueta 'copyright' y añade el código dentro de ella.

<div class="copyright">
# ......Aquí ya hay algunas configuraciones.
# Añade el nuevo código aquí.
</div>

# Después de añadirlo, se verá así:
<div class="copyright">
  # ......Aquí ya hay algunas configuraciones.
  # Añade el nuevo código aquí.
  {%- if true %}
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-user-md"></i>
    </span>
    Visitors: <span id="busuanzi_value_site_uv"></span>
  {%- endif %}
</div>
hexo g
hexo s
# Confirmar que no hay problemas y publicar
hexo d

Añadir el archivo README.md al repositorio

Normalmente, cada proyecto tiene un archivo README.md. Sin embargo, cuando despliegas con Hexo a un repositorio, el archivo README.md existente en el proyecto puede ser sobrescrito. Por lo tanto, necesitas configurar el archivo de configuración para evitar esta sobrescritura.

En el directorio raíz de source dentro de tu directorio Hexo, añade un archivo README.md. Modifica el archivo de configuración del sitio _config.yml y establece el valor del parámetro skip_render a:

skip_render: README.md

Guarda y sal. La próxima vez que uses el comando hexo d para desplegar el blog, el archivo README.md no se renderizará.

Varios plugins útiles

Respaldo de archivos fuente

# Añade la dirección del repositorio del blog que configuraste anteriormente.
git remote add https://github.com/your-name/your-name.github.io.git

# Añade y guarda los cambios actuales, y registra un comentario.
git add .
git commit -m "Actualización de archivos fuente"

# Crea y cambia a una nueva rama.
git checkout -b source

# Envía todo el contenido de la rama 'source' local a la rama 'source' del repositorio remoto.
git push origin source:source

Escribir el blog desde diferentes ordenadores

npm install -g hexo-cli
# Clona el repositorio a tu máquina local.
git clone https://github.com/your-name/your-name.github.io.git

# Si ya lo tienes clonado localmente, cada vez que actualices el blog, deberás obtener el contenido más reciente de la rama.
git pull origin

# Cambia a la rama correspondiente.
git checkout source

# Después de instalar todos los plugins configurados para Hexo, puedes empezar a actualizar y editar el contenido del blog.
npm install

# Después de modificar el contenido, recuerda hacer una copia de seguridad completa a tiempo.
git add .
git commit -m "Actualización del blog xxx"
git push origin source:source

# Publica y sube el contenido más reciente del blog al sitio de tu dominio.
hexo clean
hexo g  # Genera páginas estáticas
hexo s  # Previsualiza el blog localmente
hexo d  # Publica el contenido más reciente del blog

Resumen de comandos útiles

hexo g
# o hexo generate, genera páginas web estáticas a partir de los archivos fuente.
hexo d
# o hexo deploy, publica y envía a GitHub Pages.
hexo s
# o hexo server, despliega y prueba localmente.
hexo clean
# Limpia la caché de las páginas web estáticas, y luego hexo d para regenerar.