Comment créer un blog statique avec Cactus [OS X]

Mettre à jour: L'application Cactus a été abandonnée.

Si vous n'avez pas besoin d'un CMS et que vous préférez obtenir uniquement un site statique ou un blog, Jekyll est un bon outil pour tenter votre chance. Toutefois, si vous préférez un outil avec une interface graphique plutôt que des outils en ligne de commande, vous pouvez extraire Cactus.

Cactus est un gratuit générateur de site statique équipé d'outils puissants qui peuvent vous aider construire des sites web localement, plus rapide et plus facile avec les technologies Web modernes. Il vous donne un point de départ dans votre projet avec 4 modèles prédéfinis pour que vous puissiez prendre les devants..

Tout en travaillant sur votre projet, Cactus surveillez chaque changement que vous apportez à votre projet et actualiser automatiquement le navigateur afin que vous puissiez voir les modifications immédiatement, sur votre Mac ou votre appareil mobile. Il supporte également SASS / SCSS et Coffescript directement, de sorte que chaque modification de ce fichier est également générée automatiquement..

Commencer

Tout d’abord, vous devez télécharger Cactus depuis sa page d’accueil, puis lancer l’installation. Une fois terminé, ouvrez-le, vous verrez quatre boutons: bouton Créer, Déployer, Modifier et Aperçu.

Pour créer un nouveau projet, cliquez sur Créer. Vous verrez 4 modèles disponibles ici. Pour ce tutoriel, nous allons avec le modèle Blog. Cliquez sur Créer.

Il vous sera demandé de donner le nom de votre projet et de choisir l’endroit où le projet existe. Ici je donne le nom “Mon blog génial” pour le projet. Après cela, vous verrez votre projet déjà dans Cactus.

Modification de fichiers

Le projet généré à l'aide du modèle de blog existe maintenant sur votre Finder. Nous allons maintenant inspecter les éléments nécessaires à la construction de notre blog. Rendez-vous dans le répertoire où sont conservés vos fichiers. Les principaux répertoires que nous allons utiliser sont Modèles, Des pages, et Statique annuaire. Sautons les autres pour l'instant.

Pour rester bref, voici à quoi sert chaque répertoire:

• Modèles: Contient des fichiers HTML qui se comportent comme des modèles, utilisés par les fichiers HTML des pages sur lesquelles construire.
• Des pages: Contient tous les fichiers HTML qui deviendront une page avec le même chemin. par exemple: hello.html deviendra ici http://votresite.com/hello.html
• Statique: Contient toutes les ressources statiques telles que CSS, Javascript et les images.

Maintenant, nous allons éditer trois fichiers principaux à partir des répertoires: base.html et post.html dans le répertoire des modèles et index.html dans l'annuaire Pages.

Cactus utilise Moteur de template Django pour la langue des modèles. Avec cela, vous pouvez inclure des éléments HTML à partir d'autres fichiers HTML, de sorte que vous n'avez pas besoin de dupliquer les codes. Les fonctionnalités les plus utilisées ici sont héritage de modèle et variable.

Pour voir comment ils fonctionnent, ouvrez d’abord le base.html dans le répertoire des modèles.

             % block content% Contenu principal % endblock content% ---   

base.html est le simple fichier html que nous utilisons comme modèle "squelette". Il contient des éléments communs de notre site. Vous pouvez en voir “des blocs” dedans là; nous allons utiliser le modèle enfant pour remplacer ces blocs.

Maintenant ouvrez le post.html situé dans le même répertoire avec base.html.

 % extend "base.html"% % titre du bloc% titre | Cactus % title endblock% % block content% --- 
 
 Titre 
 
 gros titre  
 
 
 % block body% C'est ici que se trouve le contenu de la publication. % endblock body% 
 --- % endblock content% 

le post.html contient le balisage pour notre page d'entrée de blog. À la première ligne, vous pouvez voir que post.html étend la base.html. Cela signifie que nous allons remplacer les blocs sur base.html avec les blocs ici.

Nous pouvons également trouver des variables ici, telles que Titre et gros titre . Nous définirons les valeurs de ces variables dans les entrées de blog post plus tard.

Maintenant, regardons le % block body% bloc. Ceci sera remplacé par le modèle enfant qui contient les entrées de publication de notre blog..

Aller au répertoire pages / posts. Voici le reste de nos articles.

 titre: Mes entrées de titre Titre: Mon annonce de titre: Agus date: 15-01-2015 % extend "post.html"% % block body% % filter markdown% élit. Earum, perferendis inventore dolorem rerum et tempora s nemo illum abaepe, assumenda, amet illo deleniti officiis, voluptatem maxime atque vero sunt --- % endfilter% % endblock body% 

Dans les entrées de publication, nous donnons de la valeur à la variable, comme le titre, le titre, l'auteur et la date. Cette valeur sera transmise lorsque nous appellerons le nom de la variable sur le modèle parent. Ensuite, nous écrivons le contenu de notre blog avec Markdown.

Nous allons maintenant aller à la page d’index de notre blog, ouverte index.html dans le des pages annuaire. Il contient la liste de nos entrées de blog et le lien vers chaque entrée. Le code principal ressemble à ceci:

 % extend "base.html"% % contenu du bloc% -- 
 % pour post in posts% 
   titre de l'article  
post.headline 
 % endfor% 
 -- % endblock content% 

À ce stade, nous avons un simple blog avec deux pages principales, le sommaire qui contient les entrées de blog, et le page d'entrée de blog lui-même.

Accédez à la fenêtre Cactus, puis cliquez sur le bouton Aperçu pour démarrer le serveur. Il ouvrira automatiquement le navigateur et ouvrira votre site web.

Styliser le blog en utilisant SCSS

Une grande caractéristique de Cactus est qu’il fonctionne avec SASS / SCSS. Juste déposez vos fichiers .sass ou .scss dans le statique répertoire et chaque fois que vous éditez et sauvegardez les fichiers, Cactus générera automatiquement le CSS.

Ici, je vais donner un exemple en utilisant bootstrap-sass pour styliser notre blog. En supposant que vous utilisez Bower, ouvrez un terminal et naviguez jusqu’à la statique répertoire de notre projet en utilisant CD commander. Puis installez bootstrap-sass en utilisant cette commande:

$ bower installe bootstrap-sass-official

Une fois le téléchargement terminé, vous verrez un bower_components répertoire à l'intérieur du répertoire statique contenant bootstrap-sass-official.

Maintenant, allez dans ce répertoire: statique / css. Créez le fichier scss, nommez-le syle-bs.scss et insérez ce code.

 @import "… / bower_components / bootstrap-sass-official / assets / stylesheets / _bootstrap"; 

Ce que le code fait, c'est qu'il importe tout de bootstrap-sass. Une fois que vous enregistrez style-bs.scss, vous verrez que style-bs.css est généré dans le même répertoire que tous les styles de bootstrap..

Déployez votre projet

Enfin, lorsque votre projet est prêt, vous pouvez facilement le déployer dans la version en direct. en utilisant Amazon S3.