Ghost, la nueva plataforma de Blogging. Que es y como exportar tu blog Wordpress a un Droplet de DigitalOcean

Ghost.org es una nueva plataforma de Blogging creada por John Onolan quien ha estado construyendo blogs en Wordpress desde ya hace mucho tiempo. Su filosofía es convertir Ghost en una simple pero poderosa plataforma de Blogging sin la necesidad de la complejidad de Wordpress.

Hay que tener en cuenta de que Ghost ya está disponible para el público en general pero aún está en completo desarrollo. Eso quiere decir que su instalación (en ciertos casos) no es tan simple como pueda ser con Wordpress u otras plataformas.

Cuando empecé a escribir este blog me decidí a usar Wordpress como plataforma de Blogging ya que era la más fácil e intuitiva que encontré. Ya han pasado un par de años y la verdad es que el viaje ha valido la pena pero siempre me ha fastidiado un aspecto, el PHP.

Ghost está basado en nodejs por lo que todo sería en javascript, he aquí el porque me he decidido cambiarme. Ahora siento que controlo mi blog y más o menos se lo que estoy haciendo. Esta sería mi primera entrada usando Ghost 0_o

Empecemos explicando en que consiste Ghost.

Ghost se basa en escribir, por lo que Ghost no es para tí si:

  1. tu vida depende de plugins.
  2. quieres crear una web completa.
  3. no eres neofito con las tecnologías
  4. quieres un producto acabado
  5. ....

Como digo, esta plataforma es tan nueva que muchas de las características que va a tener aún no están disponibles pero demosles tiempo!!

Dashbord

El dashbord aún no estaría disponible pero será una pasada. En el podrás ver toda la información más destacada de tu blog. El tráfico de tu blog, el contenido más visitado, las estadísticas de las redes sociales... Lo podrás configurar a tu antojo con widgets de "Drag and Drop".

Dashbord

Maneja tus posts como nunca

Es una pasada, con Wordpress manejar tus entradas esta bien pero no ves el contenido de estas. Nunca mais, Ghost usa "vista partida" tal y como lo hacen todos los clientes de mail. Ahora será tan fácil como tener el título del post en un lado y el contenido de este al otro.

Que mejor que una imagen para el deleite,

post views

Escribe tus entradas a tiempo real

Aquí ya las cosas se ponene serias y más que interesantes. Se acabaron los botones para insertar objetos en tus posts, ahora todo se hará con markdown, un lenguaje para el "markup" que se basa en la simplicidad.

editor

Ahora podríamos pensar: aprender otro lenguaje? si, pero tampoco es tan complicado, consiste en escribir menos y de una manera más limpia y leible para obtener el mismo resultado. Os dejo unos ejemplos:

Headers, con tan solo escribir una almohadilla:

  • h1: # Header 1
  • h2: ## Header 2
  • h3: ### Header 3
  • h4: #### Header 4
  • h5: ##### Header 5
  • h6: ###### Header 6

Paragrafos, tan solo hay que escribir y ya está, los diferenciaremos dejando un espacio en blanco entre ellos.

Listas, para crear listas omitiremos si queremos <ul> o <ol> y nos centramos en especificar los <li>:

  • ul: cada <li> será *
  • ol: cada <li> será 1. , 2. ...

Links, [Título](URL)

Negrita, cursiva y quotes(comillas) es tan fácil como:

  • Bold: **texto**
  • Italic: *texto*
  • Quotes: >

Imágenes, escribiendo esto en tu entrada ![]() aparecerá:

Cosas a tener en cuenta:

  • Las opciones de configuración serán las necesarias para que tengas un blog, no te esperes interminables listas de settings.
  • Ghost no tendrá un sistema nativo de comentarios, en vez tendrás que usar plataformas basadas en comentarios como podrían ser Disqus. Los creadores creen que deben centrar sus esfuerzos en otros aspectos.
  • No habrán muchos plugins, los creadores de Ghost van a poner muchas de las funcionalidades que tiene wordpress en forma de plugins (SEO,Google Analytics,Contacto,Backup) en el mismo "core" de Ghost.
  • El frontend está escrito en JavaScript.
  • Podrás hacer uso de npm "Node Package Module"para procesar el server-side.
  • Ghost usa SQLite3 como base de datos, más adelante está planeado agregar soporte para no-SQL.
  • Ghost usa Handlebars.js como javascript templating.

