Cómo crear un blog estático usando cactus [OS X]

Actualizar: La aplicación Cactus ha sido descontinuada.

Si no necesita un CMS y prefiere simplemente obtener un sitio o blog estático, entonces Jekyll es una buena herramienta para correr el riesgo. Sin embargo, si prefiere una herramienta con una GUI, en lugar de trabajar con herramientas de línea de comandos, es posible que desee revisar Cactus.

Cactus es un libre generador de sitio estático equipado con poderosas herramientas que pueden ayudarte construir sitios web localmente, Más rápido y más fácil con las tecnologías web modernas. Le proporciona un punto de partida en su proyecto con 4 plantillas prediseñadas para que pueda comenzar a trabajar..

Mientras trabajas en tu proyecto, Cactus Monitorea cada cambio que haces en tu proyecto y actualizar automáticamente el navegador para que pueda ver los cambios de inmediato en su Mac o dispositivo móvil. También admite SASS / SCSS y Coffescript fuera de la caja, por lo que cada cambio en este archivo también se genera automáticamente.

Empezar

En primer lugar, debe descargar Cactus desde su página de inicio y luego ejecutar la instalación. Una vez completado, ábralo, verá cuatro botones: Crear, Implementar, Editar y Botón de vista previa.

Para crear un nuevo proyecto, haga clic en Crear. Verás 4 plantillas disponibles allí. Para este tutorial, vamos con la plantilla de Blog. Hacer clic Crear.

Se le pedirá que indique el nombre de su proyecto y elija la ubicación donde existe el proyecto. Aqui doy nombre “Mi blog impresionante” Para el proyecto. Después de eso, ya verás tu proyecto en Cactus..

Modificando archivos

El proyecto generado usando la plantilla de Blog ahora existe en su Finder. Ahora inspeccionaremos los elementos necesarios para construir nuestro Blog. Dirígete al directorio donde se guardan tus archivos. Los principales directorios que utilizaremos son: Plantillas, Páginas, y Estático directorio. Vamos a saltarnos los demás por ahora..

Para mantener las cosas breves, esto es lo que cada directorio es para:

• Plantillas: Contiene archivos HTML que se comportan como una plantilla, utilizada por los archivos HTML en las páginas para construir.
• Páginas: Contiene todos los archivos HTML que se convertirán en una página con la misma ruta. por ejemplo: hello.html aquí se convertirá en http://yoursite.com/hello.html
• Estático: Contiene todos los recursos estáticos como CSS, Javascript e imágenes..

Ahora, editaremos tres archivos principales de los directorios: base.html y post.html en el directorio de plantillas y index.html en el directorio de Pages.

Usos de cactus Motor de plantillas Django para el lenguaje de las plantillas. Con esto, puede incluir elementos HTML de otros archivos HTML, por lo que no necesita duplicar códigos. Las características más utilizadas aquí son: herencia de plantillas y variable.

Para ver cómo funcionan, primero abre el base.html en el directorio de plantillas.

             % block content% Contenido principal % endblock content% ---   

base.html es el archivo html simple que usamos como plantilla 'esqueleto'. Contiene elementos comunes de nuestro sitio. Puedes ver algunos “bloques” ahí; Usaremos la plantilla secundaria para anular estos bloques..

Ahora abre el post.html ubicado en el mismo directorio con base.html.

 % extiende "base.html"% % block title% title | Cactus % endblock title% % block content% --- 
 
title
 
encabezado 
 
 
 % block body% Aquí es donde está el contenido de la publicación. % endblock body% 
 --- % endblock content% 

los post.html Contiene el marcado para nuestra página de entrada de blog. En la primera línea se puede ver que post.html extiende el base.html. Esto significa que anularemos los bloques en base.html con los bloques aqui.

También podemos encontrar variables aquí, como title y encabezado. Definiremos los valores de estas variables en las entradas de blog posteriores..

Ahora, veamos el % block body% bloquear. Esto será reemplazado por la plantilla secundaria que contiene las entradas de entrada de nuestro blog..

Ir al directorio páginas / posts. Aquí están el resto de nuestras entradas..

 título: Mis entradas Título de las entradas: Mi publicación Autor del titular: Fecha de publicación: 15-01-2015 % extiende "post.html"% % block body% % filter markdown% Lorem ipsum dolor sit amet, consectetur adipisicing elit Earum, perferendis inventore dolorem rerum et tempora sint nemo illum ab saepe, assumenda, amet illo deleniti officiis, voluptatem maxime atque vero sunt. --- % endfilter% % endblock body% 

En las entradas de entrada, le damos valor a la variable, como título, título, autor y fecha. Este valor pasará cuando llamemos el nombre de la variable en la plantilla principal. Luego escribimos el contenido de nuestro blog con Markdown..

Ahora iremos a la página índice de nuestro blog, abierta. index.html en el páginas directorio. Contiene la lista de las entradas de nuestro blog y el enlace a cada entrada. El código principal se ve a continuación:

 % extiende "base.html"% % contenido de bloque% -- 
 % para publicaciones en publicaciones% 
   título de la entrada  
post.headline 
 % endfor% 
 -- % endblock content% 

En este punto tenemos un blog simple con dos páginas principales, el Página de inicio que contiene las entradas del blog, y la página de entrada de blog sí mismo.

Vaya a la ventana de Cactus y haga clic en el botón de vista previa para iniciar el servidor. Se abrirá automáticamente el navegador y abrirá su sitio web..

Diseñando el blog usando SCSS

Una gran característica de Cactus es que funciona con SASS / SCSS fuera de la caja. Sólo suelte sus archivos .sass o .scss en el estático directorio y cada vez que edite y guarde los archivos, Cactus generará automáticamente el CSS.

Aquí daré un ejemplo utilizando bootstrap-sass para diseñar nuestro blog. Suponiendo que esté utilizando Bower, abra el terminal y navegue hasta el estático directorio de nuestro proyecto usando discos compactos mando. Luego instale bootstrap-sass usando este comando:

$ bower instalar bootstrap-sass-official

Una vez que se complete la descarga, verá un bower_components directorio dentro del directorio estático que contiene bootstrap-sass-official.

Ahora ve a este directorio: static / css. Crea el archivo scss, dale el nombre syle-bs.scss e inserte este código.

 @import "... / bower_components / bootstrap-sass-official / asset / stylesheets / _bootstrap"; 

Lo que hace el código es que importa todo desde bootstrap-sass. Una vez que guarde style-bs.scss, verá style-bs.css generado en el mismo directorio que contiene todos los estilos de bootstrap..

Implementar su proyecto

Finalmente, cuando su proyecto esté listo, puede implementar su proyecto en la versión en vivo fácilmente utilizando Amazon S3.