Jamstack, et on déploie !
Tags: jamstack, nextjs, github, netlify
Published: 2021-09-17 21:09:28

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

```sh
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.

![Ceate new repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lk3o02qtgyjptqjjgigw.png)

Reste plus cas envoyer mon code avec les commandes suivantes

```sh
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.

![Blogjam Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4ik3ndhbt9vuve81dpk.png)

## 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**

![New site from git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/46g1ikz10emhxqe6nnfz.png)

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

![Choisir le fournisseur](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi9ba9jqtmgdh4dnlwkg.png)

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

![Choisir le repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yvozvbunbqdmvbmx2h5.png)

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

![Deploy site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v07da4xzznrjd2b7h7jw.png)

Et voilà le build de votre site est lancer

![Build site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/794nj4ub9ctxvux8e9g9.png)

Après quelques secondes, vous pouvez voir **Published**

![Site Published](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5suvpudydegw0pavdsy3.png)

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

![blogjam site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qov8y2q8n4tczq6sj4li.png)

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

![changer de nom de site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irxeit3gd0efein3yk2u.png)

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

![Nouveau non de site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frw25ll97iqq2mpzloga.png)

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

![blogjam.netlify.app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5etj59hrnieeruo3bmpa.png)

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 !"**

{% user dofbi %}

[![Buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=51JrBtX&button_colour=ffad1f&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff)](https://www.buymeacoffee.com/51JrBtX)