Ce tuto est la deuxième partie d’une série.
Si vous souhaitez apprendre comment créer une application portfolio basée sur Solid avec VueJs, jetez un oeil là https://dfaveris.medium.com/portfolio-comment-cr%C3%A9er-une-application-web-portfolio-bas%C3%A9e-sur-solid-avec-vue-js-c57b50502d21
Et pour savoir comment visualiser le portfolio et les images postées, c’est ici https://dfaveris.medium.com/portfolio-2-cr%C3%A9er-la-page-de-pr%C3%A9sentation-du-portfolio-2aad0304d6ad
le résultat https://scenaristeur.github.io/portfolio/ (en cours de construction actuellement)
Lorsque l’on développe des applications web, il est toujours utile de pouvoir les héberger ;-)
L’une des solutions est de publier son code sur https://github.com et d’utiliser les pages statiques gh-pages pour publier une version compilée (build) de son application. Nous allons voir ici comment publier une application Vuejs comme le portfolio basé sur Solid
Vous aurez besoin d’installer GIT sur votre machine : https://git-scm.com/downloads
On considère ici que vous avez créé une application web en local sur votre ordinateur et que vous voulez la rendre disponible sur le web.
On va donc commencer par créer un dépôt ou repository sur github du même nom que le dossier dans lequel nous avons créé notre application en local, pour notre exemple, le nom du dépôt sera ‘portfolio’
Si vous n’avez pas de compte github, créez en un (ça ne devrait pas être trop compliqué), ensuite, sur la page d’accueil créez un nouveau dépôt en cliquant sur le bouton vert “NEW”
Sur la page “Create a new repository”, dans ‘Repository name’ indiquez ‘portfolio’, laissez la visibilité en “Public”, cochez “Add a README file” et “Add .gitignore” et selectionnez “Node” pour le .gitignore template. Cliquez sur le bouton vert “Create repository” pour créer votre dépôt.
Ceci va vous créer un dépôt à l’adresse https://github.com/[votre-nom-d-utilisateur]/portfolio tel que celui-ci
Tant que vous êtes ici, récupérez l’adresse du dépôt en cliquant sur le bouton vert code, puis sur le bouton clipboard au bout de la ligne de l’url (on en aura besoin dans la prochaine étape, pour moi, vous devriez avoir un truc du style https://github.com/[votre-nom-d-utilisateur]/portfolio.git
Une fois que le dépôt est créé sur github, on va initialiser notre dépôt local, c’est à dire le dossier /portfolio de notre ordinateur, là où on a créé notre application. Rendez-vous dans votre dossier /portfolio et tapez les commandes suivantes (remplacez https://github.com/scenaristeur/portfolio.git par l’url de votre dépôt)
git init
git add .
git commit -m "premier commit"
git remote add origin https://github.com/scenaristeur/portfolio.git
Vous pouvez vérifier avec la commande
git remote -vLa dernière étape pour publier votre code vers votre dépôt est la commande
git push origin main --forceNB : précédemment on utilisait master au lieu de main, c’est un changement récent sur github. le paramètre — — force est nécessaire car nous avions déjà un fichier README.md sur notre dépôt local et nous remplaçons celui sur le dépôt distant.
Si tout se passe bien, votre code devrait maintenant être en ligne sur votre dépôt github distant
Construction de l’application
Bien notre code est maintenant sur github. Nous devons maintenant construire notre application (dans le dossier /dist) et l’envoyer sur une nouvelle branche (gh-pages)
D’abord vous devez supprimer ou commenter avec un dièse la ligne /dist présente dans le fichier .gitignore, pour que ce dossier soit publié sur github.
Nous allons créer une première construction de notre application depuis la ligne de commande avec la commande
npm run build
Nous devons ensuite ajouter ce dossier et créer un nouveau commit
git add dist -f && git commit -m "Initial dist subtree commit"Les dernières commandes vont nous permettre d’ajouter tous les fichiers, de publier le dossier /dist , de l’utiliser pour créer un subtree (sous-arbre) et de l’envoyer sur une branche nommée gh-pages
git add . && git commit -m "ajout de dist"
git push --set-upstream origin main
git subtree push --prefix dist origin gh-pages
Si tout est OK, vous devriez voir apparaître votre dossier /dist sur votre dépôt distant
Ne vous inquiétez pas, nous avons presque fini. Profitez-en pour cliquer sur le bouton des branches “main” pour voir si votre branche “gh-pages” a bien été créé
Pour terminer, cliquez sur l’onglet “Settings”
Vérifiez en descendant dans cette page que la fonctionnalité Github-pages prend bien en compte la branche gh-pages
Comme indiqué, votre site est maintenant accessible à l’adresse https://[votre-nom-d-utilisateur].github.io/portfolio/ pour moi, c’est https://scenaristeur.github.io/portfolio/
Mais si vous vous y rendez vous n’aurez qu’une page blanche, & de beaux messages d’avertissement dans la console JavaScript…
Il nous reste encore quelques réglages… Vous voyez dans la console que l’application cherche ses fichiers directement à la racine du site, par exemple https://scenaristeur.github.io/js/chunk-vendors.c252531d.js or notre site est à l’adresse https://scenaristeur.github.io/portfolio/ donc nous devons dire à webpack d’utiliser un PublicPath en production.
Pour ce faire, il suffit de créer à la racine de notre application un fichier vue.config.js avec le code suivant qui export une variable publicPath qui prend la valeur ‘/portfolio/’ si on est en mode ‘production’ ou la valeur ‘/’ sinon
const publicPath = process.env.NODE_ENV === 'production' ? '/portfolio/' : '/'module.exports = {
publicPath: publicPath,
}
Maintenant, nous pouvons reconstruire notre appli (build) et réutiliser toutes les commandes git pour publier notre code sur la branche main, et le dossier /dist sur la branche gh-pages, mais on peut automatiser ceci en ajoutant à notre fichier package.json deux lignes : (n’oubliez pas d’ajouter une virgule à la fin de la ligne précédente, sinon ça ne marchera pas)
"git": "npm run build && git add . && git commit -m",
"postgit": "git push && git subtree push --prefix dist origin gh-pages"
On peut alors tout faire (build et publication) avec une seule ligne de commande :
npm run git -- "ajout du publicpath"Au bout de quelques minutes maximum, github devrait avoir mis à jour votre application et vous devriez pouvoir enfin la trouver à l’adresse https://[votre-nom-d-utilisateur].github.io/portfolio/ (pour moi, c’est https://scenaristeur.github.io/portfolio/)
- TODO: réglages pour le routage..
