Phenquestions
Ce tutoriel vous montrera comment créer un blog simple à l'aide d'un générateur de site statique très rapide et facile à utiliser.
Qu'est-ce qu'un SSG?
SSG, ou Static Site Generator, 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 ni de backends, éliminant ainsi le besoin d'apprendre à coder. Il se concentre principalement sur la rédaction et la présentation du contenu.
SSG vs. CMS
Le moyen le plus populaire de créer des sites Web et de gérer le contenu est d'utiliser un 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 d'un CMS sont extraites de la base de données, les CMS sont très lents car le contenu est récupéré et servi en tant que 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'autre part, les générateurs de sites statiques fonctionnent en créant des supports de contenu hors ligne tels que des éditeurs de texte et restituent la vue finale 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 est rendue plus rapidement et les vitesses de chargement sont incroyablement rapides.
Les générateurs de sites statiques sont constitués de code pré-compilé qui agit comme un moteur pour restituer le contenu publié.
Comment créer un blog statique avec Hexo
L'un des choix populaires pour la construction d'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 créer un site statique, Hexo vous permet de personnaliser votre site et d'intégrer divers outils.
Voyons comment nous pouvons mettre en place un site statique simple avec Hexo.
Installer Hexo
Avant de pouvoir créer un site, nous devons configurer les exigences hexo et l'installer. Pour cela, nous avons besoin de NodeJS et de git.
Commencez par mettre à jour votre système :
sudo apt-get mise à joursudo apt-get mise à niveau
Une fois votre système à jour, installez git
sudo apt-get install gitEnsuite, installez nodejs à partir de nodesource à l'aide de la commande :
curl -sL https://deb.source de nœud.fr/setup_14.x | sudo -E bash -apt-get install -y nodejs
Une fois Nodejs installé, nous pouvons procéder à l'installation de hexo à l'aide de la commande :
npm install -g hexo-cliTravailler 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 rapide. Consultez la documentation pour en savoir plus.
Création d'un site
Pour créer un nouveau site hexo, utilisez la commande ci-dessous :
hexo init HexoSitecd HexoSite
npm installer
Comprendre la structure de l'annuaire Hexo
Une fois que vous aurez initialisé un nouveau site Hexo, vous obtiendrez une structure de répertoires telle que celle ci-dessous :
-rw-r--r-- 1 cs cs 0 8 février 20:51 _config.paysage.yml-rw-r--r-- 1 cs cs 2439 8 février 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 8 février 20:51 paquet.json
-rw-r--r-- 1 cs cs 56716 8 février 20:51 package-lock.json drwxr-xr-x 1 cs cs 4096 8 février 20:51 échafaudages drwxr-xr-x 1 cs cs 4096 8 février 20:51 source drwxr-xr-x 1 cs cs 4096 8 février 20:51 thèmes
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.json qui contient les données et les configurations de l'application NodeJS. Ici, vous trouverez les packages installés et leurs versions.
Vous pouvez en savoir plus sur le forfait.json à partir de la page de ressources ci-dessous :
https://docs.npmjs.com/cli/v6/configuring-npm/package-json
Création d'un blog
Pour créer un blog simple dans hexo, utilisez la commande :
nouveau blog hexo « Blog Hello World »Une fois créé, vous pouvez déposer le fichier de démarques dans le répertoire /source/_posts. Vous devrez utiliser le langage de balisage Markdown pour écrire du contenu.
Création d'une nouvelle page
Créer une page dans Hexo est simple ; utilisez la commande :
hexo nouvelle page « Page-2 »La source de la page se trouve sous /source/Page-2/index.Maryland
Générer et servir du 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érerINFO Validation de la configuration
INFO Lancer le traitement
INFO Fichiers chargés en 966 ms
INFO Généré : archives/index.html
INFO générée : Page-2/index.html
INFO Généré : archives/2021/index.html
INFO générée : index.html
INFO Généré : archives/2021/02/index.html
INFO générée : js/script.js
INFO Généré : fancybox/jquery.boîte fantaisie.min.css
INFO Généré: 2021/02/08/Hello-World-Post/index.html
INFO générée : css/style.css
INFO Généré : 2021/02/08/hello-world/index.html
INFO générée : css/fonts/FontAwesome.otf
INFO générée : css/fonts/fontawesome-webfont.woff
INFO générée : css/fonts/fontawesome-webfont.eot
INFO Généré : fancybox/jquery.boîte fantaisie.min.js
INFO générée : css/fonts/fontawesome-webfont.woff2
INFO générée : js/jquery-3.4.1.min.js
INFO générée : css/fonts/fontawesome-webfont.ttf
INFO Généré : css/images/banner.jpg
INFO générée : css/fonts/fontawesome-webfont.svg
INFO 19 fichiers générés en 2.08 s
Pour servir l'application, exécutez la commande :
$ hexo server INFO Validation de la configuration INFO Lancer le traitement INFO Hexo est en cours d'exécution sur http://localhost:4000 . Appuyez sur Ctrl+C pour arrêter.Conclusion
Cette introduction simple et rapide 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
