La guía rápida para comenzar con Ghost
Probablemente hayas oído hablar de Ghost, la nueva plataforma de blogs que ha arrasado en el mundo de los blogs; es simple, elegante, sexy; tiene esa cosa de vista previa en vivo. ¿Que es no gustar?
Me estoy mudando a Fantasma, como muchos diseñadores web, con experiencia en WordPress. Pero antes de que realmente lograra envolver mi cabeza WordPress‘, había probado docenas, posiblemente cientos, de opciones de CMS. Algunos de los más memorables incluyen ExpressionEngine, Patrón de texto, el desafortunado FrogCMS, un antiguo guión llamado CuteNews, y muchos más.
Durante mucho tiempo, WordPress me proporcionó todo lo que necesitaba: potentes funciones de plantilla; un suministro interminable de complementos; solo viendo lo que podía hacer.
Pero WordPress ha sido mucho más que un motor de blogs desde hace algún tiempo. Se está moviendo constantemente hacia el ámbito del marco de alguna manera. Un marco de publicación, por así decirlo.
He llegado al punto en el que quiero software que bloguee, y eso es todo. Quiero escribir mis publicaciones en Reducción, escriba algunas palabras clave, agregue una imagen o dos y presione publicar, luego olvídese de todo.
Entra fantasma
Resulta que no estoy solo en mi deseo de una plataforma de blogs muy simple. Los creadores detrás de Ghost han hecho todo lo posible para eliminar todo el cruft que hemos agregado al proceso de blogs y construir una plataforma de publicación simple y rápida que hará el trabajo. Es una bestia completamente diferente.
Funciona con la filosofía de que un CMS para blogs debe hacer una cosa y hacerlo bien. No verá ninguna revista lanzada en esta plataforma sin mucha personalización. Es un blog, y convertirlo en cualquier otra cosa frustraría su propósito.
Luego, está el hecho de que se basa en nuevas tecnologías. Ghost se basa en Node.js, que ejecuta código JavaScript en el servidor en lugar de en el navegador. Es amado por las mismas personas que aman el alojamiento PaaS, y todos estos nuevos sistemas que personas como yo están luchando por entender. En cierto sentido, ha sido preparado para el futuro desde el principio. Es parte de la primera generación de una nueva generación de CMS.
Eso sí, desde la perspectiva del blogger, es solo una interfaz simple para bloguear. Desde la perspectiva del usuario final, nada ha cambiado realmente, excepto quizás el tema del blog predeterminado parece un poco «plano». Pero bajo el capó, estamos viendo algo totalmente nuevo, y eso es algo bueno.
Instalación de Ghost (la forma más fácil)
https://www.youtube.com/watch?v=7cwqLW0ALLM
Instalando Ghost de la manera más fácil.
Por lo general, tendría que instalar uno o dos componentes por separado para instalar Ghost y ejecutarlo en una máquina local. Tendría que instalar Node.js, y luego tendría que entrar y comenzar a instalar algunos paquetes adicionales de Node manualmente desde la línea de comandos.
Así es, la configuración típica de Ghost requiere el uso de la línea de comandos. Para las personas más acostumbradas al proceso de “configuración de cinco minutos” de WordPress con bases de datos MySQL y un instalador gráfico, esto puede resultar incómodo.
Podría ser un dolor de cabeza si no está acostumbrado a usar la línea de comandos en una máquina Mac o Linux.
Afortunadamente, la gente amable de Bitnami hizo instaladores gráficos para Windows, Mac y Linux.
Estos son todos los pasos que deberá seguir:
- Descargue el instalador apropiado para su sistema operativo aquí: https://bitnami.com/stack/ghost/installer
- Cuando ejecute el instalador, proporcione la siguiente información: dónde desea instalarlo, qué información de inicio de sesión desea usar para el blog y qué dirección IP desea usar para las pruebas. (Recomiendo 127.0.0.1.)
- Ejecuta la cosa y comienza a jugar. Viene con un panel de control genial y una entrada en el menú de inicio.
Dado que el instalador le proporciona todos los componentes que necesitará, como Node.js y un miniservidor, el directorio de archivos no es exactamente sencillo.
Deberá abrir la carpeta en la que instaló Ghost y luego navegar a aplicaciones / fantasma / htdocs /. Esa es la instalación real de Ghost.
Los temas se encuentran en aplicaciones / fantasma / htdocs / content / themes /.
Haciendo un tema para Ghost
Los temas fantasma son bastante fáciles de hacer, siempre que conozca HTML y CSS. El conocimiento de programación es útil, pero no estrictamente necesario. El sistema de plantillas de Ghost es simple, e incluso bastante intuitivo, si ha creado temas para WordP… ejem, otros CMS antes.
Sé que sé. La comparación con WordPress es antigua. Pero ese pequeño software ha dominado el mercado durante años, al igual que Photoshop lo ha hecho para las imágenes, las comparaciones son inevitables. En este caso, incluso son útiles.
Las personas que han creado temas de WordPress encontrarán que parte de la estructura de archivos y el lenguaje de plantillas les resultan familiares, aunque mucho más simples. Las funciones PHP de WordPress le brindan mucha flexibilidad; pero también complican el proceso de codificación de temas.
Sistema de plantillas de Ghost (construido con Bigote daliniano), es semántico, potente y mucho más legible que las funciones PHP sin procesar con las que estamos acostumbrados a trabajar. Personalmente, lo encuentro mucho más fácil de usar.
Por otro lado, es destinado exclusivamente a la creación de blogs. No construirás un sitio de noticias / red social / foro híbrido con esto. Más simple, pero limitado. Esa es la compensación inherente a toda la plataforma.
https://www.youtube.com/watch?v=b5Li6mZTBV4
Creando un tema básico para Ghost.
Configurando tu tema
Ahora, si ha visto el video (realmente debería), sabrá los conceptos básicos. Tendrás tu instalación de Ghost en modo de desarrollo, y tendrás una muy, muy tema limitado para trabajar.
En resumen, técnicamente solo necesitas tres archivos para crear un tema de Fantasma:
index.hbs (This template will list your posts) post.hbs (This will display a single post) package.json (This contains theme information)
Sin embargo, hay otras plantillas básicas que probablemente quieras incluir. Por supuesto, puede crear plantillas personalizadas para páginas, publicaciones, autores, etiquetas y más. Llegaremos a todo eso con el tiempo.
Por ahora, quiero centrarme solo en lo básico: estructura del tema, extensión de archivos de plantilla y dónde colocar todo el HTML. Esto significa agregar algunos archivos y carpetas adicionales a nuestro tema Fantasma. Echemos un vistazo a la estructura revisada:
default.hbs index.hbs page.hbs post.hbs package.json assets/ css/ images/ javascript/ partials/ (Just examples, here. Not required.) navigation.hbs loop.hbs
default.hbs actuará como la base de su tema. Tu ,
page.hbs es exactamente lo que crees que es, la plantilla para páginas estáticas. La carpeta de activos se explica por sí misma.
La parciales / La carpeta es donde guardaría fragmentos de código que usa más de una vez, en varias plantillas. Por ejemplo, navigation.hbs podría incluir el nombre / logotipo de su sitio y la navegación principal. loop.hbs podría generar una lista de publicaciones con HTML genérico y estilo. Esto podría usarse en varios lugares del sitio.
Mezcla de manillares y HTML
Así que vamos a mostrarte exactamente lo simple que puede ser la creación de plantillas. Primero, configuraremos nuestro default.hbs expediente:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> {{! Here we see the functions for page titles and descriptions. }} <title>{{meta_title}}</title> <meta name="description" content="{{meta_description}}" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> {{! Anything in the assets/ folder can be easily linked to, like so: }} <link rel="stylesheet" type="text/css" href="https://www.webdesignerdepot.com/2015/08/the-quick-guide-to-getting-started-with-ghost/{{asset"css/style.css"}}" /> {{! This function here outputs meta keywords, some styling information, stuff like that. }} {{ghost_head}} </head> <body class="{{body_class}}"> <div class="wrap"> {{! Any .hbs file in the partials folder can be called in like this. }} {{> header}} {{! This is where the content of all the sub-templates will be output. }} {{{body}}} {{! Like ghost_head, this outputs scripts, data, that sort of thing. Currently adds a link to jQuery by default. }} {{ghost_foot}} </div> </body> </html>
Ahora creemos el navigation.hbs plantilla, porque estará en todas las páginas:
<header id="page-header"> {{! This should be fairly self-explanatory. }} <h1>{{@blog.title}}</h1> <nav> <ul> {{! This function calls in the navigation links, which can be managed in the Ghost admin panel. Note that the template *must* be called "navigation.hbs" for this to work. }} {{#foreach navigation}} <li class="nav-{{slug}}{{#if current}} nav-current{{/if}}" role="presentation"><a href="https://www.webdesignerdepot.com/2015/08/the-quick-guide-to-getting-started-with-ghost/{{url absolute="true"}}">{{label}}</a></li> {{/foreach}} </ul> </nav> </header>
Ahora creamos el ciclo para mostrar extractos de las publicaciones. Para ser honesto, arranqué este (casi) directamente del tema predeterminado, porque el marcado es perfecto para lo que tengo en mente. Pon todo esto en parciales / loop.hbs:
{{! Each post excerpt will be displayed with this same markup. }} {{#foreach posts}} <article class="excerpt {{post_class}}"> <header> <h2 class="post-title"><a href="https://www.webdesignerdepot.com/2015/08/the-quick-guide-to-getting-started-with-ghost/{{url}}">{{{title}}}</a></h2> </header> <section> {{! The actual excerpt. Not the variable that allows you to call in exactly as many words as you want. }} <p>{{excerpt words="26"}} <a class="read-more" href="https://www.webdesignerdepot.com/2015/08/the-quick-guide-to-getting-started-with-ghost/{{url}}">»</a></p> </section> <footer> {{! This is the post's meta information. }} {{author}} {{tags prefix=" on "}} <time class="post-date" datetime="{{date format="YYYY-MM-DD"}}">{{date format="DD MMMM YYYY"}}</time> </footer> </article> {{/foreach}} {{! Links to the next and previous pages of links. You can define how many links are on each page in the admin panel. }} {{pagination}}
Ahora vamos a unirlo todo con el index.hbs template, que también actuará como página de inicio, a menos que especifique lo contrario. El código para esto, viendo cómo hemos dividido y organizado la mayor parte del HTML en otros lugares, es muy simple:
{{!< default}} {{! That isn't a comment up there. It tells Ghost that everything on this page must be rendered inside the default.hbs template.}} <section class="posts"> {{! This next function can be used to call in anything in the partials/ folder. In this case, we're calling up everything we just put into "loop.hbs". }} {{> loop}} </section>
Conclusión
Y eso es. ¡Te dije que era simple!
Si tiene problemas, consulte el tema predeterminado de Ghost y el documentación. Juega con el HTML, juega con el sistema de plantillas y comienza a diseñar tu tema.
La próxima vez, profundizaremos un poco más. Mientras tanto, ¡diviértete!
Usos de imágenes destacadas Imagen fantasma a través de Shutterstock.
