Crear un Blog con Hugo y Desplegarlo en Cloudflare Pages

6 minuto
1162 palabras
Categorías:
Technical Tutorial
Etiquetas:
#Hugo #Cloudflare #crear blog #Blog #Static Site #Deployment

Crear un Blog con Hugo y Desplegarlo en Cloudflare Pages

En este artículo, te guiaré paso a paso a través del proceso completo de construcción de un blog personal usando Hugo y desplegarlo en Cloudflare Pages. Hugo es un generador de sitios estáticos rápido y flexible, mientras que Cloudflare Pages ofrece servicios de alojamiento gratuitos con aceleración CDN global, permitiendo que tu blog esté en línea rápidamente y proporcione una buena experiencia de usuario. Ya seas un novato técnico o un desarrollador experimentado, este tutorial te ayudará a configurar rápidamente tu propio blog.

¿Por Qué Elegir Hugo y Cloudflare Pages?

Preparación

Antes de comenzar, necesitas preparar las siguientes herramientas y cuentas:

  1. Hugo: Instala la última versión de Hugo (se recomienda usar la versión extendida para más características).
  2. Git: Para el control de versiones y enviar código a GitHub.
  3. Cuenta de GitHub: Para almacenar el código fuente del blog.
  4. Cuenta de Cloudflare: Para desplegar y alojar el blog.
  5. Editor de Texto: Como VSCode, para editar archivos Markdown y archivos de configuración.

Paso 1: Instalar Hugo

Windows

  1. Instala el gestor de paquetes Chocolatey (si aún no está instalado):
    POWERSHELL 
    Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
    Haz clic para expandir y ver más
  2. Usa Chocolatey para instalar la versión extendida de Hugo:
    POWERSHELL 
    choco install hugo-extended
    Haz clic para expandir y ver más
  3. Verifica la instalación:
    POWERSHELL 
    hugo version
    Haz clic para expandir y ver más

macOS

  1. Instala usando Homebrew:
    BASH 
    brew install hugo
    Haz clic para expandir y ver más
  2. Verifica la instalación:
    BASH 
    hugo version
    Haz clic para expandir y ver más

Para más métodos de instalación, consulta la documentación oficial de Hugo.

Paso 2: Crear un Sitio Hugo

  1. Crea un nuevo sitio en la terminal:

    BASH 
    hugo new site my-blog
cd my-blog
    Haz clic para expandir y ver más

    Esto generará la estructura de directorios del sitio Hugo en la carpeta my-blog:

    PLAINTEXT 
    ├── archetypes
├── content
├── data
├── layouts
├── public
├── static
├── themes
└── hugo.toml
    Haz clic para expandir y ver más

  2. Inicializa un repositorio Git:

    BASH 
    git init
    Haz clic para expandir y ver más

  3. Agrega un archivo .gitignore para ignorar archivos generados:

    BASH 
    echo "public/" >> .gitignore
echo "resources/" >> .gitignore
    Haz clic para expandir y ver más

Paso 3: Instalar y Configurar el Tema

  1. Elige un tema de Hugo, por ejemplo, hugo-theme-stack:

    BASH 
    git submodule add https://github.com/CaiJimmy/hugo-theme-stack.git themes/hugo-theme-stack
    Haz clic para expandir y ver más

  2. Copia el archivo de configuración de ejemplo del tema a la raíz del proyecto:

    BASH 
    cp themes/hugo-theme-stack/exampleSite/config.yaml .
    Haz clic para expandir y ver más

  3. Edita config.yaml (o hugo.toml) para establecer información básica:

    YAML 
    baseURL: "https://your-domain.com/"  # Reemplaza con tu dominio
languageCode: "es"
title: "Mi Blog"
theme: "hugo-theme-stack"
DefaultContentLanguage: "es"
paginate: 5
    Haz clic para expandir y ver más

Para más configuración del tema, consulta la documentación oficial del tema.

Paso 4: Crear Tu Primera Publicación de Blog

  1. Crea una nueva publicación:

    BASH 
    hugo new posts/mi-primera-publicacion.md
    Haz clic para expandir y ver más

    Esto generará el archivo mi-primera-publicacion.md en el directorio content/posts/.

  2. Edita el contenido de la publicación y modifica el Front Matter (metadatos de la publicación):

    MARKDOWN 
    ---