Como está organizado el sistema de ficheros

Ghost tiene un tamaño de 1.4 MB que es casi nada en comparación con Joomla, Drupal o WordPress que tienen un tamaño entre 3.5 y 8.5 MB.

Vistazo sobre Ghost. Como verás la mayoría son archivos js:

La base de datos la contramos en content/data/ghost.db

Y toda la estructura del front-end se encuentra en la carpeta del "Theme" que por defecto Ghost viene instalado con el tema "Casper", como verás los archivos son extensión .hbs en referencia a Handlebars.js.

Ya no puedo esperar más!! Como lo instalo.

Para poder usar Ghost antes que nada debes de darte de alta en Ghost.org para poderte descargar la aplicación.

Ghost está basado en Node.js y requiere la versión 0.10.*

Por el momento, Ghost.org no alberga blogs por lo que la instalación será o de manera local o en algún "hosting" especializado.

Como instalar Ghost en Mac de manera local

Como instalar Ghost en Windows de manera local

Como instalar Ghost en Linux de manera local

Tendrás que perderle el miedo al terminal ya que muchas de las configuraciones se tienen que hacer a través del CLI (Command Line Interface)

Voy a explicar como he migrado de mi antiguo Wordpress a Ghost ya que después de haberlo probado de manera local ni me lo he pensado dos veces.

Docuentación Getting Ghost Live

Para poder usar Ghost en un servidor necesitarás que este te permita instalar Node.js. Eso significa que tendrás que usar el "cloud", VPS o un hosting en el que puedas instalar paquetes a través de SSH.

Link sobre Hostings especializados para Ghost

Por el momento olvídate del cPanel que poseen los servidores que hospedan webs PHP.

Ya hay algunas compañías de Hosting que ofrecen la instalación con tan solo unos clicks:

En mi caso me he decidido por DigitalOcean ya que ofrece un plan bastante potente y asequible por 5$ al mes.

Tendremos que tener en cuenta de que DigitalOcean no ofrece la posibilidad de registrar nombres de dominio por lo que para hacer que nuestro blog sea accesible desde internet tendremos que cambiar la configuración DNS de nuestro proveedor actual por la de DigitalOcean y en DigitalOcean especificar el nombre dominio.

Ya tenemos Hosting, next step

A ver, yo los pasos que he seguido han sido los siguientes:

  1. Instalar Ghost plugin en Wordpress.
  2. Crear cuenta Disqus y descargar posts_wordpress.json
  3. Darme de alta en DigitalOcean y crear un Droplet para albergar Ghost (proceso de 4 clicks).
  4. Donde tienes hospedado tu blog cambiar las DNS de tu nombre de dominio para que apunten a DigitalOcean dns1.redcoruna.com --> dns1.digitalocean.com.
  5. En el panel de control DNS de Digitalocean registrar el nombre de dominio para que apunte a la IP del Droplet que acabamos de configurar.
  6. Hacer cierto Setup para que el servidor nginx que posee Ghost sirva las páginas en el nombre de dominio.
  7. Escribir un post.

Ahora trabajaremos con Wordpress, tenemos que instalarnos el plugin para exportar Ghost. Una vez instalado el plugin veremos que tan solo se exportaran las entradas de nuestro blog.

Como ya he comentado para trasladar los comentarios que tenemos deberemos usar herramientas de terceros como Disqus.com, nos creamos una cuenta y seguimos los pasos para exportar nuestros comentarios de Wordpress a Disqus, más tarde los exportaremos a Ghost.

Por el momento Ghost solo tiene la capacidad de enviar emails con la renovación de passwords por si te olvidas de él, más adelante podrás crear emails de subscripción. Pero por ahora tienes que depender de plataformas de email como Mailgun, Gmail o Amamazon SES.

