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:
Crear el proyecto
Subir repositorio
Desplegar blog
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:
Ya tenemos nuestro blog! Ahora vamos a publicarlo.
Subir repositorio
En mi caso, subiré este repositorio local a uno remoto en Gitlab.
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 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":
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"
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.
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!
Top comments (0)