Putina istorie

Dupa ani de zile petrecute prin chirii la diverse platforme de social media, microblogging, image sharing sa. m-am hotarat sa imi construiesc un locsor al meu, asa cum isi construieste (sau isi cumpara) orice om la frumoasa varsta de 30 de ani. Cum sunt putin versat in ale web-development-ului, m-am decis sa incerc ceva nou, ceva ce n-am mai incercat si astfel sa ma "autodepasesc".

Pentru ca am o oarecare experienta cu limbajul de programare PHP, initial am vrut sa dezvolt acest website pe o platforma ce foloseste acest limbaj (Wordpress, OctoberCMS etc.), dar nu am ales aceasta ruta pentru ca mi-am propus sa folosesc aceasta oportunitate si pentru a invata ceva tehnologii "la moda", pe care ulterior sa le folosesc si in alte proiecte ๐Ÿ˜€.

Ce criterii am urmarit pentru a imi alge "stack-ul" potrivit:

  1. 100% free si open-source;
  2. High speed;
  3. Optiune de self-hosting (exclus SaaS-uri);
  4. Cat mai sigur posibil.

Desigur ca sunt o multime de alte criterii pe care nu le-am enumerat, dar pe care le-am tinut in minte.

Acest domeniu l-am cumparat undeva la inceputul anului 2020, din motive explicate mai sus, iar din lipsa de timp si inspiratie n-am reusit sa pun ceva pe el pana azi 15 mai 2020. Am incercat diverse platforme de publishing si CMS (Ghost, Strapi etc.), dar nu m-a convins nici una dintre ele, cumva la fiecare am gasit cate o chichita care ma deranja.

The JAMstack

Dupa nenumarate ore pierdute cu instalarea si testarea de CMS-uri am gasit un clip pe Youtube despre GatsbyJS - Static Site Generator, adica un tool/framework care iti preia continutul din o gramada de surse (Wordpress, Drupal, Contentful etc. chiar si Google Sheets) si il foloseste pentru a genera fisiere statice HTML, CSS si JS pe care le poti gazdui ulterior oriunde vrei.

La inceput mi s-a parut putin suspect, sa nu ai tu macar putina "dinamica" intr-un website "modern"? Fugi ba de aici!

Da, suna ca si cum as construii un website in anul 2000 doar ca tehnologiile si metodele pe care le folosesc sunt din 2020.

Doar ca pe masura ce am studiat si analizat mai bine problema am ajuns la concluzia ca pentru un website simplu nu este nevoie de nimic mai mult.

OK! Deci m-am decis sa construiesc acest website folosind asa numitul JAMstack, un acronim pentru JavaScript, APIs si Markup, mai exact se refera la o colectie de tehnologii si conventii care iti permit sa construiesti website-uri care nu sunt dependente de un "webserver" pentru a fi servite utilizatorilor.

Stiu, stiu, nu e ceva chiar asa nou vor spune haterii, iar cu siguranta ai folosit cel putin odata un website contruit folosind aceste tehnologii, dar pentru mine este ceva nou si pot spune ca n-am avut nici o experienta in a le folosii.

Gridsome the Vue.js JAMstack framework

Mai sus am discutat foarte putin despre JAMstack si GatsbyJS, problema mea este ca cel din urma este contruit la randul sau folosind ReactJS, iar eu nu am absolut nici o experienta cu acest framework, implicit nici un chef real de a il invata.

Solutia pe care am gasit-o este sa folosesc Gridsome, un framework identic ca functionalitate cu GatsbyJS dar scris in VueJS, un framework pe care il cunosc intr-o oarecare masura si pe care il mai folosesc si intr-un alt proiect personal.

gridsome website screeenshot

Gridsome ofera din start o groaza de facilitati de la plugin-uri pentru preluarea continutului din aproape orice tip de API posibil, pana la Starter Projects, menite sa iti ofere o baza pentru a dezvolta website-ul. Eu am ales sa incep acest website folosind un starter numit Gridsome Casper V3 Starter, care out-of-the-box cu o tema HTML/CSS numita Casper si care este portata de la Ghost CMS.

