My personal website: joffreylagut.fr
web frontend javascript typescript astro tailwindcss github pages continuous deployment
Project sheet
| Label | Information |
|---|---|
| Demo | joffreylagut.fr |
| Development time | 7h (v1) ; 5h (v1.1) |
| Team | Solo project |
| Source code | Github |
Context
I wanted to have my own website to be able to share my thoughts and information regarding myself in a format that would allow me to do what I want without limitation.
Requirements
- Must be fast to load.
- Must be minimalistic.
- Avoid any backend and prefer plain markdown files that will survive all JavaScript frameworks and flavor of the decade programming language.
- Must use TailwindCSS. I don’t want to go back to the project in X months and have to play hide and seek with the CSS classes.
How was it built?
First of all, it is build using Astro, a(nother) frontent JavaScript framework that I am using as a static site generator. It has a lot of interesting features, with notably the concept of islands where you can declare part of your website as dynamically rendered by the client, using all other JavaScript frameworks like React, Vue etc. This choice allows me to write blog posts and projects sheets in markdown and have them transformed into plain HTML pages.
The design is thanks to the Astrofy theme already based on TailwindCSS. I created a new Astro project based on it, fixed the issues it had and tinkered it to fit my needs.
Last but not least, I added a continuous delivery workflow to built and deploy the website on my web hosting provided: Hostinger.
If you want to know more about its implementation, I wrote an article about it: Continous deployment on Hostinger using Github pages.
Technical information
| Category | Technologies |
|---|---|
| Frontend library | Astro |
| Base theme | Astrofy |
| Continuous delivery | Github Actions |
| Programming language | TypeScript / JavaScript |
| Source code | Github |
Versions
I’m only detailing bellow the two first iteration. To see the complete list, visit the Github releases pages.
v1.0.0
See Github release for the source code.
First iteration of the website.
- Index page
- Projects page
- One project post
- Blog page
- CV page
Identified issues to be fixed in next iteration:
- Tag pages not generated properly
- RSS feed not functional
v1.1.0
See Github release for the source code.
Fix issues previously identified and add small improvements.
- Fix tag pages generation
- Fix RSS feed
- Add continuous delivery.