title: "Mi Primera Publicación de Blog"
date: 2025-06-16T20:29:00+08:00
draft: false
---
¡Bienvenido al blog de Hugo! Esta es mi primera publicación.
    Haz clic para expandir y ver más

  3. Inicia el servidor local de Hugo para previsualizar:

    BASH 
    hugo server -D
    Haz clic para expandir y ver más

    Abre el navegador y ve a http://localhost:1313/ para ver la vista previa local del blog.

Paso 5: Enviar Código a GitHub

  1. Crea un nuevo repositorio en GitHub (como my-blog), ya sea público o privado.
  2. Envía el código local a GitHub:
    BASH 
    git add .
git commit -m "Commit inicial"
git remote add origin https://github.com/your-username/my-blog.git
git branch -M main
git push -u origin main
    Haz clic para expandir y ver más

Paso 6: Desplegar en Cloudflare Pages

  1. Inicia sesión en el Panel de Cloudflare, ve a “Workers and Pages” > “Pages” > “Create a Project”.
  2. Conecta tu cuenta de GitHub y selecciona el repositorio my-blog recién creado.
  3. Configura los ajustes de construcción:
    • Project Name: Cualquier nombre (como my-blog), asignará un subdominio como my-blog.pages.dev.
    • Production Branch: Por defecto es main.
    • Build Command: hugo --gc --minify (optimiza los archivos de salida).
    • Output Directory: public.
    • Environment Variables: Agrega HUGO_VERSION (como 0.125.4) para especificar la versión de Hugo, se recomienda usar la última versión; consulta las versiones de Hugo.
  4. Haz clic en “Save and Deploy”, Cloudflare Pages automáticamente extraerá el código, construirá y desplegará. Una vez que el despliegue esté completo, puedes acceder a tu blog a través de my-blog.pages.dev.

Paso 7: Vincular un Dominio Personalizado

  1. Asegúrate de que tu dominio esté alojado en Cloudflare (puedes comprarlo a través de Cloudflare o migrarlo desde otros registradores).
  2. En el proyecto de Cloudflare Pages, haz clic en “Custom Domain” > “Set Custom Domain”.
  3. Ingresa tu dominio (como your-domain.com), Cloudflare automáticamente agregará un registro CNAME.
  4. Espera a que la resolución DNS surta efecto (generalmente de unos pocos minutos a unas pocas horas), luego accede a tu blog usando el dominio personalizado.

Paso 8: Despliegue Automatizado

Cada vez que actualices el contenido de tu blog (como agregar nuevas publicaciones o modificar configuraciones), simplemente ejecuta los siguientes comandos para enviar el código:

BASH 
git add .
git commit -m "Actualizar contenido del blog"
git push origin main
Haz clic para expandir y ver más

Cloudflare Pages detectará automáticamente las actualizaciones en el repositorio de GitHub, reconstruirá y redeplegará, típicamente completando en 1-2 minutos.

Problemas y Soluciones

  1. Discrepancia en la Versión de Hugo: Cloudflare Pages podría tener por defecto una versión antigua de Hugo, causando fallos en la construcción. La solución es especificar la última versión en las variables de entorno (como HUGO_VERSION=0.125.4).
  2. Publicaciones No Se Muestran: Verifica si draft: false está configurado correctamente, ya que Hugo no renderiza publicaciones con draft: true por defecto.
  3. Velocidad de Acceso Lenta desde China: Asegúrate de que el dominio esté acelerado por el CDN de Cloudflare y SSL esté habilitado.

Resumen

Con Hugo y Cloudflare Pages, puedes construir rápidamente un blog personal de alto rendimiento y gratuito. Hugo proporciona gestión de contenido flexible y soporte rico de temas, mientras que el despliegue automático y la aceleración CDN global de Cloudflare Pages aseguran que la publicación y el acceso del blog sean más eficientes.

Referencias

Aviso de derechos de autor

Autor: heyjude

Enlace: https://heyjude.blog/es/posts/deploy-hugo-to-cloudflare/

Licencia: CC BY-NC-SA 4.0

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. Please attribute the source, use non-commercially, and maintain the same license.

Artículos relacionados

Comentarios

Comenzar búsqueda

Ingrese palabras clave para buscar artículos

↑↓
↵
ESC
⌘K Atajo