Comment construire un blog simple avec un générateur de sites statiques hexo
Ce tutoriel vous montrera comment vous pouvez configurer un blog simple à l'aide d'un générateur de sites statique très rapide et facile à utiliser.
Qu'est-ce qu'un SSG?
SSG, ou générateur de sites statique, est une application Web qui convertit le contenu dynamique d'une page Web en contenu statique généralement stocké localement. Les générateurs de sites statiques ne nécessitent pas de bases de données et de backends, éliminant ainsi la nécessité d'apprendre à coder. Il se concentre principalement sur l'écriture et la présentation du contenu.
SSG VS. CMS
La façon la plus populaire de créer des sites Web et de gérer le contenu est d'utiliser CMS ou des systèmes de gestion de contenu tels que WordPress, Drupal, Joomla, etc.
Les systèmes CMS fonctionnent en créant et en gérant du contenu directement à l'aide d'une interface interactive. Étant donné que les données dans un CMS sont récupérées de la base de données, les CMS sont très lents car le contenu est récupéré et servi de contenu dynamique. Les systèmes CMS sont également sujets à des vulnérabilités de sécurité car ils s'appuient sur des plugins externes écrits par d'autres développeurs pour augmenter les fonctionnalités.
D'un autre côté, les générateurs de sites statiques fonctionnent en créant du contenu des supports hors ligne tels que les éditeurs de texte et rendent la dernière vue de la page lors de la publication. Étant donné que le contenu est rendu localement, sans avoir besoin d'une base de données, la page rend plus rapidement et les vitesses de chargement sont incroyablement rapides.
Les générateurs de sites statiques sont en code pré-compilé qui agit comme un moteur pour rendre le contenu publié.
Comment construire un blog statique avec hexo
L'un des choix populaires pour construire un site statique est hexo.
Hexo est une application SSG simple, rapide et puissante écrite en Nodejs. Bien qu'il existe d'autres choix pour construire un site statique, Hexo vous permet de personnaliser votre site et d'intégrer divers outils.
Voyons comment nous pouvons configurer un site statique simple avec hexo.
Installation de Hexo
Avant de pouvoir construire un site, nous devons mettre en place des exigences hexo et l'installer. Pour cela, nous avons besoin de nodejs et de git.
Commencez par mettre à jour votre système:
Mise à jour Sudo apt-get
SUDO APT-GET ANGRADE
Une fois que vous avez votre système à jour, installez Git
sudo apt-get install git
Ensuite, installez NodeJs à partir de NODESORCE en utilisant la commande:
curl -sl https: // deb.nœud.com / setup_14.X | sudo -e bash -
APT-Get Installer -y nodejs
Une fois que NodeJS est installé, nous pouvons procéder à l'installation de Hexo en utilisant la commande:
NPM Install -g hexo-CLI
Travailler avec hexo
Une fois que vous avez installé Hexo, vous pouvez créer un site et publier du contenu. Voyons comment travailler avec hexo. Gardez à l'esprit qu'il s'agit d'un guide simple et simple. Reportez-vous à la documentation pour en savoir plus.
Créer un site
Pour créer un nouveau site Hexo, utilisez la commande ci-dessous:
hexo init hexosite
cd hexosite
Installation de NPM
Comprendre la structure du répertoire hexo
Une fois que vous avez initialisé un nouveau site Hexo, vous obtiendrez une structure de répertoire comme celle ci-dessous:
-rw-r - r-- 1 cs cs 0 février 8 20:51 _config.paysage.YML
-RW-R - R-- 1 CS CS 2439 Fév. 8 20:51 _config.YML DRWXR-XR-X 1 CS CS 4096 8 février 20:51 Node_Modules
-RW-R - R-- 1 CS CS 615 Fév. 8 20:51 Package.json
-RW-R - R-- 1 CS CS 56716 Fév. 20:51 Package-Lock.JSON DRWXR-XR-X 1 CS CS CS 4096 FEB 8 20:51 Échafaudages DRWXR-XR-X 1 CS CS 4096 Fév 8 20:51
Le premier fichier est le _config.YML contient tous les paramètres de votre site. Assurez-vous de le modifier avant de déployer votre site car il contiendra des valeurs par défaut.
Le fichier suivant est le package.Fichier JSON qui contient les données et configurations d'application NodeJS. Ici, vous trouverez des packages installés et leurs versions.
Vous pouvez en savoir plus sur le package.JSON à partir de la page des ressources ci-dessous:
https: // docs.npmjs.com / cli / v6 / configuration-npm / package-json
Créer un blog
Pour créer un blog simple dans Hexo, utilisez la commande:
Hexo Nouveau blog "Hello World Blog"
Une fois créé, vous pouvez déposer le fichier Markdown sous / source / _Posts répertoire. Vous devrez utiliser le langage de balisage de Markdown pour écrire du contenu.
Création d'une nouvelle page
La création d'une page dans Hexo est simple; Utilisez la commande:
Hexo Nouvelle page «Page-2»
La source de page est située sous / source / page-2 / index.Maryland
Générer et servir de contenu
Une fois que vous publiez votre contenu sur Hexo, vous devrez exécuter l'application pour générer le contenu statique.
Utilisez les commandes ci-dessous:
$ hexo générer
Info valider la configuration
Info Start Traitement
Fichiers d'information chargés en 966 ms
Informations générées: Archives / Index.html
Informations générées: Page-2 / Index.html
Informations générées: Archives / 2021 / Index.html
Informations générées: index.html
Informations générées: Archives / 2021/02 / index.html
Informations générées: JS / Script.js
Informations générées: Fancybox / jQuery.boîte de fantaisie.min.CSS
Informations générées: 2021/02/08 / Hello-World-Post / Index.html
Informations générées: CSS / Style.CSS
Informations générées: 2021/02/08 / Hello-World / Index.html
Informations générées: CSS / Fonts / Fontawesome.OTF
Informations générées: CSS / FONTS / FONTAWESAIME-WEBFONT.woff
Informations générées: CSS / FONTS / FONTAWESAIME-WEBFONT.eot
Informations générées: Fancybox / jQuery.boîte de fantaisie.min.js
Informations générées: CSS / FONTS / FONTAWESAIME-WEBFONT.woff2
Informations générées: JS / JQuery-3.4.1.min.js
Informations générées: CSS / FONTS / FONTAWESAIME-WEBFONT.TTF
Informations générées: CSS / images / bannière.jpg
Informations générées: CSS / FONTS / FONTAWESAIME-WEBFONT.SVG
Fichiers info 19 générés en 2.08 s
Pour servir l'application, exécutez la commande:
$ Hexo Server Info valider les informations de configuration Démarrer les informations sur les informations Hexo sur http: // localhost: 4000 . Appuyez sur Ctrl + C pour arrêter.
Conclusion
Cette introduction rapide et simple vous a montré comment utiliser le site statique hexo. Si vous avez besoin de plus d'informations sur la façon de travailler avec Hexo, veuillez vous référer à la documentation principale fournie ci-dessous:
https: // hexo.IO / Docs