Aprende como crear un blog desde cero

Un blog puede ser una buena manera de dar a conocer opiniones o conicimientos sobre algún tema, y más si es que te gusta escribir. Fue por esto que decidí empezar en la creación de mi propio blog. Y sin embargo se me presentaron varias preguntas sobre el como podría o debería hacerlo.

¡Aqui puedes ver todo lo que aprendí haciendo mi propio blog.!

El inicio de la idea

Al principio no tenia un rumbo claro, pero por aburrimiento empeze a navegar a traves del internet y me tope con algunos diseños de varios blogs de ejemplo de distintos temas. Ahi fue que la idea empezo a surgir y entre más diseños miraba más quería intentar crear mi blog propio.

Fue entonces que empeze a investigar como debería empezar para crear uno propio topandome con paginas como blogger o wordpress, que me ofrecian la posibilidad de crearlo en base a plantillas pre-diseñadas.

Ambos eran buenas opciones si no tuviera conocimientos en programación y si quisiera algo rapido. Pero yo quería algo propio, entonces pense en utilizar un framework de ReactJS llamado NextJS.

¿Qué es NextJS?

NextJS es un framework que hace Server Side Rendering, es decir, renderizar el contenido HTML desde el lado del servidor, que utiliza ReactJS.

Descubri que este framework tiene la posibilidad de renderizar archivos Markdown que es un lenguaje de marcado ligero y gracias a esto es posible parsearlo y transformarlo a HTML legible por el navegador.

Con esto tenia la posibilidad de empezar a crear el blog, sin embargo, me faltaba algo muy importante que era el diseño del mismo.

Comenzando a diseñar

Cabe aclarar que no soy un experto diseñador, pero tengo nociones. Lo primero que hice fue inspirarme de otros blogs existentes o de ejemplo. Necesitaba ver que era lo que los hacia atractivos y que podria utilizar para el mio.

Una vez tenia diseños de referencia utilice la herramienta Figma para hacer el prototipo del diseño de la Web.

Ejemplo de uso de la herramienta de Figma

Una vez acabado el diseño tenía todo lo necesario para comenzar con el desarrollo del Blog.

Comenzando el proyecto en NextJS

Para poder utilizar NextJS necesitamos tener instalado node para poder ejecutar JavaScript desde el servidor.

En la documentación de NextJS nos provee un CLI para poder crear un proyecto facilmente

npx create-next-app@latest

No entrare en detalles sobre como funciona NextJS o como trabajar con el. Todo lo relacionado a su funcionamiento o uso pueden encontrarlo en su documentación

Sistema de entradas del blog

Como dije anteriormente utilize archivos Markdown para representar el contenido de la entrada.

Sin embargo, me tope como problema inicial el como pasar un archivo Markdown a HTML. Por lo que despues de investigar y leer documentaciones me encontre con herramientas que facilitaban esta función como remark

Y utilizando un pequeño script logre obtener todos los posts del blog de manera sencilla.

const pathname = path.join(process.cwd(),'blog-posts')
const posts = fs.readdirSync(pathname)

Con esto le decía que los archivos Markdown se encuentran en la carpeta blog-posts y que leyera todo el contenido de esa carpeta.

Para despues parsear todo el contenido y transformarlo de Markdown a un HTML legible por el navegador.

const postsData = await Promise.all(posts.map(async (post)=>{
    const postPath = path.join(pathname,post)
    const slug = post.replaceAll('.md','')
    const content = fs.readFileSync(postPath,{encoding:'utf8'})
    const matterResult = matter(content);
    const processedContent = await remark()
        .use(html)
        .process(matterResult.content);
    const contentHtml = processedContent.toString();
    const readTime = getReadTime(contentHtml.split(" ").length)

    return {
        content,
        slug,
        metadata:matterResult.data,
        contentHml:contentHtml,
        readTime,
        creationDate: matterResult.data.creationTime
    }
}))

El codigo puede ser complicado de entender, pero gracias a esto puedo renderizar todo el contendido del archivo y transformarlo a HTML.

Estilando el Markdown

Cuando el contenido del Markdown es renderizado no tiene ningun estilo, es decir, solo se ve de color negro con un tipo de letra por defecto.

Por lo que utilice un poco de CSS para darle un poco más de vida

Quedando como resultado todo lo que pueden apreciar al leer la entrada.

---

Como podemos ver empezar un blog no es tan complicado en estos dias, por que existen muchas herramientas gratis que te facilitan la creación del mismo.

Pero yo me complique un poco más la vida para hacerlo por mi cuenta.

¿Y tu de que harías tu blog?