2020-06-29
För ett antal år sedan byggde jag min personliga webbplats/portfolio med hjälp av Jekyll. Med hjälp av Jekyll kunde jag skapa en enklare statiskt generad webbplats - där jag kunde skriva enklare artiklar i markdown.
Åren gick och jag uppdaterade sporadiskt denna webbplats med lite design-tweaks och nya artiklar. Nu, år 2020 ser landskapet annorlunda ut när det gäller verktyg för att generera statiska webbplatser och jag kände att det var dags för en förändring.
Men varför byta ut något som "funkar? Vad var det för fel på min setup med Jekyll?
Tja...det fanns väl en del anledningar till att jag ansåg att det var dags för en förändring och jag tänkte ta upp några av dom:
När jag byggde sajten var jag väldigt inne på lekfull design. Själva startsidan var uppdelad i olika sektioner som alla i stort sätt hade olika bakgrundsfärger och textfärger. Avsaknaden av konsekvens i design gjorde sajten svårjobbad, rent designmässigt.
CSS stod för hela 80% (JavaScript stod för 1.3%) av repot på GitHub och detta gjorde det svårt att vidareutveckla och underhålla sajten, även om allt var skrivet med SCSS och inte ren CSS.
Mycket av den styling som fanns var som sagt scoped till olika sektioner, via css selektorer på olika classer:
section.hero-content {
background: pink;
color: red;
h2 {
color: blue;
font-size: 18px;
}
}
section.about-content {
background: yellow;
color: red;
h2 {
color: green;
font-size: 22px;
}
}
Detta gjorde att varje sektion var lite väl enkapsulerad och för lite stilregler var generella då typsnitt och så vidare ibland levde sitt egna liv inom varje sektion.
Då jag byggde sajten innan jag fick mitt första jobb inom branschen ville jag dessutom ha ett portfolio som stack ut i mängden och var väldesignat, för att på något sätt kompensera arbetslivserfarenhet inom yrket.
I och med den här flytten till Next.js är läget däremot annorlunda. Jag behöver inte denna sajt för att "ta mig in i branschen" och erfarenheten av att försöka underhålla tidigare design fick mig att istället välja en mer avskalad approach, som är lättare att underhålla.
I dag när man bygger modernare frontends använder man kanske React, Angular eller Vue för att bygga återanvändbara komponenter.
Något sådant komponenttänk fanns inte i strukturen för mitt portfolio direkt. Eller jo... till viss del kunde man skapa "komponenter" med Jekyll i och med html templates och scopa css till dem.
<!-- Assign sorted order for portfolio projects -->
{% assign sorted_portfolio = site.projects | sort:"order" %}
<!-- loop through sorted portfolio items -->
{% for portfolio in sorted_portfolio %}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div id="{{ portfolio.title | slugify }}" class="card">
<div class="row">{% include _portfolioCard.html %}</div>
</div>
</div>
</div>
{% endfor %}
Sådär loopads portfolio projekt igenom och en _portfolioCard.html template agerade komponent.
Lägg märke till rad 7, <div id="{{ portfolio.title | slugify }}" class="card">. Klassen "card" sattes på föräldern och utifrån förälderns css-klass sattes styling.
Detta innebar att skulle man inkludera templaten med {% include _portfolioCard.html %} utanför ett förälder-element med den klassen hade all styling gått förlorad. Komponenten var inte kopplad med sin behövda styling.
_portfolioCard.html såg i sin tur ut såhär:
<!-- Card template for portfolio items -->
<!-- Different left or right layout depending on the front matter -->
<div class="col-md-6 {% if portfolio.card-layout == 'right' %}col-md-push-6{% endif %}">
<a href="{{ portfolio.url | relative_url }}">
<img class="text-center" src="{{ portfolio.thumbnail }}" alt="Bild på {{ portfolio.title }}">
</a>
</div>
<div class="col-md-6 {% if portfolio.card-layout == 'right' %}col-md-pull-6{% endif %}">
<a class="title-link" href="{{ portfolio.url | relative_url }}">{{ portfolio.title | escape }}</a>
<p>{{ portfolio.desc }}</p>
{% for tag in portfolio.tags %}
<span class="tag">{{ tag }}</span>
{% endfor %}
<div class="links">
<a href="{{ portfolio.url | relative_url }}">Mer info</a>
{% if portfolio.website %}
<a target="_blank" href="{{ portfolio.website }}">Besök</a>
{% endif %}
</div>
</div>
Men man kunde aldrig bli lika flexibel med html template komponenter såsom man kan vara med React och exempelvis Styled Components.
Oj oj oj. Utvecklingsmiljön började kännas alldeles för gammal. Detta upptäckte jag en dag när jag skulle göra lite JavaScriptändringar på sajten.
En ganska gammal version av Gulp användes för att slå ihop och minifera den lilla JavaScript som fanns. Denna version lirade inte alls med node versioner > 10.
Att uppdatera Gulp kändes inte som ett alternativ då syntaxen var helt förändrad i nyare versioner. Jag var alltså något låst i för gammal tooling och hela utvecklingsmiljön kändes bara begränsande.
Det var alltså dags att hitta alternativa lösningar till Jekyll. Jag hade följande checklista som utgångspunkt
Jag insåg rätt tidigt att jag ville bygga mitt nya portfolio med hjälp av Next.js. Detta för att det är Reactbaserat, har bra TypeScript support, stöd för statisk generering och innehåll i form av markdown.
Dessutom möjligör vercel zero-config deployments för Next.js webbapplikationer.
Egentligen tog det ju inte bara tre dagar att byta ut mitt gamla portfolio, om man räknar med tid till research och design av mockups i Figma. Däremot tog det bara tre dagar från det att jag skrev första kodraden.
Man skulle kunna dela upp hela processen i tre, rätt så vanliga delar: research, design och implementation.
Som tidigare nämnt så hade jag bestämt mig för Next.js. Däremot fanns det ju fortfarande en del frågetecken såsom: Hur ska jag generera innehåll utifrån markdown-filer och vilken väg ska jag gå för styling?
Jag tänker inte rabbla upp alla npm paket som installerades, vill man ha mer info om sådan är det bara att kika i readmen eller tillhörande package.json för repot.
Jag visste från början att jag ville ha en mer avskalad design, med fokus på innehållet. Jag visste även att jag ville ha ett ljust och ett mörkt tema.
Utifrån de två punkterna skissade jag på en mobile-first design för sajten i Figma, bestämde layout för startsidan, spikade färger och så vidare.
Nu kommer vi till "tre dagars" historien. I och med att jag i princip hade allting klart för mig, vilka npm paket jag behövde installera, hur designen skulle se ut och så vidare blev det inte speciellt mycket funderingar under själva utvecklingsfasen.
Jag använde create-next-app för att generera en bra startpunkt och därefter var det bara börja koda.
npx create-next-app --example with-typescript-styled-components
En lördag-söndag-måndagskväll senare och denna sajt var deployad via Vercel. Alla ompekningar var gjorda och www.danielvernberg.se fick sig ett ansiktslyft både utvändigt och invändigt.