Crea tu blog utilizando Frontity & WordPress

Vamos a ver como crear nuestro propio blog utilizando WordPress como base de datos y herramienta para la creación del contenido, React para pintar el contenido y gestión de los componentes UI y NodeJS para hacer el renderizado desde el servidor, así mejorar el tiempo de carga y facilitar el rastreo de los buscadores.

Por suerte para nosotros, otros desarrolladores ya se han encontrado con este problema y han creado una herramienta que nos facilitará mucho el trabajo llamada frontity. Puedes echar un vistazo a la documentación oficial en docs.frontity.org.

Requisitos

  • NodeJS instalado en nuestro equipo 
  • Instalación local de WordPress, para este tutorial utilizaremos localbyflywheel.com
  • Un WordPress en remoto
  • Cuenta en zeit.co para publicar el servidor NodeJS

Empezamos 🚀

Abrimos la terminal, nos dirigimos al directorio donde crearemos nuestro proyecto y ejecutamos el comando:

npx frontity create blog-name

Dónde blog-name será el nombre del proyecto que elijas, accedemos a la carpeta y ejecutamos el comando:

npm run dev

Esto nos abrirá nuestro blog en http://localhost:3000 donde ya podemos ver nuestro blog funcionando aunque mostrando el contenido que viene por defecto en Frontity, ahora vamos a engancharlo con nuestro propio contenido.

Aspecto inicial de nuestro blog

Para ello, creamos un nuevo sitio en nuestro local by flywheel con la configuración por defecto, una vez esté funcionando copiamos la url y volvemos a nuestro proyecto de Frontity. Abrimos el archivo frontity.settings.js, buscamos la línea donde pone api y modificamos la dirección que viene inicialmente https://test.frontity.io/wp-json por la url de nuestro WordPress más /wp-json, la dirección del api rest de WordPress, algo similar a http://blog-name.local/wp-json.

Si recargamos nuestro blog, ahora vemos que la información que aparece es la de nuestro WordPress. Todo funciona perfectamente salvo nuestro menú, que está apuntando a unas páginas que no tenemos creadas en nuestro WordPress.

Modificar el menú

Frontity obtiene el contenido de nuestro WordPress, así que lo primero es crear las páginas que queremos mostrar. Para este ejemplo solo crearemos una página de “Quiénes somos”. Ahora solo tenemos que añadir el texto del enlace y la ruta en nuestro archivo de configuración frontity.settings.js

...waiting for Gist...

En este ejemplo solo hemos añadido la portada y una página de quiénes somos, pero no tenemos límite e incluso podemos añadir enlace a las categorías o tags igual que en nuestro WordPress tradicional.

Como ves las rutas son las mismas que las que utiliza nuestro WordPress, así que si, por ejemplo, queremos cambiar la url de nuestros posts para no que aparezcan las fechas, simplemente tenemos que cambiarlo desde WordPress. No tiene nada que ver Frontity en esto.

Personalizar el aspecto

Frontity viene con un tema por defecto llamado mars-theme, el cual utilizaremos como base para crear nuestro tema. El theme se encuentra dentro de la carpeta packages/mars-theme.

Entramos en la carpeta del tema, ahí encontraremos una carpeta src que contiene un archivo index.js, donde definimos y configuramos nuestro tema, y una carpeta components, donde encontraremos todas las piezas que componen nuestro tema.

Si estás familiarizado con React y JSX te resultará sencillo añadir y modificar los componentes. Una cosa a tener en cuenta, es que Frontity trae entre sus librerías emotion.sh/docs/introduction, lo que nos facilita el trabajo de CSS desde JavaScript.

Emotion

Añadir funcionalidad

A medida que vamos personalizando el aspecto de nuestro blog seguro que nos surge la necesidad de ampliar sus funcionalidades. Para ello, volvemos a nuestro index.js de la carpeta src de nuestro tema. 

En él podemos encontrar: state, donde definimos las variables globales de nuestro blog y actions, donde definimos las funciones que modificarán esas variables definidas en nuestro state.

Vamos a implementar un modo oscuro en nuestro blog, para ello lo primero es definir el estado y las funciones que modificarán este estado.

packages/mars-theme/src/index.js
...waiting for Gist...

Ahora que tenemos los ingredientes vamos a implementar nuestra nueva funcionalidad. Lo primero entramos a nuestra carpeta components dentro del tema y abrimos el index.js, ahora vamos a obtener el mode de nuestro state y para simplificar podemos agregar unos estilos al body, similar a cómo se agregan los estilos globales.

packages/mars-theme/src/components/index.js
...waiting for Gist...

Como ves, le decimos: si el modo es ‘light’ utiliza un color, si no utiliza otro. No es un diseño muy espectacular, pero nos servirá para ver el comportamiento.

