Crear tu propio blog estático con la API de Blogger
Introducción
¿Alguna vez has soñado con tener tu propio blog pero sin las complicaciones de gestionar una plataforma dinámica? ¿Te atrae la idea de un sitio web rápido, seguro y personalizable? ¡Entonces esta guía es para ti!
¿Qué es un sitio estático? Un sitio web estático es aquel cuyos contenidos son archivos HTML, CSS y JavaScript pregenerados. Esto significa que cada página es una imagen fija en el momento de su creación, lo que resulta en un sitio más rápido y seguro.
¿Qué es la API de Blogger? La API de Blogger es una interfaz de programación que permite a desarrolladores interactuar con sus blogs de Blogger de forma programática. Con ella, podemos crear, editar y eliminar publicaciones, así como obtener información sobre nuestro blog y sus contenidos.
¿Por qué combinar ambos? Al combinar la potencia de la API de Blogger con la eficiencia de los sitios estáticos, podemos crear blogs personalizados y dinámicos sin la necesidad de un servidor complejo. Esto nos permite tener un control total sobre el diseño y el contenido de nuestro blog, a la vez que aprovechamos la infraestructura de Blogger para la gestión de las publicaciones.
Proyecto de ejemplo: https://github.com/ximosa/api-blogger-html Este proyecto te proporciona una base sólida para comenzar a construir tu propio blog estático utilizando la API de Blogger. El código fuente está disponible en GitHub y te servirá como punto de partida para personalizar tu blog según tus preferencias.
Requisitos previos
Antes de comenzar, asegúrate de tener los siguientes conocimientos y herramientas:
- Conocimientos básicos de HTML, CSS y JavaScript: Estos lenguajes son fundamentales para crear y personalizar tu blog.
- Una cuenta de Blogger: Necesitarás una cuenta de Blogger para crear tu blog y obtener las credenciales de la API.
- Git: Git es un sistema de control de versiones que te permitirá clonar el repositorio del proyecto.
- Node.js y npm (o yarn): Node.js es un entorno de ejecución de JavaScript que te permitirá ejecutar el código del proyecto, y npm (o yarn) es un gestor de paquetes que te ayudará a instalar las dependencias.
Para poder utilizar la API de Blogger y conectar tu blog estático con ella, necesitarás dos elementos clave: la API Key y el Blog ID. Aquí te explico cómo obtener cada uno de ellos:
1. Obtener la API Key
La API Key es como una contraseña que le da a tu aplicación acceso a la API de Blogger. Para obtenerla, debes seguir estos pasos:
- Crear un proyecto en Google Cloud Platform:
- Ve a la consola de Google Cloud Platform (https://console.cloud.google.com/) e inicia sesión con tu cuenta de Google.
- Crea un nuevo proyecto o selecciona uno existente.
- Habilitar la API de Blogger:
- En el menú de la izquierda, busca y selecciona "APIs y servicios".
- Busca la API de Blogger y habilítala para tu proyecto.
- Crear las credenciales:
- En el menú de la izquierda, selecciona "Credenciales".
- Haz clic en "Crear credenciales" y elige "Clave de API".
- Se te mostrará una clave API. Cópiala y guárdala en un lugar seguro, ya que solo se mostrará una vez.
2. Obtener el Blog ID
El Blog ID es un identificador único para tu blog de Blogger. Puedes encontrarlo de varias maneras:
¡Absolutamente! Esa es una forma rápida y sencilla de encontrar el ID de tu blog en Blogger.
Aquí te explico cómo hacerlo paso a paso:
- Crea un nuevo borrador de publicación:
- Inicia sesión en tu cuenta de Blogger.
- Selecciona el blog para el cual quieres encontrar el ID.
- Haz clic en "Nueva publicación" para crear un nuevo borrador.
- Copia la URL del borrador:
- Una vez que hayas creado el borrador, observa la barra de direcciones de tu navegador.
- La URL del borrador tendrá un formato similar a este: https://draft.blogger.com/blog/posts/2756493429384988...
- El número largo (27564934293849...) que aparece después de "posts/" es el ID de tu blog.
- Pega el ID en un lugar seguro:
- Copia este número y pégalo en un documento de texto o en un archivo de configuración de tu proyecto. Necesitarás este ID para utilizar la API de Blogger.
Configuración del entorno
- Clona el repositorio: Abre tu terminal y ejecuta el siguiente comando para clonar el repositorio del proyecto:Bash
git clone https://github.com/ximosa/api-blogger-html.gitUsa el código con precaución. - O ves directamente a ver el codigo, ir a github
Cambia esto en los .js del proyecto
{
"apiKey": "YOUR_API_KEY",
"blogId": "YOUR_BLOG_ID"
}
¡Y listo! Ya tienes todo configurado para comenzar a personalizar y desplegar tu blog.