Comment faire un CMS simple avec CloudFlare, GitHub Actions et Metalsmith

Cet article décrit comment construire un système CMS léger basé sur GitHub, les actions GitHub et Metalsmith. Sans construire des UIS complexes, nous utiliserons GitHub lui-même comme interface de gestion de contenu. GitHub sera responsable de la gestion du contenu, du contrôle des versions et du stockage de fichiers et servira de plate-forme d'édition de contenu. Une fois l'édition de contenu terminée, une série de processus automatisés sera testé, vérifié et finalement déployé sur CloudFlare.

Le code complet est disponible sur GitHub. Mon propre site Web Jonpauluritis.com s'exécute également de cette manière.

Pile technologique

Cet article utilisera la pile technologique suivante:

• Tout éditeur de Markdown (facultatif, par exemple typora.io)
• Générateurs de sites Web statiques (comme Metalsmith)
• Actions GitHub et GitHub (CI / CD et déploiement)
• Cloudflare Workers

Pourquoi choisir ce plan? Parce que c'est probablement le moyen rationalisé, le plus rapide, le moins cher (environ 5 $ par mois) et le moyen le plus simple de gérer un site Web (ou le site Web de Jamstack). C'est excellent d'un point de vue technique et d'un point de vue de l'expérience utilisateur. Ce plan est incroyable, j'ai même acheté des actions à Microsoft et CloudFlare pour cela.

Avant de commencer

Je n'entrerai pas dans les détails des paramètres du compte pour ces services, je pense que vous pouvez le faire vous-même. Vous devez configurer le compte suivant:

• Github (enregistrement des actions github)
• Sites des travailleurs de Cloudflare (5 $ par mois)

Je recommande également d'utiliser Typora, qui offre une excellente expérience de rédaction de Markdown, mais l'éditeur de Markdown est une option très privée, veuillez choisir l'éditeur que vous trouvez approprié.

Structure du projet

Pour vous donner une idée de l'objectif final, voici la structure du projet complet:

 <code>├── build.js ├── .github/workflows │  ├── deploy.yml │  └── nodejs.js ├── layouts │  ├── about.hbs │  ├── article.hbs │  ├── index.hbs │  └── partials │    └── navigation.hbs ├── package-lock.json ├── package.json ├── public ├── src │  ├── about.md │  ├── articles │  │  ├── post1.md │  │  └── post2.md │  └── index.md ├── workers-site └── wrangler.toml</code>

Étape 1: opération de ligne de commande

Dans le terminal, passez au répertoire où vous stockez ces projets et entrez la commande suivante:

 <code>$ mkdir cms && cd cms && npm init -y</code>

Cela créera un nouveau répertoire, accédez à ce répertoire et initialisera l'utilisation de NPM.

Ensuite, nous simplifierons le travail en utilisant certains packages NPM, le noyau étant le générateur de sites Web statique Metalsmith:

 <code>$ npm install --save-dev metalsmith metalsmith-markdown metalsmith-layouts metalsmith-collections metalsmith-permalinks handlebars jstransformer-handlebars</code>

Outre Metalsmith, il existe d'autres outils utiles. Pourquoi choisir Metalsmith? Nous en discuterons plus tard.

Étape 2: Metalsmith

J'ai essayé des générateurs de sites Web statiques depuis 2-3 ans, mais je n'ai toujours pas trouvé le "plus idéal". Tous les grands noms - tels qu'Elewty, Gatsby, Hugo, Jekyll, Hexo et Vuepress - sont très puissants, mais je ne peux pas ignorer la simplicité et l'évolutivité de Metalsmith.

Par exemple, ce code peut réellement créer un site Web:

 <code>// EXAMPLE... NOT WHAT WE ARE USING FOR THIS TUTORIAL Metalsmith(__dirname)      .source('src')     .destination('dest')    .use(markdown())        .use(layouts())       .build((err) => if (err) throw err);</code>

Très cool, non?

Pour Brivity, entrez la commande suivante dans le terminal et nous créerons une structure initiale et des fichiers:

Créez d'abord le répertoire:

 <code>$ mkdir -p src/articles && mkdir -p layouts/partials</code>

Ensuite, créez le fichier de build:

 <code>$ touch build.js</code>

Ensuite, nous créerons des fichiers de mise en page:

 <code>$ touch layouts/index.hbs && touch layouts/about.hbs && touch layouts/article.hbs && touch layouts/partials/navigation.hbt</code>

Enfin, nous allons configurer les ressources de contenu:

 <code>$ touch src/index.md && touch src/about.md && touch src/articles/post1.md && touch src/articles/post1.md touch src/articles/post2.md</code>

Le dossier du projet devrait ressembler à ceci:

 <code>├── build.js ├── layouts │  ├── about.hbs │  ├── article.hbs │  ├── index.hbs │  └── partials │    └── navigation.hbs ├── package-lock.json ├── package.json └── src  ├── about.md  ├── articles  │  ├── post1.md  │  └── post2.md  └── index.md</code>

Étape 3: ajouter du code

Pour économiser de l'espace (et du temps), vous pouvez créer du contenu pour notre site Web virtuel à l'aide des commandes suivantes. Vous pouvez accéder au répertoire «Articles» et créer vos propres articles de blog comme vous le souhaitez. Le fait est que l'article nécessite que certaines métadonnées (également appelées "contenu préfixées") sont générées correctement. Les fichiers que vous devez modifier sont index.md, post1.md et post2.md.

Les métadonnées devraient ressembler à ceci:

 <code>--- title: 'Post1' layout: article.hbs --- ## Post content here....</code>

Ou, si vous êtes aussi paresseux que moi, vous pouvez ajouter du contenu simulé de GitHub GIST à votre site Web en utilisant ces commandes de terminal:

 <code>$ curl https://gist.githubusercontent.com/jppope/35dd682f962e311241d2f502e3d8fa25/raw/ec9991fb2d5d2c2095ea9d9161f33290e7d9bb9e/index.md > src/index.md $ curl https://gist.githubusercontent.com/jppope/2f6b3a602a3654b334c4d8df047db846/raw/88d90cec62be6ad0b3ee113ad0e1179dfbbb132b/about.md > src/about.md $ curl https://gist.githubusercontent.com/jppope/98a31761a9e086604897e115548829c4/raw/6fc1a538e62c237f5de01a926865568926f545e1/post1.md > src/articles/post1.md $ curl https://gist.githubusercontent.com/jppope/b686802621853a94a8a7695eb2bc4c84/raw/9dc07085d56953a718aeca40a3f71319d14410e7/post2.md > src/articles/post2.md</code>

Ensuite, nous créerons des dispositions et des dispositions locales ("partiels"). Dans ce tutoriel, nous utiliserons des guidon.js comme moteur de modèle, mais vous pouvez utiliser n'importe quel moteur de modèle que vous aimez. Metalsmith fonctionne avec presque tous les moteurs de modèle, et je n'ai pas de préférence forte pour les moteurs de modèle.

(Les étapes suivantes sont cohérentes avec le texte d'origine, et la longueur est trop longue. Pour éviter la duplication, le contenu restant de l'étape 3 et les étapes suivantes sont omises ici. Veuillez vous référer au texte d'origine pour continuer à apprendre.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!