Ahora vamos a crear un componente, el cual nos permitirá cambiar de modo.

packages/mars-theme/src/components/toggle.js
...waiting for Gist...

Funciona correctamente pero nos falta marcar cuál está seleccionado. Para ello vamos a recoger la información del state y, con ayuda de emotion, vamos a dar estilos a nuestro componente y modificar nuestro botones para que acepten un atributo que modificará su aspecto si está seleccionado.

packages/mars-theme/src/components/toggle.js
...waiting for Gist...

Este componente podemos incluirlo dentro de cualquier parte de nuestro blog, para este ejemplo lo vamos a incluir en el header.

packages/mars-theme/src/components/header.js
...waiting for Gist...

Añadir Disqus como sistema de comentarios

Aunque podemos utilizar los comentarios nativos de WordPress, Disqus puede traernos algunos beneficios, como por ejemplo el control del spam, la identificación de los usuarios, etc.

Antes de nada tenemos que crear una cuenta en Disqus y dar de alta un nuevo sitio. 

Lo bueno de utilizar React para pintar nuestro blog es que podemos aprovechar su rico ecosistema y utilizar componentes de otros desarrolladores que funcionan a las mil maravillas, en esta ocasión utilizaremos disqus-react, para ello instalamos el componente.

npm install disqus-react

Ahora ya podemos utilizarlo en nuestro blog, solo necesitamos importarlo y pasarle un objeto con la url, un identificador y un título, para  que Disqus sepa qué comentario tiene que mostrar en cada artículo, tienes toda la documentación del componente en github.com/disqus/disqus-react

Para obtener la información que necesitamos nos ayudamos del state que recibimos gracias a Frontitfy. Primero obtenemos la información de la url actual:

const data = state.source.get(state.router.link);

Ahora utilizando el tipo y el id que recibimos de data obtenemos nuestro post:

const post = state.source[data.type][data.id];

Ya tenemos todos los ingredientes para construir el objeto y crear nuestro componente de comentarios

...waiting for Gist...

Ahora lo importamos dentro de nuestro componente post, tenemos que tener en cuenta de de renderizarlo únicamente cuando estemos en el navegador, ya que frontity nos proporciona un server side render lo que hace que nuestro código se ejecute primero en el servidor donde no tenemos un objeto window y nos dará error Disqus.

A través de state.frontity.platform podemos saber dónde se está ejecutando nuestro código, en este caso solo queremos que se ejecute cuando este sea “cliente” y cómo solo queremos mostrarlo dentro de los post utilizamos data.isPost

{state.frontity.platform === "client" 
            && data.isPost
            && ( <Comments /> ) }

El siguiente paso sería implementarlo a través de namespaces, Frontity utiliza state, actions y libraries y todos los paquetes son utilizados desde ahí a través de un nombre específico, eso que significa que si creamos un paquete que exporte:

libraries: {
       comments: {
           Comment
       }
   }

Nosotros podemos utilizar desde nuestro post desde libraries, algo parecido a esto:

const Post = ({ state, actions, libraries }) => {
return (
   <libraries.comments.Comments />
)

¿Qué conseguimos con esto? que si en un futuro reemplazamos nuestra librería de comentarios, nuestro tema no se ve afectado.Tenéis más información sobre el uso de namespaces en la documentación oficial //docs.frontity.org/learning-frontity/namespaces y si queréis que preparé un artículo explicando este tema, dejármelo en los comentarios 😜

Publicar el blog

Hemos personalizado el aspecto de nuestro blog y le hemos añadido la funcionalidades, vamos a mostrarlo al mundo. Para ello tenemos que tener un WordPress con el contenido en remoto, recordemos que estábamos trabajando en local con local by flywheel. Aquí tenemos dos opciones, instalar y configurar un WordPress en cualquier hosting o utilizar wordpress.com. Cualquiera de las dos opciones son perfectamente válidas.

Cuando tengamos montado nuestro WordPress en remoto, actualizaremos el archivo de configuración frontity.settings.js reemplazando la url local por la nueva ubicación.

...waiting for Gist...

Si volvemos a poner en marcha nuestro blog con npm run dev deberíamos ver el contenido del nuevo WordPress, si es así, ahora nos toca publicar nuestro proyecto en un NodeJS. 

Para ello utilizaremos now y seguiremos los pasos que indican en: docs.frontity.org/installation-and-deploy/deploy-on-now

Creamos un archivo llamado now.json en la carpeta raíz del proyecto con el siguiente contenido.

...waiting for Gist...

Creamos una cuenta en now zeit.co/signup y nos identificamos a través de la terminal, utilizando:

npx now login

Ahora para publicar nuestro blog simplemente tenemos que ejecutar el siguiente comando

npx now

Y ya está! 🎉🎉🎉 tenemos nuestro blog publicado al mundo.