Création d'un site perso

Avoir son site Internet “perso” est très pratique car il vous permet de publier du contenu pour vos cours, de faire connaître vos travaux de recherche ou encore de partager des infos du genre “Comment se faire un site perso à la HEIA-FR” 😉

Dans cet article, je vais vous montrer comment réaliser votre site perso et aussi comment l’héberger sur l’infrastructure de l’école.

Adresse du site perso

Pour commencer, choisissez une URL de base pour votre site. Je vois recommande de prendre une URL dans un sous-domaine de l’école comme par exemple https://jacques.supcik.isc.heia-fr.ch/, mais vous pouvez aussi choisir un autre domaine du moment que vous aillez les droits de gérer ce domaine.

Installation les logiciels

Afin de tester votre site en local, vous aurez besoin des logiciels suivants :

Installez aussi PostCSS

npm install -g postcss-cli
npm install -g autoprefixer

Création d’un site à partir d’un modèle HEIA-FR

Je vous ai mis un modèle de site à disposition. Vous pouvez télécharger ce modèle avec la commande suivante :

git clone https://gitlab.forge.hefr.ch/jacques.supcik/academic-kickstart mon-site-perso
cd mon-site-perso
git submodule update --init --recursive

Vérifiez que tout fonctionne avec la commande suivante :

./view.sh

vous devriez obtenir quelque chose comme ça :

                   | EN
-------------------+-----
  Pages            | 41
  Paginator pages  |  0
  Non-page files   |  1
  Static files     | 13
  Processed images | 26
  Aliases          |  5
  Sitemaps         |  1
  Cleaned          |  0

