Vincent Barrault

Déployer son blog avec git et Travis CI

Déployer son blog avec git et Travis CI

Table des matières

Contexte

Nous avons la base de notre blog, mais il nous faut le déployer. Je ne vais pas entrer dans les détails de l'hébergement car ce n'est pas le sujet, je partirai donc du principe que vous avez un serveur sur lequel déployer votre blog.

Creation de repository GIT

Nous allons utiliser github pour stocker notre repository, mais nous aurions pu utiliser n'importe quelle autre alternative.

Allez dans l'interface de creation de repository et entrez y les informations nécessaires à la creation du repository.

Une fois que vous avez l'adresse de votre repository (git@github.com:[account]/[name].git) vous pouvez vous rendre dans votre projet et exécuter les commandes suivantes

rm -rf ./.git
git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:YourAccount/my-blog.git
git push origin master

Travis CI

Une fois notre repository prêt, il nous faut mettre en place l'outil d'intégration continue pour déployer le projet sur notre serveur.

Commençons par ajouter un script à notre fichier package.json pour générer les fichiers statiques de notre blog.

./package.json
{
    [...]
    "scripts": {
        [...]
        "build:prod": "next build && next export",
    },
    [...]
}

Ensuite, nous devons créer le fichier de configuration de Travis pour qu'il construise et deploie notre blog à chaque commit.

./travis.yml
language: node_js
node_js:
  - 14
cache:
  directories:
    - node_modules
addons:
  apt:
    packages:
      - sshpass
before_script:
  - yarn install
script:
  - yarn build:prod
after_success:
  - tar -czf package.tgz ./out
  - export SSHPASS=$DEPLOY_PASS
  - sshpass -e scp -o stricthostkeychecking=no package.tgz $DEPLOY_USER@$DEPLOY_HOST:$DEPLOY_PATH
  - sshpass -e ssh -o stricthostkeychecking=no $DEPLOY_USER@$DEPLOY_HOST $DEPLOY_PATH/deploy.sh

Mais nous ne pouvons pas écrire en clair les identifiants de notre serveur dans les fichiers de configuration, il nous faut les chiffrer. Pour cela, nous pouvons utiliser l'utilitaire de Travis.

sudo apt-get update
sudo apt-get install ruby
sudo gem install travis

travis login
travis encrypt DEPLOY_HOST=1.2.3.4 --add
travis encrypt DEPLOY_PATH=/path/to/my/project --add
travis encrypt DEPLOY_USER=sshuser --add
travis encrypt DEPLOY_PASS=sshpassword --add

Notre fichier .travis.yml devrait maintenant ressembler à ceci:

./travis.yml
language: node_js
node_js:
  - 14
cache:
  directories:
    - node_modules
addons:
  apt:
    packages:
      - sshpass
before_script:
  - yarn install
script:
  - yarn build:prod
after_success:
  - tar -czf package.tgz ./out
  - export SSHPASS=$DEPLOY_PASS
  - sshpass -e scp -o stricthostkeychecking=no package.tgz $DEPLOY_USER@$DEPLOY_HOST:$DEPLOY_PATH
  - sshpass -e ssh -o stricthostkeychecking=no $DEPLOY_USER@$DEPLOY_HOST $DEPLOY_PATH/deploy.sh
env:
  global:
    - secure: [xxx]
    - secure: [xxx]
    - secure: [xxx]
    - secure: [xxx]

Enfin, allez dans l'interface de Travis (travis-ci.org ou travis-ci.com) pour activer l'intégration continue sur notre repository.

List d'article

Le script de deploiement

La dernière étape est d'uploader sur notre serveur un script de déploiement pour centraliser les commandes qui seront executées lors du déploiement. Pour cela, connectez vous en SSH à votre serveur et écrivez y le fichier suivant:

[remote_server]/path/to/blog/deploy.sh
#!/bin/bash
cd `dirname $0`
tar -xzf package.tgz
rm package.tgz
mv www www-old
mv out www
rm -rf www-old

Configuration du serveur nginx

Pour servir les fichiers de notre blog, nous allons utiliser Nginx. Voici un exemple de configuration qui pourrait nous convenir.

[remote_server]/etc/nginx/site-available/my-blog
server {
    listen 80 my-blog.com;
    listen [::]:80 my-blog.com;
    root /path/to/blog/www;
    index index.html index.htm index.nginx-debian.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Et voila, le blog est donc maintenant accessible depuis votre serveur, à vous de finir la configuration de votre nom de domaine.

Dans l'article suivant, nous allons voir comment ajouter des tags aux articles pour les catégoriser et en faire plusieurs listes.