DEV Community: Mamadou Diagne

Jamstack, et on déploie !

Mamadou Diagne — Fri, 17 Sep 2021 21:09:28 +0000

Est Tu pressé de déployer ton Blog sur Internet ? En 5 minutes, c'est du faisable voici les différentes étapes :

Préparez ton projet pour le déploiement avec git
Envoyer ton code sur un dépôt en ligne
Déployer Next.js avec Netlify

Préparez ton projet pour le déploiement avec git

Avec un projet Jamstack, n'importe qui devrai être en mesure de faire un git clone, d'installer au besoin les dépendances avec une procédure comme npm install, et d'être prêt à exécuté le projet en local. Pas besoin de base donnée à cloner, ni d'installation complexe.

Donc pour commencer nous allons ajouter nos changements dans git avec la commande suivante

git commit -am "🎉 int(Content): Initial"

Envoyer ton code sur un dépôt en ligne

À toi de choisir entre

GitHub
Gitlab
Bitbucket

Si tu n'es pas familier avec aucun de ces fournisseurs. Je te propose de suivre, un tuto de rattrapage en cliquant ici.

Pour mon cas, j'ai opté de créé un nouveau dépôt depuis l'interface graphique de Github.

Reste plus cas envoyer mon code avec les commandes suivantes

git remote add origin git@github.com:USERNAME/blogjam.git
git branch -M main
git push -u origin main

Attention, remplace USERNAME par le nom de ton compte Github.

Déployer Next.js avec Netlify

Maintenant, que ton code est en ligne, nous allons le déployer chez Netlify.

Vous n'avez pas de compte chez Netlify, vous pouvez en crée un gratuitement maintenant.

Dans l'intercale d'administration de Netlify cliqué sur le bouton New site from git

À vous de choisir votre fournisseur, première étape

Deuxième étape, autoriser les accès à votre dépôt et le choisir

Troisième étape, laisse les valeurs par défaut et clique sur le bouton Deploy site

Et voilà le build de votre site est lancer

Après quelques secondes, vous pouvez voir Published

Cliquez sur l'adresse url générer par netlify pour visiter votre blog

Il est possible de personnaliser l'adresse url clique sur Domain settings et puis dans Options et choisir Edit site name

Et dans la nouvelle fenêtre tapez votre nouveau nom et cliquez sur le buton Save

Voici mon blog à l'adresse https://blogjam.netlify.app

Et voilà ton blog est en ligne, je te donne rendez-vous au prochain post "Jamstack, et on modifie le déploiement ce fait automatiquement !" pour la suite de cette aventure "Jamstack, et puis quoi encore !"

.ltag__user__id__469881 .follow-action-button { background-color: #ffad1f !important; color: #fdf9f3 !important; border-color: #ffad1f !important; }

Mamadou DiagneFollow

Hi there I'm Mamadou Diagne, Civic hacker living in Dakar, Senegal.

Jamstack, et puis quoi encore !

Mamadou Diagne — Mon, 13 Sep 2021 01:43:05 +0000

Jamstack

Oui, je sais, mais ne sois pas étonné de découvrir un nouveau mot ou une nouvelle façon de faire des sites internet ou applications. Avec la technologie, tout n'est qu'une question de temps.

Hé oui, le temps est venu pour toi de passer au Jamstack !

Pas de panique

3 ingrédients, c'est tout ce qu'il te faut !

J (JavaScript)

A (API)

M (Markup)

Trêve de bavardage, au travail

Nous allons faire notre première recette Jamstack qui sera un Blog sans base de données, juste des fichier texte en format Markdown.

Créé une application Next.js
Ajouter webpack pour Markdown
Configurer Next.js pour webpack loader for Markdown
Mettre à jour le script du package
Ajouter du contenu
Ajouter un template
Démarrer le serveur

Créé une application Next.js

yarn create next-app blogjam
# or
npx create-next-app blogjam

Rends-toi à la racine de ton projet

cd blogjam

🚨 Attention Next.js active par défaut une télémétrie je vous recommande de le désactivé

npx next telemetry disable

Ajouter webpack pour Markdown

yarn add frontmatter-markdown-loader
# or
npm i -D frontmatter-markdown-loader

Si vous ête sur NextJS v11.0.0 ou supérieur, vous devez ajouter aussi @babel/core et @babel/preset-react

yarn add @babel/core @babel/preset-react
# or
npm i -D @babel/core @babel/preset-react

Configurer Next.js pour webpack loader for Markdown

Éditer le fichier next.config.js qui est dans la racine du projet et apporter les modifications suivantes.

// next.config.js
module.exports = {
  reactStrictMode: true,
+ webpack: (cfg) => {
+   cfg.module.rules.push(
+     {
+       test: /\.md$/,
+       loader: 'frontmatter-markdown-loader',
+       options: { mode: ['react-component'] }
+     }
+   )
+   return cfg;
+ }
}

Mettre à jour le script du package

Ouvrez le fichier package.json ajouté la ligne suivante "export": "npm run build && next export", comme indiqué

"scripts": {
+ "export": "npm run build && next export",
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
},

Ajouter du contenu

Crée un nouveau dossier content dans la racine du projet et crée un fichier Markdown content/home.md

mkdir content
touch content/home.md

Ajouter le contenu suivant dans content/home.md

---
title: "Hello Jamstack !"
date: 2021-09-17T19:31:20.591Z
ingredients:
  - description: "JavaScript dans le navigateur comme couche exécutable"
    name: JavaScript
  - description: "Des API, réutilisables plutôt que des bases de données spécifiques à l'application"
    name: API
  - description: "Balise pré construit comme mécanisme de livraison"
    name: Markup
---
Bienvenue sur mon formidable Blog sur **Jamstack**, pour bien démarrer, il te suffit de 3 ingrédients, c'est tout ce qu'il te faut !

Ajouter un template

Vous avez votre contenu reste plus cas choisir comment l'afficher, nous allons créer un template en remplaçant le contenue de pages/index.js par

import Head from 'next/head'
import styles from '../styles/Home.module.css'
import { attributes, react as HomeContent } from '../content/home.md';

export default function Home() {
  let { title, date, ingredients } = attributes;
  return (
    <div className={styles.container}>
      <Head>
        <title>Hello Jamstack !</title>
        <meta name="description" content="Jamstack, et puis quoi encore !" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          {title}
        </h1>

        <HomeContent />

        <ul>
          {ingredients.map((ingredient, index) => (
            <li key={index}>
              <h2>{ingredient.name}</h2>
              <p>{ingredient.description}</p>
            </li>
          ))}
        </ul>
      </main>

      <footer className={styles.footer}>
        Propulsé par toi, en {new Date(date).getFullYear()}
      </footer>
    </div>
  )
}

Démarrer le serveur

Démarre ton serveur local à la racine de ton projet cd blogjam

yarn dev
# or
npm run dev

Ton blog est accessible à l'adresse http://localhost:3000

Et voilà ton blog marche, je te donne rendez-vous au prochain post "Jamstack, et on déploie !" pour la suite de cette aventure "Jamstack, et puis quoi encore !"

.ltag__user__id__469881 .follow-action-button { background-color: #ffad1f !important; color: #fdf9f3 !important; border-color: #ffad1f !important; }

Mamadou DiagneFollow

Hi there I'm Mamadou Diagne, Civic hacker living in Dakar, Senegal.