DEV Community 👩‍💻👨‍💻

Angel Taborda
Angel Taborda

Posted on

Crea y publica tu blog GRATIS en 10 min con Astro y Netlify

Sin duda, la mejor manera de documentar lo que hacemos y aprendemos es mediante un Blog. Puede parecer tedioso el tener que redactar un artículo, pero es una valiosa herramienta de respaldo y consolidación de nuestros conocimientos.

Si alguna vez te ha pasado por la mente empezar tu propio blog, hazlo!. No solo ayudarás a otros sino también a ti mismo.

Al tener que pensar y estructurar tus ideas para plasmarlas en un artículo, llegarás a entender mejor lo que quieres explicar y tendrás una base de conocimientos propia a la cual acudir cuando lo necesites.

Plataformas para hospedar tu blog hay muchas!, yo por ejemplo uso DEV.to para el mío. Pero si eres desarrollador, lo más común es que quieras picártelo tu mismo 🤣 y en este artículo te mostraré cómo hacerlo con Astro.

Astro es una herramienta para construir sitios web estáticos usando tu framework de JavaScript favorito (React, Vue, Svelte, etc.) pero enviando al navegador sólo HTML y tu código JavaScript solo cuando sea necesario. Esto hará que tu sitio sea increíblemente rápido!. 🚀 Te recomiendo que lo mires con más detalle en su sitio web.

En lo que nos centraremos ahora es en crear y desplegar nuestro blog siguiendo unos pocos pasos:

  1. Crear el proyecto

  2. Subir repositorio

  3. Desplegar blog

  4. Publicar nuevo artículo

Y qué mejor manera de hacerlo que usando al chico nuevo del barrio (Astro). Así que vamos manos a la obra:

Crear el proyecto

Lo primero que vamos a hacer es crear la carpeta del proyecto, yo la llamaré my-astro-blog. Luego inicializaremos el proyecto usando la plantilla Blog.

mkdir my-astro-blog
cd my-astro-blog
npm init astro
❯  Blog
Enter fullscreen mode Exit fullscreen mode

Luego instalaremos las dependencias, inicializaremos el repositorio de git y por último lanzaremos el proyecto para ver qué tenemos como resultado.

npm install 
git init && git add -A && git commit -m "Initial commit" 
npm start
Enter fullscreen mode Exit fullscreen mode

Al navegar a http://localhost:3000/ deberíamos ver algo como esto:

Demo localhost

Ya tenemos nuestro blog! Ahora vamos a publicarlo.

Subir repositorio

En mi caso, subiré este repositorio local a uno remoto en Gitlab.

Gitlab repo

Para subirlo simplemente tengo que hacer lo siguiente desde la terminal:

git remote add origin git@gitlab.com:io-digital-repos/my-astro-blog.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

Ahora que ya tengo mi proyecto en Gitlab, lo publicare usando Netlify.

Desplegar blog

Usaré Netlify para hospedar mi blog, así que tengo que irme a "Sites => New Site from Git", seguir los pasos en el wizard y esperar que termine la compilación.

Cuando termine se generará una URL con la que podemos acceder a nuestro nuevo blog, en mi caso la URL que auto-generó fue esta: https://awesome-varahamihira-a33564.netlify.app

NOTA: para asociar tu propio dominio simplemente debes ir a la sección "Domain" del sitio y seguir los pasos indicados.

Publicar nuevo artículo

Lo que nos falta es ver cómo publicamos nuevos post en nuestro blog. Para ello vamos a abrir nuestro proyecto de Astro con nuestro editor de código favorito, en mi caso es Visual Studio Code.

Como vemos nuestro proyecto contiene archivos .astro, los cuales no son reconocidos por VSC. Pero no pasa nada, esto lo solucionamos buscando la extensión "Astro":

Extensión Astro

Una vez instalada todo se verá mejor 😋 pero no quiero entrar en los detalles de la programación con Astro, puedes encontrar toda la documentación aquí y leerla tranquilamente.

Ahora mismo centraremos la atención en la carpeta "pages/posts"

Carpeta pages/posts

En esa carpeta es donde crearemos los nuevos artículos de nuestro blog usando Markdown 👍 un formato muy conocido y querido por muchos 😃

Crearé una nueva entrada llamada hello-world.md y subiré los cambios a mi repositorio.

Hello World MD

Esto disparará automáticamente la compilación en Netlify y si accedo nuevamente a la URL de mi blog, podré ver mi nuevo post publicado, recién salido del horno. 🥖

¿Y ahora qué?

Ahora solo es cuestión de personalizar tu blog para darle tu estilo personal y de crear tus propios artículos.

¡A por ello!

Fuentes

Getting Started 🚀 Astro Documentation

Top comments (0)

🌚 Life is too short to browse without dark mode