¿Se podrá crear un blog de nuestra propia autoría sin usar servicios ya construidos como Jekyll o WordPress? Es lo que me preguntaba antes de empezar este proceso, porque muchas veces estos servicios son complicados de configurar y en algunos casos no te brindan la flexibilidad para todo lo que necesitas. Por esto me vino la idea de crear un blog usando ReactJS para construir una aplicación web que se encargue de cargar y mostrar los posts ya escritos, como te voy a enseñar en este post. ¡Comencemos!
Como desarrollador siempre busco separar los datos de la vista, entonces decidí tener dos sitios: el primero con GitHub Pagesque se encargara de guardar y servir los posts que hallan para el blog y el segundo alojado usando Surge.sh que se encargara de mostrar la página web. 
GitHub permite crear páginas estáticas; para este proyecto lo usé para guardar los posts de una manera organizada y por el hecho de que permite modificar tus posts directamente en su interfaz web. Esta página es guardada en un rama llamada **gh-pages **en nuestro repositorio. Por ejemplo, puedes ver la rama de mi blog en: https://github.com/alexsotocx/alexsotocx.co/tree/gh-pages. 
El punto de entrada de la página es un archivo **JSON **(Notación de Objetos de JavaScript)que contiene los posts que están disponibles para mostrar, y para cada post una información específica que se utilizará para mostrar y unir las páginas. Veamos un ejemplo del archivo JSON:
<pre class=“EnlighterJSRAW”>{
“posts”: [
{
“title”: “Ruby starting guide”,
“folder”: “ruby-guide”,
“cover_image”: “ruby.png”,
“author”: {
“name”: “Alexander Soto Cardona”,
“email”: “[email protected]”
},
“tags”: [“ruby”, “syntax”, “guide”],
“description”: “Ruby starting syntax, basic commands to make your ruby programs run”,
“date”: “2016-04-01”
}
]
}
</pre>
Pasemos a explicar que es cada dato:
Surge es un servicio que te permite cargar páginas estáticas a servidores y ellos se encargan de servir los archivos usando un CDN (Content Delivery Network). Con Surge ejecutas el comando surge y tendrás disponible un sitio en Internet. Te permite además usar la API de HTML5 para hacer el enrutamiento desde el cliente. Para más detalles puedes consultar este post (en inglés). 
Para el blog, Surge tendrá una aplicación web que funciona con **ReactJS **para añadir todo la reactividad a nuestra página, **React Router **para enrutar desde el cliente, Markdown-it para convertir los posts que están escritos en markdown a HTML y **Superagent **para realizar las peticiones.
Para comenzar necesitaremos una versión de Node.js actualizada. Cuando realicé este experimento utilicé la versión de node 4.2.3. Instala la versión que desees usando NVM.
Para crear la estructura de carpetas, la configuración inicial y poder comenzar con la creación del código recomiendo usar Yeoman. Este estructura toda la aplicación tomando como base el generador que escojamos. Para instalarlo utilizamos NPM:
<pre class=“EnlighterJSRAW”>npm install -g yo</pre>
Luego de instalar Yeoman, procedemos a instalar el generador y crear nuestro proyecto:
<pre class=“EnlighterJSRAW”>npm install -g generator-react-webpack
mkdir blog && cd blog
yo react-webpack</pre>
Cuando finalice la configuración de nuestro proyecto procedemos a instalar las dependencias (React Router, Markdown-it y Superagent) que necesitamos para que el blog funcione de la manera que hemos mencionado. Para esto procedemos a ejecutar los siguientes comandos:
<pre class=“EnlighterJSRAW”>npm install
npm install --save react-router
npm install --save markdown-it
npm install --save superagent</pre>
Para crear el enrutador utilizaremos React Router;este nos permite crear las rutas para la aplicación utilizando un componente llamado **Route. **Este componente tiene dos propiedades, **path **y component que se va a mostrar en esa ruta. En el blog necesitamos tres rutas:
<pre class=“EnlighterJSRAW”>//Archivo src/components/App.js
import { Router, Route, browserHistory, IndexRedirect } from ‘react-router’;
import React from ‘react’;
import Main from ‘./Template/Template’; //Solo el template
import BlogIndex from './Blog/BlogIndex’
import Post from ‘./Blog/Post’
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<router history="{browserHistory}">{//The browser history is the HTML5 API to client routing}</router>
);
}
}
export default App;</pre>
El anterior archivo es la entrada de nuestro programa.
El index es la página inicial de nuestro blog. Esta página ayudará a los usuarios a encontrar el post que quieren leer. Cuando un usuario llega a la ruta “/blog”, React Router se encarga de montar el componente **BlogIndex. ** Al montar el componente, este ejecuta una acción que se encarga de lanzar una petición a GitHubPages para cargar el archivo post.json.Con la información que brinda este archivo, podemos pintar y conectar nuestro index con cada post. Nota: Este código es representativo: aunque funciona, no es la manera correcta de realizar esto. Para realizar el intercambio de información se recomienda usar Redux.
<pre class=“EnlighterJSRAW”>import React from ‘react’;
import PostSummary from ‘./PostSummary’;
import request from ‘superagent’;
let config = require(‘config’).default; //Guarda toda la información de configuración como rutas y variables
class BlogIndex extends React.Component {
constructor(props) {
super(props);
this.state = {
posts: [],
loading: true
}
}
//Pedido a Githubpages
componentWillMount() {
request
.get(config.blogPostsPath)
.set(‘Accept’, ‘application/json’)
.end((err, res) => {
let loading = false, posts = [];
if(!err) {
posts = res.body.posts;
}
this.setState({
loading: loading,
posts: posts
});
})
}
render() {
if(this.state.loading) {
return null;
} else {
return (
<div>
{this.state.posts.map((post, index) => <postsummary post="{post}" key="{index}/">)}</postsummary> </div>
);
}
}
}
export default BlogIndex</pre>
En el anterior código hay otro componente llamado **PostSummary **que se encarga de pintar el resumen del post y conectar la entrada con el post.
<pre class=“EnlighterJSRAW”>import React from ‘react’;
import {Link} from ‘react-router’;
let config = require(‘config’).default;
export default class PostSummary extends React.Component {
constructor(props) {
super(props);
}
render() {
let post = this.props.post;
return (
<article classname=“post”>
<link to="{/blog/${post.folder}}" classname=“full-container-link”>
<section classname=“details”>
{post.title}
{post.description}
<section classname=“tags”>
{post.tags.map((tag, index) => {tag})}
</section>
<section classname=“author”>
{post.author.email}
</section>
{post.date}
</section>
</article>
);
}
}</pre>
La parte más importante se encuentra en la conexión entre este componente y el componente de visualización. Veamos como se realizó:
<pre class=“EnlighterJSRAW”><link to="{/blog/${post.folder}}" classname=“full-container-link”></pre>
Este componente se encarga de manejar la ruta "/blog/:post_name".** L**a principal acción de este es cargar el post en formato **Markdown **y transformarlo en **HTML **para su respectiva visualización.
<pre class=“EnlighterJSRAW”>import React from ‘react’;
import request from ‘superagent’;
import {Link} from ‘react-router’;
import markdown from ‘utilities/markdownWrapper’;
let config = require(‘config’).default;
class Post extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
post: null
}
}
componentDidMount() {
request
.get(${config.blogPostPath}${this.props.params.post_name}/post.md)
.end((err, res) => {
var post = ‘# Error\n’;
if(!err) {
post = res.text;
}
this.setState({
loading: false,
post: post
});
})
}
render() {
if(this.state.loading) {
return <link to="/blog">Go back;
} else {
return (
<div classname=“Entry”>
<link to="/blog" classname=“static-link”> _Go back
<article classname=“PostContent” dangerouslysetinnerhtml="{{_html:" markdown(this.state.post)}}=""></article> </div>
_);
}
}
}
export default Post;_</pre>
_## ¿Cómo publicar una nueva entrada?
Puedes mirar todo el código completo y funcional en mi repositorio de GitHub. Espero que pueda inspirarte: en este ejemplo hemos creado un blog desde cero, pero también puedes usar el mismo proceso para desarrollar otras ideas que desees concretar. Si quieres profundizar este tema, no te pierdas el curso profesional de React.JS en Platzi:
[maxbutton id=“3” url=“https://platzi.com/cursos/reactjs/?utm_source=blog&utm_medium=cta_curso&utm_campaign=blog-react-github”]_