Configurar mail en Ghost

Tampoco es tan complicado hacer funcionar el mail, todo se configura en el archivo config.js, por ejemplo con Gmail sería:

mail: { transport: 'SMTP', options: { service: 'Gmail', auth: { user: 'youremail@gmail.com', pass: 'yourpassword' } } }

Situémonos!!

Ya tenemos descargado en nuestro Mac el archivo de los posts, hemos creado la cuenta de Disqus, nos hemos dado de alta en DigitalOcean y hemos pagado el hosting.

Ahora creamos el Droplet que albergará nuestro blog, el proceso es bien simple. Ponemos el nombre que queramos que tenga el Droplet, no hace falta poner la extensión del dominio y escogemos el plan que queramos.

Ahora escogemos la localización que más cerca esté de nosotros, tienes las opciones de USA o Amsterdam. En la parte de "Linux Distributions" escoge Ubuntu 12.04 y en "Aplications" escogemos Ghost. Le damos a "create" y veremos como DigitalOcean te crea el Droplet. Según su web el Droplet es creado en 60sec, es cierto pero no siempre.

Una vez creado el Droplet recibirás un email con los datos SSH para que puedas configurar y acceder a tu droplet.

A partir de este momento si en el navegador escribes la dirección IP que has recibido podrás ver que Ghost ya funciona!!!!

Hazlo bajo tu propia responsabilidad, piensa que cuando cambies la DNS perderás la posibilidad de entrar en el área de administración de WordPress y la posibilidad de conectarte vía FTP.

Ahora vayamos a cambiar la DNS. Tenemos que ir a la web donde tengamos nuestro dominio registrado y buscar las opciones para cambiar el DNS.

En mi caso, mi hosting es RedCoruna por lo que los cambios quedarían de esta manera: dns1.redcoruna.com --> dns1.digitalocean.com Piensa que los cambios pueden tardar algunas horas en hacerse efectivos!!

Ahora en el panel de control de DigitalOcean vamos a la pestaña del DNS y le damos a "Add Domain", aquí especificamos el nombre de dominio, la IP del Droplet y que Droplet queremos relacionar con esa IP.

Perfecto!!! Ahora las siguientes configuraciones las vamos a hacer en el Droplet. Que nos queda:

  • Modificar el archivo del servidor nginx /etc/nginx/conf.d/default.conf
  • Escribir ciertas reglas de redirección en el servidor nginx para evitar el error 404 Not Found
  • Modificar el archivo de configuración de ghost /var/www/ghost/config.js
  • Añadir los posts
  • Añadir los comentarios
  • Añadir Google Analytics

Para acceder a estos archivos debemos de usar alguno de estos métodos, vía terminal, con FileZilla o con Sublime Text.

La manera más sencilla sería con FileZilla, nos abrimos la App y configuramos un servidor SFTP con los datos que hemos recibido de DigitalOcean.

Configurar servidor nginx

Al estar logeados navegamos hasta la ruta: /etc/nginx/conf.d/ donde debemos de modificar el archivo default.conf para añadir el nombre de dominio y las reglas para redirigir el contenido.

No lo he explicado pero por el momento Ghost solo acepta una URL del tipo byverdu.es/nombre_post por lo que si en Wordpress usabas otro tipo de URL como por ejemplo byverdu.es/2013/08/nombre_post verás que en Google todas tus entradas dan error 404, para solucionarlo escribiremos una regla 301 redirect en el archivo default.conf.

En mi caso he tenido que hacer un registro por cada entrada ya que no he sabido como hacer una regla general.

El archivo tendría un aspecto como este:

server {
    listen 80;                                                  server_name byverdu.es;  // cambiar dominio
    rewrite ^/2012/08/convertir-divisas-con-mac(.*)$ http://byverdu.es/convertir-divisas-con-mac/ redirect;

    client_max_body_size 10M;
                                                             location / {                                                             
            proxy_pass http://localhost:2368/;                               
            proxy_set_header Host $host;                                     
            proxy_buffering off; 
           }           
  }
  
