Crea y publica tu blog GRATIS en 10 min con Astro y Netlify
Tags: astro, netlify
Published: 2021-08-29 20:32:44

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](https://dev.to/figox)** 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](https://astro.build/).**

 

**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
```

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
```

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

![Demo localhost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o2id4rwmlz6w1215m4q.gif)


Ya tenemos nuestro blog! Ahora vamos a publicarlo.


###Subir repositorio###

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

![Gitlab repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w58z646tqqkb74aoned.jpg)

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
```

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


###Desplegar blog###

Usaré **[Netlify](https://www.netlify.com/)** 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c418bmm63rg10cc5n2z.jpg)


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í](https://docs.astro.build/es/getting-started) y leerla tranquilamente.

 

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

![Carpeta pages/posts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64q29id7cd7ohut55lyz.jpg)


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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c2vnoys4qmxp7bhpnec.jpg)


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](https://docs.astro.build/getting-started)