Built in 593 ms
Watching for changes in /.../mon-site-perso/{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in /.../mon-site-perso/config/_default
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

… et vous devriez pouvoir consulter votre site en faisant pointer votre navigateur vers l’URL indiqué (par exemple http://localhost:1313/).

Personnalisation du site

Il est maintenant temps de personaliser votre site. Avec l’éditeur de votre choix, éditez les fichiers suivants:

config/_default/config.toml:

Modifiez les champs suivants

  • title : mettez votre nom
  • baseurl : mettez l’url de base de votre site
  • copyright : modifiez à votre guise

config/_default/menus.toml:

Supprimez ou commentez entrées que vous n’utilisez pas. Par exemple si vous ne souhaitez pas publier de blog vous pouvez commenter les Posts en insérant un # devant chaque ligne:

# [[main]]
#   name = "Posts"
#   url = "#posts"
#   weight = 20

Vous pouvez aussi ajouter des entrées. Par exemple :

[[main]]
  name = "Experience"
  url = "#experience"
  weight = 15  

La position de la rubrique est déterminée par l’attribut weight.

config/_default/params.toml:

Modifiez les champs suivants

  • email : mettez votre adresse mail
  • phone : mettez votre numéro de téléphone
  • address : mettez votre adresse (si ce n’est pas Pérolles 80)
  • coordinates : mettez les cordoonées de votre bureau (si vous avez changé l’adresse)
  • directions : mettez comment trouver votre bureau
  • office_hours : mettez vos heures de présence ou commentez (avec un #) si vous ne souhaitez pas publier cette information
  • appointment_url : mettez le lien vers votre calendrier en-ligne ou commentez.
  • contact_links : mettez tous les liens qui permettent de vous joindre et commentez ceux que vous ne voulez pas
  • sharing_image : mettez à jour selon les indications du commentaire
  • twitter : mettez votre identifiant Twitter

content/authors/admin/_index.md

Remplacez avec votre contenu

content/authors/admin/avatar.jpg

Remplacez par votre photo

content/home/demo.md

Supprimez ce fichier

content/home/*

Mettez à jour tous les fichiers. Si vous ne souhaitez pas publier une rubrique, mettez le champ active à false:

active = false  # Activate this widget? true/false

content/lectures/embedded-systems-2

Modifiez ou supprimez ce dossier

Pour ajouter des descriptions de cours, consultez la documentation du thème “Academic”.

Publication du site sur le gitlab de l’école

Maintenant que votre site est prêt, passons à la publication.

Commencez par créer un “repository” sur le gitlab de l’école. Vous pouvez créer un projet dans votre “name space” personnel (user.name), mais le point (.) dans le “name space” n’est pas compatible avec les certificats SSL de la forge. Je vous conseille donc de commencer par créer un “groupe” dans gitlab. Vous pouvez nommer ce groupe “user_name” avec un “underscore” à la place du point:

Créez maintenant un projet (par ememple personal-home-page) dans le groupe que vous venez de créer:

Dès que le projet est créé, vous pouvez y envoyer votre site.

Commencez par vérifier que le “remote” actuel (origin) est bien le bon. Tappez la ligne suivante dans le shell:

git remote -v

et vous devriez obtenir:

origin	https://gitlab.forge.hefr.ch/jacques.supcik/academic-kickstart (fetch)
origin	https://gitlab.forge.hefr.ch/jacques.supcik/academic-kickstart (push)

Renomez ce “remote” pour qu’il devienne “upstream” :

git remote rename origin upstream

Ajoutez maintenant le dépot que vous venez de créer dans gitlab comme nouveau “origin” et publiez-y votre site:

git remote add origin https://gitlab.forge.hefr.ch/jacques_supcik/personal-home-page.git
git add config
git add content
git commit -m "My HEIA-FR home page"
git push -u origin master

vous devriez voir quelque chose comme ça:

Enumerating objects: 891, done.
Counting objects: 100% (891/891), done.
Delta compression using up to 8 threads
Compressing objects: 100% (421/421), done.
Writing objects: 100% (891/891), 1023.15 KiB | 63.95 MiB/s, done.
Total 891 (delta 280), reused 891 (delta 280)
remote: Resolving deltas: 100% (280/280), done.
To gitlab.forge.hefr.ch:jacques_supcik/personal-home-page.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

Nous y sommes presque. Il nous reste juste à configurer le “CI/CD” de gitlab pour qu’il construise notre site et qu’il le déploie comme “Gitlab Page”. Pour ça il suffit d’ajouter le fichier .gitlab-ci.yml avec le contenu suivant:

image:
  name: heiafr/hugo-builder:latest
  entrypoint: [""]

pages:
  variables:
    GIT_SUBMODULE_STRATEGY: recursive
  script:
    - /usr/local/bin/hugo
  artifacts:
    paths:
      - public
  only:
  - master

et de republier votre code:

git add .gitlab-ci.yml
git commit -m "Add page builder"
git push origin master

Vérifiez que la compilation de votre site se soit bien passée:

Et que la “Gitlab Page” soit bien configurée:

Si vous allez sur le lien indiqué, vous serez probablement déçu du résultat qui ne ressemble pas à ce que vous attendiez… C’est parce que l’URL n’est pas celle que vous avez configuré dans le fichier _default/config.toml !

Il faut donc maintenant configurer le DNS de l’école pour relier l’URL initialement choisie (par exemple https://jacques.supcik.isc.heia-fr.ch/) avec votre page fraichement publiée.

Si vous ne savez pas comment faire, ou si vous n’avez pas les permissions nécessaires pour le faire, demandez à Jacques Supcik ou à François Buntschu et nous nous ferons un plaisir de configurer le DNS pour vous.

Cette opération ne doit se faire qu’une seule fois et vous pourez ensuite modifier votre site sans devoir repasser par cette étape.

Voilà, votre page est prête et vous pouvez la lier à votre profile sur https://people.hes-so.ch/ :

Pour mettre à jour votre site perso, il vous suffit d’éditer les pages et de “pousser” sur gitlab:

git add ...
git commit ...
git push origin master

et le CI/CD de gitlab se charge du reste. Quelques minutes plus tard votre site sera mis à jour avec le nouveau contenu.

Happy Coding! Et n’hésitez pas à me contacter si vous avez besoin d’aide.

Jacques Supcik
Jacques Supcik
Professor of Computer Science and Communication Systems

My research interests include embedded systems, operating systems and programming languages.

comments powered by Disqus