Crea un Blog con JAMstack Usando Netlify y GitHub

por
Tiempo de lectura: 3 minutos
JavaScript - Pexels

Introducción: ¿Por qué JAMstack?

JAMstack (JavaScript, APIs, Markup) es una arquitectura moderna que ofrece sitios web rápidos y seguros. Al usar este enfoque, separas la lógica del backend de la presentación y puedes desplegar tu sitio en servicios como Netlify en cuestión de minutos. En este tutorial, te guiaremos para crear un blog basado en JAMstack, alojado en Netlify, y con GitHub para la gestión del código.

Paso 1: Configura tu entorno

Antes de comenzar, asegúrate de tener lo siguiente:

  1. Git instalado. Puedes descargarlo aquí.
  2. Node.js y npm instalados. Descárgalo desde aquí.
  3. Una cuenta en GitHub (si no tienes una, regístrate en GitHub).
  4. Una cuenta en Netlify. Ve a Netlify y regístrate (puedes iniciar sesión con GitHub).

Paso 2: Crear el proyecto en local

Usaremos un generador de sitios estáticos llamado Hugo (aunque podrías optar por Gatsby o Jekyll, Hugo es uno de los más rápidos).

1. Instalar Hugo

Para instalar Hugo, ejecuta el siguiente comando en la terminal:

npm install -g hugo-cli

2. Crear un nuevo proyecto

Después de instalar Hugo, puedes crear tu nuevo sitio web con:

hugo new site mi-blog-jamstack

Esto creará una estructura básica para tu sitio. Navega hasta el directorio de tu proyecto:

cd mi-blog-jamstack

Paso 3: Añadir un tema

Los temas en Hugo permiten personalizar fácilmente el diseño de tu sitio. Vamos a usar un tema llamado Ananke.

1. Clona el tema en la carpeta themes:

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

2. Configura tu archivo config.toml

Edita el archivo config.toml para incluir la referencia al tema:

baseURL = "https://tusitio.netlify.app/"
languageCode = "en-us"
title = "Mi Blog JAMstack"
theme = "ananke"

Guarda los cambios.

Paso 4: Crea tu primer post

Hugo te permite crear nuevos posts rápidamente. Para crear un nuevo artículo de blog, ejecuta el siguiente comando:

hugo new posts/mi-primer-post.md

Esto generará un archivo Markdown en la carpeta content/posts. Abre ese archivo con tu editor de texto y edita el contenido:

---
title: "Mi Primer Post"
date: 2024-09-25
---

¡Hola mundo! Este es mi primer post en mi blog creado con JAMstack, Hugo y Netlify.

Guarda los cambios.

Paso 5: Prueba el sitio localmente

Antes de desplegar el sitio, prueba que todo funcione correctamente. Hugo tiene un servidor de desarrollo integrado que puedes usar para ver el sitio localmente:

hugo server

Visita http://localhost:1313 en tu navegador y verás tu sitio en acción.

Paso 6: Sube el código a GitHub

Para alojar el sitio en Netlify, primero necesitamos subirlo a GitHub.

1. Inicializa Git:

git init
git add .
git commit -m "Initial commit"

2. Crea un repositorio en GitHub:

Ve a GitHub y crea un nuevo repositorio llamado mi-blog-jamstack. Luego, enlaza tu proyecto local con ese repositorio:

git remote add origin https://github.com/tu-usuario/mi-blog-jamstack.git
git push -u origin master

Paso 7: Despliega tu sitio en Netlify

Ahora que tu código está en GitHub, vamos a desplegarlo en Netlify.

1. Conecta GitHub con Netlify

  • Ve a Netlify y accede a tu cuenta.
  • Haz clic en el botón New site from Git.
  • Selecciona GitHub como proveedor de repositorio y conecta tu cuenta.
  • Elige el repositorio mi-blog-jamstack.

2. Configura los ajustes de despliegue

En la sección de configuración:

  • Build Command: hugo
  • Publish Directory: public

Haz clic en Deploy Site.

Netlify comenzará a compilar y desplegar tu sitio. Una vez que termine, te proporcionará una URL pública donde puedes ver tu blog en vivo.

Paso 8: Añadir funcionalidad dinámica con Netlify CMS

Si deseas agregar un CMS sin complicaciones, puedes integrar Netlify CMS en tu sitio para gestionar el contenido sin tocar el código.

1. Instala Netlify CMS

Crea una carpeta llamada admin en la carpeta static de tu proyecto, y dentro de esa carpeta, crea un archivo config.yml con el siguiente contenido:

backend:
  name: git-gateway
  branch: master

media_folder: "static/images"
public_folder: "/images"

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/posts"
    create: true
    slug: "{{slug}}"
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

2. Activa Identity y Git Gateway en Netlify

  • En tu panel de Netlify, ve a Settings > Identity y activa el servicio.
  • Luego, habilita Git Gateway para poder autenticarte y publicar entradas desde el CMS.

Paso 9: ¡Listo!

Ahora tienes un blog totalmente funcional, con la capacidad de gestionar el contenido a través de un CMS, y alojado en Netlify de manera gratuita y escalable. Todo basado en JAMstack, lo que garantiza un rendimiento rápido y una excelente experiencia para los usuarios.

Post Views: 1

Deja un comentario