Share
Généralement, lorsque nous commençons à créer un nouveau blog, un certain degré de complexité doit être pris en compte. Quel type de base de données aurez-vous besoin? Aurez-vous besoin de PHP, Node.js, MySQL? Comment allez-vous gérer la sécurité de vos bases de données et de vos zones administratives? Quel sera votre programme de maintenance pour les mises à jour de plugins et de thèmes??
Si tout ce dont vous avez besoin est un simple blog, ce genre de complexité peut être excessif. Cependant, avec CMS.js, vous pouvez tout mettre de côté et créer un blog simple, entièrement consacré au client, sans aucun des problèmes susmentionnés. Et vous pouvez le configurer en quelques minutes.
Dans ce tutoriel, nous allons commencer par jeter un coup d'œil sur CMS.js, puis vous apprendrez exactement comment achever son processus de configuration rapide. Une fois que vous avez un site opérationnel, nous verrons comment ajouter et déployer du contenu. Commençons!
CMS.js est un générateur de site très léger écrit en JavaScript. À la sortie de la boîte, il n’ya que 94 Ko, soit seize fichiers. En comparaison, WordPress fait environ 24 Mo et plus de 1 400 fichiers.
Il est conçu dans «l'esprit de Jekyll», ce qui signifie que vous pouvez écrire des articles et des pages sous forme de fichiers Markdown en texte brut, les traiter et les imprimer automatiquement au format blog..
Comme Jekyll, avec CMS.js, vous pouvez héberger votre site (gratuitement) sur GitHub Pages. Avec cette option, CMS.js utilisera l'API de GitHub pour extraire dynamiquement les fichiers Markdown de votre référentiel et les diffuser sous forme de publications et de pages. C'est ce qu'on appelle le «Mode GitHub», et c'est le premier des deux modes disponibles dans CMS.js.
Au fait, si vous aimez le son de ce mode mais que vous n'êtes pas familier avec Github, ne vous inquiétez pas. Nous vous montrerons comment l'utiliser de manière à ce que vous soyez à l'aise même si vous n'avez jamais touché à un abruti de votre vie. Alternativement, si vous préférez votre propre hébergement, vous pouvez utiliser plutôt le «Mode serveur»..
Ce mode est sans doute le plus simple. Passons donc à la première utilisation..
La première chose à faire est de télécharger CMS.js. Rendez-vous sur https://github.com/cdmedia/cms.js et cliquez sur le green Cloner ou télécharger bouton en haut à droite, puis choisissez Télécharger le ZIP.
Remarque: avec ce processus, nous allons supposer que vous ne voulez absolument pas utiliser GitHub, à part le téléchargement de CMS.js, ce qui explique pourquoi nous saisissons simplement un fichier ZIP plutôt que de cloner le référentiel. Cependant, si vous préférez cloner le repo avec vos propres méthodes, vous pouvez certainement le faire..
Sinon, une fois le ZIP téléchargé, extrayez-le et vous devriez voir le contenu suivant:
Allez maintenant dans le dossier “js” et ouvrez le fichier “config.js” pour le modifier. Trouvez le mode paramètre (sur la ligne 52 de la version actuelle) et remplacez-le par 'Github' à 'Serveur'.
Vous verrez également les paramètres de votre nom de site, de votre slogan, de votre adresse électronique et du nom de l'auteur du site. Il est donc temps de les modifier également..
Si vous connaissez déjà les éléments que vous souhaitez voir apparaître dans votre menu de navigation, vous pouvez éditer le sitesNavItems mettre maintenant aussi bien.
La valeur définie par rapport à la prénom propriété déterminera l'étiquette qui apparaît sur votre élément de menu. le href Cette propriété vous permet de spécifier l’URL à laquelle vous souhaitez lier l’élément de navigation. le nouvelle fenetre propriété détermine si le lien s'ouvrira dans une nouvelle fenêtre lorsque l'utilisateur cliquera dessus.
Si vous souhaitez créer un lien vers une page interne, laissez les deux href et nouvelle fenetre propriétés et juste utiliser le prénom propriété dont la valeur est définie sur le titre de la page en question (plus d'informations sur le fonctionnement ultérieur des titres de page). Cela définira automatiquement le permalien de l'élément de navigation avec le format #page/
Si une page interne vers laquelle vous souhaitez créer un lien utilise des espaces dans son titre, par exemple «À propos de moi», utilisez des espaces dans la fenêtre correspondante. prénom propriété aussi, par exemple. nom: 'à propos de moi'
Pour voir votre site en «mode serveur», vous devez le transférer sur un serveur utilisant Apache ou NGINX. Vous pouvez le télécharger directement sur votre hébergement Web via votre client FTP préféré si vous le souhaitez, mais il est généralement préférable de commencer par travailler sur des éléments hors ligne et de les télécharger lorsque vous avez terminé. En tant que tel, je vous recommande d'utiliser un programme pour créer un serveur hors ligne et d'y travailler..
Pour ce tutoriel, nous utiliserons MAMP, qui est disponible pour Mac et Windows, mais si vous utilisez déjà et préférez une autre option comme XAMPP, elle convient également..
Dans le dossier «htdocs» de votre installation MAMP, créez un nouveau dossier nommé «cms_js» (ou ce que vous préférez) pour héberger votre site hors connexion CMS.js:
Copiez tous vos fichiers CMS.js dans ce dossier:
Et voilà, votre site est opérationnel et prêt à fonctionner!
Pour le voir, accédez à l'URL hors ligne de votre site (fournie par MAMP), par exemple. http: // localhost: 8888 / cms_js
Avec le "mode GitHub", vous pouvez héberger gratuitement votre site CMS.js sur GitHub Pages et gérer votre site via un référentiel GitHub qui stocke votre contenu..
Avec GitHub Pages, vous pouvez avoir un nombre illimité de sites gratuits. un site "principal" par compte, puis un par projet / référentiel. Sachez toutefois que les comptes GitHub gratuits sont généralement utilisés pour des projets partageables en source ouverte, de sorte que vos référentiels (y compris ceux avec des sites associés) ne sont pas privés..
Remarque: Si vous n'avez pas encore de compte GitHub, inscrivez-vous à l'adresse: https://github.com/join
Pour garder les choses aussi simples que possible, nous utiliserons GitHub Desktop pour ce processus. Si vous n'avez pas GitHub Desktop, allez le chercher ici: https://desktop.github.com/
Si vous êtes familier avec la ligne de commande pour git et que vous souhaitez l'utiliser, cela fonctionnera tout aussi bien, mais gardez à l'esprit que le tutoriel ne couvrira pas les commandes à utiliser à chaque étape..
Allez dans le référentiel CMS.js et cliquez sur le bouton Fourchette icône en haut à droite. Cela créera un nouveau référentiel dans votre compte avec tous les fichiers CMS.js copiés dans celui-ci..
Lorsque vous utilisez GitHub Pages, l’URL de votre site tire le nom de votre référentiel, c.-à-d.. http: //
Aller dans le Réglages onglet, entrez un nouveau nom dans le Nom du référentiel champ puis cliquez sur Renommer.
Retourner à la Code onglet et cliquez sur le vert Cloner ou télécharger comme nous l’avons fait lors de l’installation en mode serveur. Mais cette fois, choisissez Ouvrir dans le bureau au lieu.
GitHub Desktop s'ouvrira et vous serez invité à sélectionner l'emplacement que vous souhaitez cloner. Ce sera le dossier dans lequel vous travaillerez hors connexion pour gérer votre site. Choisissez un emplacement approprié, puis cliquez sur Cloner. Tous les fichiers CMS.js seront téléchargés à l’emplacement spécifié, prêts à être utilisés..
Accentsconagua
gh-pages BrancheLa prochaine chose dont vous aurez besoin est un gh-pages branche dans votre référentiel cloné, car il s’agit de la branche à partir de laquelle l’API GitHub en tirera le contenu; c’est donc celle sur laquelle vous devez travailler sur votre site. gh-pages branche qu'il utilise pour sa propre page de projet, nous aurons donc besoin de supprimer ce premier.
Passer de la branche principale à la gh-pages branche.
Aller au Branche menu et sélectionnez Supprimer 'gh-pages', puis confirmez en cliquant Effacer dans la boîte de dialogue qui apparaît.
Maintenant, vous êtes libre de créer votre propre gh-pages branche. Cliquez sur le bouton icône de petite branche, tapez “gh-pages” dans le menu prénom champ puis cliquez sur Créer une branche.
Une fois cela fait, cliquez sur le bouton Publier bouton en haut à droite pour mettre en ligne votre nouvelle branche gh-pages.
Vous avez maintenant votre propre gh-pages branche, dans votre propre clone de CMS.js, et vous êtes prêt à commencer.
Dans le Finder ou dans l'Explorateur Windows, accédez au dossier dans lequel vous avez cloné..
Pointe: clic droit sur le nom du repo dans la colonne de gauche et choisissez Ouvrir dans le Finder ou Ouvrir dans l'explorateur.
À partir de là, vous devrez suivre la même étape que si vous utilisiez le «Mode serveur», qui consiste à modifier vos paramètres de configuration. Allez dans le dossier “js” et ouvrez “config.js” pour le modifier.
Le «mode» sera déjà réglé sur «Github» par défaut pour que vous n'ayez pas à modifier ce paramètre. Cependant, vous devrez éditer githubUserSettings, (à la ligne 55 de la version actuelle).
Définissez la première valeur sur votre nom d'utilisateur GitHub et la seconde sur le nom du référentiel que vous venez de créer (avec une fourchette).
Comme nous l'avons fait avec «Mode serveur», vous devez également modifier le nom de votre site, le slogan du site, l'adresse électronique du site et les paramètres du nom de l'auteur du site..
Si vous souhaitez définir vos éléments de navigation maintenant, reportez-vous à la section «Modification des éléments de navigation (facultatif)» plus haut dans ce didacticiel..
Maintenant, retournez sur GitHub Desktop et vous devriez voir un bouton lire 1 modification non validée. En effet, GitHub Desktop a détecté vos modifications du fichier «config.js». Si vous appuyez sur le bouton en question et regardez le corps de code ci-dessous, vous verrez qu'il met en évidence en vert les modifications que vous avez apportées..
Examinez rapidement vos modifications et, une fois que vous êtes satisfait, remplissez le petit formulaire en bas à gauche en décrivant les modifications de base que vous avez effectuées..
Puis clique S'engager à gh-pages. Lorsque cela est fait, cliquez sur le bouton Sync bouton en haut à droite (où le Publier bouton était avant), pour que les modifications que vous venez de valider soient téléchargées sur votre référentiel.
Vous pouvez vérifier que les modifications apportées à votre fichier de configuration ont bien été téléchargées en allant sur la page Web de votre référentiel. gh-pages branche et cherche à voir si votre message de commit y est apparu:
Votre site est maintenant prêt à être visualisé! Votre URL prendra le format http: //
Accédez à l'URL de votre site et consultez-le.!
Maintenant que votre site CMS.js est opérationnel, vous pouvez commencer à y ajouter du contenu sous forme de pages et de messages. Ces deux éléments sont ajoutés en créant des fichiers Markdown (.md) dans les dossiers "pages" et "publications" de votre site, respectivement..
Il convient de noter ici que si vous souhaitez utiliser du HTML intégré, vous devez modifier un paramètre Markdown pour votre site pour des tâches telles que l'ajout de vidéos à des publications. À la fin du fichier “config.js”, vous trouverez ces paramètres:
Changement désinfecter de vrai à faux pour permettre le HTML en ligne. Si vous ne modifiez pas ce paramètre, tout code HTML intégré sera affiché sous forme de texte brut au lieu d'être affiché..
Pour ajouter une publication, créez un fichier Markdown (.md) dans le dossier «posts» et nommez-le avec un format combinant la date et le titre de la manière suivante: YYYY-MM-DD_post-title.md. Assurez-vous que la date et le titre sont séparés par un trait de soulignement.
Par exemple, «2016-08-06_five-minute-blog-setup.md».
En haut du fichier, vous devrez ajouter des éléments avant en spécifiant le titre de l'article, puis en dessous de ce type, le contenu de votre article, par exemple..
--- title: Ceci est un exemple de titre --- Et le contenu du post commence ici.
Si vous souhaitez migrer depuis un site Jekyll, copiez tous vos messages depuis son dossier «_posts» dans le dossier «posts» de votre site CMS.js. Si vos messages contiennent des images, veillez à importer également le dossier qui les contient..
Remarque: assurez-vous que l'extension de fichier de vos publications est “.md” et non “.markdown”.
Pour ajouter une page, créez un fichier Markdown (.md) dans le dossier “pages”. Vous n'avez pas besoin d'une date dans le nom d'un fichier de page. Toutefois, le nom du fichier doit correspondre au titre utilisé dans le texte de la page. Il devrait également y avoir des tirets dans le nom du fichier correspondant aux espaces dans le titre de la page.
Par exemple, un fichier de page nommé «about-me.md» devrait avoir cette matière première:
--- titre: À propos de moi --- Et le contenu de la page commence ici.
Pour récapituler ce que nous avons mentionné précédemment, si vous souhaitez créer un lien vers une page à partir du menu de navigation de votre site, le prénom propriété utilisée dans votre fichier de configuration sitesNavItems l'objet doit correspondre au titre de la page, avec les espaces inclus:
// éléments de navigation siteNavItems: [name: 'About Me'],
Si vous migrez depuis un site Jekyll, vous pouvez copier tous vos fichiers. des pages de son dossier racine dans le dossier "pages" de votre site CMS.js. Examinez rapidement chacun d'eux pour vous assurer que le titre correspond au nom de fichier décrit ci-dessus et que son extension est «.md» et non «.markdown»..
Mettre votre nouveau contenu en ligne en mode serveur consiste simplement à télécharger les fichiers récemment ajoutés sur votre hôte via votre client FTP préféré..
Remarque: il semble que la mise à jour du contenu existant en «mode serveur» puisse être un peu délicate à l’heure actuelle, les modifications n’apparaissant pas dans le contenu ou entraînant leur disparition totale. Si vous travaillez en «mode serveur», le mieux est actuellement de préparer vos fichiers de publication ailleurs, puis de les transférer dans votre dossier «publications» lorsque vous êtes certain qu'ils sont finalisés..
Obtenir du nouveau contenu en ligne est en réalité un peu plus facile à gérer en «Mode GitHub», car vous n'avez pas à suivre manuellement les fichiers que vous avez ajoutés ou modifiés. Au lieu de cela, vous pouvez simplement aller sur GitHub Desktop et il détectera automatiquement tous les fichiers ajoutés ou modifiés.
À partir de là, suivez le même processus que lorsque vous avez modifié votre fichier de configuration..
Remarque: le tout nouveau contenu devrait apparaître immédiatement, mais après avoir modifié le contenu existant, vous devrez peut-être attendre un peu avant de voir vos modifications sur votre site actif..
Étant donné que CMS.js est dans l’ambiance de Jekyll, vous constaterez que de nombreux thèmes de Jekyll conviendront très bien à un site CMS.js. En tant que tel, il est possible de convertir partiellement un thème Jekyll pour l'utiliser sur votre site. Jekyll a des fonctions que CMS.js n'a pas, vous ne pourrez donc pas utiliser toutes les fonctionnalités de certains thèmes de Jekyll, mais vous pourrez en modifier l'apparence..
Pour terminer ce processus, vous devrez vous familiariser avec HTML, CSS et JavaScript. Si vous vous sentez à l'aise avec ces trois langues, vous pouvez convertir un thème en un thème. Passer par les étapes exactes de la conversion dépasse le cadre de ce tutoriel, mais le processus de base est le suivant:
Dans cet exemple, j'ai converti le thème "Astro" pour Jekyll et je l'ai appliqué à ce site CMS.js:
Et c'est tout ce qu'il faut pour créer un blog sur CMS.js! Si vous n'avez pas besoin de cloches et de sifflets et souhaitez simplement un moyen simple d'obtenir un blog en ligne, cette méthode vous permet d'arriver rapidement.
Merci beaucoup à Chris Diana, le créateur de CMS.js, pour avoir créé ce formidable outil et l'avoir partagé librement.
Consultez CMS.js pour vous-même et faites un essai; vous pourriez vous trouver une nouvelle plate-forme de blogs préférée!