Pentru ca nu sunt cel mai bun designer web am ales sa folosesc ceva gata facut, astfel incat implementarea sa nu dureze o vesnicie dar in egala masura sa arate bine si modern.

Drept cireasa de pe tort, tot styling-ul este construit in TailwindCSS, un framework CSS modern si foarte usor de folosit si modificat.

Recapitulare

Stack-ul pentru generarea fisierelor statice este:

  • Gridsome - drept Static Site Generator
  • Markdown - formatul de scriere a continutului
  • Tailwind CSS - pentru styling

Uni dintre voi o sa observe o problema, si anume lipsa unei baze de date sau a unui "backend" (consola de admin), motivul este ca nu exista nici baza de date (Mysql sau altceva), nici backend. Tot continutul este scris sub forma unor fisiere intr-un editor oarecare (VSCode) in format Markdown, iar ulterior ele sunt folosite de Gridsome pentru a genera fisierele statice HTML, CSS si JS.

gridsome website screeenshot

La fel de bine puteam sa folosesc Wordpress sau alt CMS pentru a scrie continutul, iar ulterior sa folosesc unul din plugin-urile lui Gridsome pentru a prelua acel continut si a genera fisierele statice, dar pentru mine abordarea aceasta este mai simpla si mai eleganta, tinand cont ca nu intentionez sa public mii de articole pe luna.

The power of GIT

Pana acum am vorbit doar despre cum voi obtine acele fisiere statice HTML, CSS si JS, dar n-am pomenit nimic despre felul in care le voi "servi" public, pentru ca toata lumea sa imi poata admira calitatile mele "stralucite" de blogger.

Pentru a automatiza acest task de publicare a continutului, am de gand sa folosesc GIT in combinatie cu Gitlab (stiu am zis ca nu o sa folosesc platforme SaaS, dar hear me out). Gitlab este deja o platforma foarte cunoscuta (asemenea Github) si nu voi intra in detalii despre ce ofera.

Am ales Gitlab pentru ca au o functionalitate foarte interesanta numita CI/CD (Continous integration / Continous delivery) pe care o sa o folosesc la generarea fisierelor statice si pentru servirea website-ului, dar si pentru ca iti poti rula o instanta a Gitlab-ului pe propriul server.

Gitlab-runner at your service

Cum spuneam mai sus, ma folosesc de functionalitatea Gitlab CI/CD pentru a genera fisierele statice la fiecare commit si push, fiecare reprezentand actiunea de save si respectiv publish pe o platforma traditionala CMS.

Pentru a realiza aceasta functionalitate, folosesc un VPS pe care rulez tool-ul Gitlab Runner pentru a build-ui si servi fisierele statice.

O sa scriu un articol mai in detaliu pentru a explica cum am facut acest setup pe un VPS oarecare.

Sunt o multime de servicii (Netlify, Zeit etc.) care fac tot acest proces de depolyment foarte usor si seamless, problema este ca mie imi place sa imi complic viata pe de o parte, dar si pentru ca imi place sa am control desavarsit asupra software-ului meu.

Good old Nginx

Desi am spus ca un JAMstack nu foloseste un "webserver", m-am referit desigur la definitia oficiala prezenta pe pagina proiectului, dar intr-un final fisierele statice vor fi servite ca atare de catre un webserver numit Nginx care ruleaza pe acelasi VPS ca si gitlab-runner.

Concluzie

De obicei primul program pe care il scrii in orice limbaj de programare contine doar un simplu "Hello world", eu am ales sa scormonesc in dedesupturile tehnologiei pentru a explica cum am facut sa apara pe ecranele voastre acest prim program.

Daca ai ajuns pana aici, iti multumesc pentru atentie si sper sa pot scrie mai departe si alte articole pe acest website stralucit.