Para que los cambios que hemos hecho en nginx tengan efecto debemos de reiniciar el servidor con uno de estos comandos: nginx -t && nginx -s reload o sudo service nginx restart

Por el momento lo que no he conseguido es redirigir mi dominio en el formato www.byverdu.es a byverdu.es

Configurar Ghost
Ahora vamos a modificar archivos de Ghost para que por fin nuestro blog sea visible con la URL.

Navegar hasta la ruta: /var/www/ghost para modificar el archivo config.js, veremos que el archivo tiene como cuatro partes diferenciadas:
  1. development
  2. production
  3. testing
  4. travis
Debemos de cambiar la URL de parte de "production" para que salga reflejada la URL de nuestro dominio.
    // ### Production
    // When running Ghost in the wild, use the production environment
    // Configure your URL and mail settings here
    production: {
        url: 'http://byverdu.es',
        mail: {},
        database: {
            client: 'sqlite3',
            connection: {
                filename: path.join(__dirname, '/content/data/ghost.db')
            },
            debug: false
        }
    }

Ahora tenemos que guardar el archivo y reinicar Ghost con el comando:
sudo service ghost restart

Ya tendríamos que ser capaces de introducir el nombre de dominio en la barra del navegador y ver que nuestro dominio ya apunta a Ghost. Si no es así tal vez el cambio de la DNS no se haya hecho efectivo!!!

Subir los posts de Wordpress

Para subir los posts que teníamos en Wordpress es tan sencillo como ir a la ruta siguiente http://nombre_dominio/ghost/debug/ donde veremos esta pantalla:

Tan solo hay que escoger el archivo que nos hemos descargado desde el plugin de wordpress e importar.

Agregar comentarios

En el forum de Ghost he visto deferentes opciones pero la que a mí me ha servido habría sido esta.

Tenemos que ir hasta la ruta /var/www/ghost/content/themes/casper abrir el archivo posts.hbs.

Buscamos esta parte en el código:

   
     {{/post}}

</article>

Ahora introducimos este código entre {{/post}} y </article>, tan solo tenemos que cambiar el disqus_shortname por nuestro nombre de usuario.


<div id="disqus_thread"> </div>


<script type="text/javascript">
var disqus_shortname = 'example'; // Cambiar example por tu nombre usuario de Disqus

/* * * NO EDITAR A PARTIR DE AQUÍ * * */
(function() {
    var dsq = document.createElement('script'); 
        dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>

<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus. </a> </noscript>

<a href="http://disqus.com" class="dsq-brlink"> comments powered by <span class="logo-disqus">Disqus</span></a>

Ahora tenemos que guardar el archivo y reinicar Ghost con el comando:
sudo service ghost restart

Agregar Google Analytics

Tenemos que ir a la ruta /var/www/ghost/content/themes/casper abrir el archivo defaults.hbs. y buscar este código

<body class="{{body_class}}">

<!-- Google analytics -->



<!-- Fin analytics -->

    {{! Everything else gets inserted here }}
    {{{body}}}

Ahora tenemos que guardar el archivo y reinicar Ghost con el comando:
sudo service ghost restart

Otras temas que te podrían interesar

Como podre utilizar sitemap.xml en Ghost.

Opción 1 Opción 2

Y el mejor recurso de todos para poder configurar y sacarte de dudas sobre Ghost es : https://ghost.org/forum/

Ghost/wiki/Planned-Features

Como podrás ver hay mucho que hacer pero para mí esta es una gran alternativa a Wordpress, se que hay muchas cosas inacabadas pero promete bastante.

Ahora más o menos se como puedo ir modificando los archivos y crear el blog a mi antojo. Por ejemplo añadir los iconos de Fontawessome es tan solo cuestión de navegar por el archivo screen.css y hacer 3 modificaciones.

Creo que le invertiré bastante tiempo!!!

Espero que os sirva de ayuda.

comments powered by Disqus