Share
Normalmente, cuando nos proponemos crear un nuevo blog, hay que considerar un cierto grado de complejidad. ¿Qué tipo de base de datos necesitarás? ¿Necesitará PHP, Node.js, mySQL? ¿Cómo administrará la seguridad de sus bases de datos y áreas de administración? ¿Cuál será su programa de mantenimiento para actualizaciones de plugins y temas??
Si todo lo que necesita es un blog simple, este tipo de complejidad puede ser excesivo. Sin embargo, con CMS.js, puede ponerlo todo a un lado y tener un blog simple, completamente del lado del cliente, sin ninguna de las preocupaciones mencionadas anteriormente. Y puedes configurarlo en minutos..
En este tutorial, comenzaremos con un vistazo rápido a lo que es CMS.js, luego aprenderá exactamente cómo completar su proceso de configuración rápida. Una vez que tenga un sitio en funcionamiento, veremos cómo agregar e implementar contenido. Vamos a empezar!
CMS.js es un generador de sitios muy ligero escrito en JavaScript. Fuera de la caja solo tiene 94Kb, con solo dieciséis archivos. En comparación, WordPress tiene alrededor de 24Mb y más de 1,400 archivos..
Está diseñado en "el espíritu de Jekyll", lo que básicamente significa que puede escribir publicaciones y páginas como archivos Markdown de texto sin formato y procesarlos automáticamente y enviarlos a formato de blog..
Al igual que Jekyll, con CMS.js puede tener su sitio alojado (gratis) en GitHub Pages. Con esta opción, CMS.js usará la API de GitHub para obtener dinámicamente los archivos de Markdown de su repositorio y servirlos como publicaciones y páginas. Esto se conoce como "Modo GitHub", y es el primero de los dos modos disponibles en CMS.js.
Por cierto, si te gusta el sonido de este modo pero no estás familiarizado con Github, no te preocupes. Le mostraremos cómo usarlo de tal manera que se sienta cómodo incluso si nunca ha tocado git en su vida. Alternativamente, si prefiere su propio alojamiento, puede ir con "Modo servidor" en lugar de.
Este modo es posiblemente el más simple, así que veamos cómo usar ese primero..
Lo primero que debes hacer es descargar CMS.js. Diríjase a https://github.com/cdmedia/cms.js y haga clic en el verde Clonar o descargar botón hacia la parte superior derecha, luego elija Descargar ZIP.
Nota: con este proceso vamos a asumir que no quieres usar GitHub en absoluto, aparte de descargar CMS.js, por lo que solo estamos agarrando un ZIP en lugar de clonar el repositorio. Sin embargo, si prefiere clonar el repositorio con sus propios métodos, puede hacerlo..
De lo contrario, una vez que haya descargado el ZIP, extráigalo y debería ver estos contenidos:
Ahora vaya a la carpeta "js" y abra el archivo "config.js" para editar. Encuentra el modo configuración, (en la línea 52 en la versión actual), y cambiarlo de 'Github' a 'Servidor'.
También verás la configuración del nombre de tu sitio, el lema del sitio, la dirección de correo electrónico del sitio y el nombre del autor del sitio, por lo que es un buen momento para cambiarlos..
Si ya conoce los elementos que desea que aparezcan en su menú de navegación, puede editar el SiteNavItems configurando ahora también.
El valor establecido contra el nombre La propiedad determinará la etiqueta que aparece en el elemento del menú. los href La propiedad le permite especificar la URL a la que desea que se vincule el elemento de navegación. los nueva ventana la propiedad determina si el enlace se abrirá en una nueva ventana cuando se haga clic.
Si desea enlazar a una página interna deje ambos href y nueva ventana propiedades fuera y simplemente usar el nombre propiedad con su valor establecido en la página en el título de la pregunta (más información sobre cómo funcionan los títulos de la página más adelante). Esto establecerá automáticamente el enlace permanente del elemento de navegación con el formato #página/
Si una página interna a la que desea enlazar usa espacios en su título, como "Acerca de mí", use espacios en el espacio correspondiente. nombre propiedad también, por ejemplo. nombre: 'Sobre mi'
Para ver su sitio cuando está en "modo servidor", deberá transferirlo a un servidor que use Apache o NGINX. Si lo desea, puede subirlo directamente a su alojamiento web a través de su cliente FTP preferido, pero generalmente es preferible trabajar en las cosas sin conexión primero y cargarlas cuando haya terminado. Como tal, recomiendo usar un programa para crear un servidor fuera de línea y trabajar dentro de él.
Para este tutorial usaremos MAMP, que está disponible para Mac y Windows, pero si ya usas y prefieres otra opción como XAMPP, es igualmente adecuada.
En la carpeta "htdocs" de su instalación de MAMP, cree una nueva carpeta llamada "cms_js", (o lo que prefiera), para alojar su sitio CMS.js sin conexión:
Copie todos sus archivos CMS.js en esta carpeta:
Y eso es todo, su sitio está en funcionamiento y listo para funcionar!
Para verlo, diríjase a la URL sin conexión de su sitio, (como lo proporciona MAMP), por ejemplo. http: // localhost: 8888 / cms_js
Con el "modo GitHub" puede tener su sitio CMS.js alojado de forma gratuita en las páginas de GitHub, y puede administrar su sitio a través de un repositorio de GitHub que almacena su contenido.
Con GitHub Pages puedes tener un número ilimitado de sitios gratuitos; un sitio "principal" por cuenta y luego uno por proyecto / repositorio. Sin embargo, tenga en cuenta que las cuentas gratuitas de GitHub se utilizan normalmente para proyectos de código abierto y de uso compartido, por lo que sus repositorios (incluidos aquellos con sitios asociados) no son privados..
Nota: Si aún no tiene una cuenta de GitHub, regístrese en: https://github.com/join
Para mantener las cosas lo más sencillo posible, usaremos GitHub Desktop para este proceso. Si no tienes GitHub Desktop, adelante, consíguelo aquí: https://desktop.github.com/
Si está familiarizado con la línea de comandos para git y le gustaría usar eso, en su lugar funcionará igual de bien, pero tenga en cuenta que el tutorial no cubrirá los comandos para usar en cada etapa..
Diríjase al repositorio CMS.js y haga clic en Tenedor Icono hacia la parte superior derecha. Esto creará un nuevo repositorio en su cuenta con todos los archivos CMS.js copiados en él..
Cuando utilice GitHub Pages, la URL de su sitio se basará en el nombre de su repo, es decir,. http: //
Entrar en el Ajustes pestaña, llene un nuevo nombre en el Nombre del repositorio campo luego haga clic Rebautizar.
Volver a la Código ficha y haga clic en el verde Clonar o descargar botón, como hicimos durante la configuración del modo servidor. Pero esta vez, elige Abrir en escritorio en lugar.
GitHub Desktop se abrirá y se le pedirá que seleccione la ubicación que desea clonar. Esta será la carpeta en la que trabajará sin conexión para administrar su sitio, así que elija una ubicación adecuada y luego haga clic en Clon. Todos los archivos CMS.js se desplegarán en su ubicación específica, listos para usar.
Accentsconagua
páginas gh RamaLo siguiente que necesitarás es un páginas gh bifurque en su repositorio clonado, porque esta es la rama de la cual la API de GitHub obtendrá contenido y, por lo tanto, es en la que necesita trabajar en su sitio. páginas gh rama que está usando para su propia página de proyecto, así que tendremos que eliminar esa primera.
Cambiar de la rama maestra a la páginas gh rama.
Ve a la Rama menú y seleccione Eliminar 'páginas gh', luego confirme haciendo clic Borrar en el cuadro de diálogo que aparece.
Ahora eres libre de crear tu propio páginas gh rama. Haga clic en el botón del icono de la pequeña rama, escriba "gh-pages" en la Nombre campo luego haga clic Crear rama.
Una vez hecho esto, haga clic en Publicar abotone en la parte superior derecha para obtener en línea su nueva rama de páginas gh.
Ahora tienes tu propio páginas gh ramifique, dentro de su propio clon de CMS.js, y estará listo para comenzar.
En el Finder o en el Explorador de Windows, vaya a la carpeta en la que clonó.
Propina: haga clic derecho en el nombre del repositorio en la columna de la izquierda y elija Abrir en el buscador o Abrir en Explorer.
A partir de aquí, deberá seguir el mismo paso que seguiría si utiliza el "Modo de servidor", que es editar sus ajustes de configuración. Vaya a la carpeta "js" y abra "config.js" para editar.
El "modo" ya estará configurado en 'Github' de manera predeterminada, por lo que no tendrá que editar esa configuración. Sin embargo, tendrá que editar githubUserSettings, (en la línea 55 en la versión actual).
Establezca el primer valor en su nombre de usuario de GitHub y el segundo en el nombre del repositorio que acaba de crear (enlazado).
Como hicimos con "Modo servidor", también debe editar el nombre de su sitio, el lema del sitio, la dirección de correo electrónico del sitio, la configuración del nombre del autor del sitio..
Si desea configurar sus elementos de navegación ahora, consulte la sección "Editar elementos de navegación (opcional)" anteriormente en este tutorial..
Ahora vuelve a GitHub Desktop y deberías ver un botón leyendo 1 cambio no comprometido. Esto se debe a que GitHub Desktop ha detectado sus modificaciones del archivo "config.js". Si presiona el botón en cuestión y mira el cuerpo del código a continuación, lo verá resaltando en verde los cambios que ha realizado..
Revise sus cambios rápidamente y, una vez que esté satisfecho, complete el pequeño formulario que se encuentra en la parte inferior izquierda con una descripción básica de los cambios que está realizando..
Entonces haga clic Comprometerse con las páginas gh. Cuando haya terminado, haga clic en Sincronizar botón arriba en la parte superior derecha, (donde Publicar el botón estaba antes), para que los cambios que acaba de confirmar se carguen en su repositorio.
Puede verificar que los cambios en su archivo de configuración se hayan cargado exitosamente yendo a la página web de su repo páginas gh bifurca y mira si tu mensaje de confirmación ha aparecido allí:
Ahora su sitio está listo para ver! Tu URL tomará el formato http: //
Ve a la URL de tu sitio y échale un vistazo!
Ahora que su sitio CMS.js está en funcionamiento, puede comenzar a agregarle contenido en forma de páginas y publicaciones. Ambos se agregan al crear archivos de Markdown (.md) dentro de las carpetas de "páginas" y "publicaciones" de su sitio, respectivamente.
Vale la pena tener en cuenta que si desea utilizar HTML en línea, para tareas como agregar video a publicaciones, debe cambiar la configuración de Markdown para su sitio. Al final del archivo "config.js" encontrará esta configuración:
Cambio desinfectar desde cierto a falso para permitir HTML en línea. Si no cambia esta configuración, cualquier HTML en línea se mostrará como texto sin formato en lugar de representarse.
Para agregar una publicación, cree un archivo de Markdown (.md) en la carpeta de "publicaciones" y asígnele un nombre que combine la fecha y el título de esta manera: YYYY-MM-DD_post-title.md. Asegúrese de que la fecha y el título estén separados por un guión bajo.
Por ejemplo, "2016-08-06_five-minute-blog-setup.md".
En la parte superior del archivo, deberá agregar un poco de contenido al frente, especificando el título de la publicación, y luego debajo de ese tipo escriba el contenido de su publicación, por ejemplo,.
--- título: este es un título de ejemplo --- y el contenido de la publicación comienza aquí.
Si desea migrar desde un sitio Jekyll, copie todas sus publicaciones desde su carpeta "_posts" en la carpeta "publicaciones" de su sitio CMS.js. Si sus publicaciones tienen imágenes en ellas, asegúrese de traer la carpeta que las contiene también.
Nota: asegúrese de que la extensión de archivo de sus publicaciones sea ".md" no ".markdown".
Para agregar una página, cree un archivo de Markdown (.md) en la carpeta "páginas". No necesita una fecha en el nombre de un archivo de página, sin embargo, el nombre del archivo debe coincidir con el título utilizado en la parte frontal de la página. También debe haber guiones en el nombre del archivo correspondiente a los espacios en el título de la página.
Por ejemplo, un archivo de página llamado "about-me.md" debería tener este asunto importante:
--- Título: Acerca de mí --- Y el contenido de la página comienza aquí..
Para resumir lo que mencionamos anteriormente, si desea enlazar a una página del menú de navegación de su sitio, nombre propiedad utilizada en su archivo de configuración SiteNavItems El objeto debe coincidir con el título de dicha página, con espacios incluidos:
// Elementos de navegación siteNavItems: [name: 'About Me'],
Si está migrando desde un sitio Jekyll, puede copiar todos sus páginas desde su carpeta raíz a la carpeta de "páginas" de su sitio CMS.js. Dele a cada uno un vistazo rápido para asegurarse de que el título coincida con el nombre del archivo como se describe anteriormente, y que la extensión del archivo sea ".md" no ".markdown".
Poner su nuevo contenido en línea en modo servidor es solo una cuestión de cargar los archivos recién agregados a su host a través de su cliente FTP preferido.
Nota: parece que actualizar el contenido existente cuando en "Modo servidor" puede ser un poco complicado en este momento, ya que las ediciones no aparecen en el contenido o hacen que el contenido desaparezca por completo. Si está trabajando en "Modo servidor", en este momento lo mejor es preparar sus archivos de publicación en otro lugar y luego transferirlos a su carpeta de "publicaciones" cuando esté seguro de que están finalizados..
Obtener contenido nuevo en línea es en realidad un poco más fácil de administrar en el "Modo GitHub" porque no tendrá que realizar un seguimiento manual de los archivos que agregó o modificó. En su lugar, solo puede ir a GitHub Desktop y detectará automáticamente cualquier archivo agregado o modificado.
Desde allí, siga el mismo proceso que hizo cuando editó su archivo de configuración..
Nota: el nuevo contenido debería aparecer de inmediato, pero después de editar el contenido existente, es posible que deba esperar un poco antes de ver los cambios en su sitio en vivo..
Dado que CMS.js tiene el sabor de Jekyll, encontrará que muchos temas de Jekyll encajarán bastante bien en un sitio de CMS.js. Como tal, es posible convertir parcialmente un tema Jekyll para usar en su sitio. Jekyll tiene funciones que CMS.js no tiene, por lo que no podrá realizar todas las funciones de algunos temas de Jekyll, pero sí podrá aportar una buena cantidad de apariencia..
Completar este proceso tomará cierta familiaridad con HTML, CSS y JavaScript, por lo que si se siente cómodo con estos tres idiomas, pruebe convertir un tema. Ir a través de los pasos exactos de la conversión está más allá del alcance de este tutorial, pero el proceso básico es:
En este ejemplo, he convertido el tema "Astro" para Jekyll y lo apliqué a este sitio CMS.js:
¡Y eso es todo lo que se necesita para configurar un blog de CMS.js! Si no necesita campanas y silbidos y solo quiere una manera directa de obtener un blog en línea, este método lo lleva a la práctica rápidamente..
Muchas gracias a Chris Diana, el creador de CMS.js, por crear esta gran herramienta y compartirla libremente..
Echa un vistazo a CMS.js por ti mismo y dale una vuelta; Podrías encontrarte una nueva plataforma de blogs favorita.!
