Hemsida med Static Site Generation
Det hade varit bra med ett ställe att samla projekt och artiklar, så jag vill göra mig en enkel hemsida.
Vad är, och varför, SSG
Istället för att blåsa upp en hel MVC eller sätta igång en Wordpress tänker jag försöka hålla det light weight. Men att bara sätta ihop en helt statisk webbplats med HTML kan bli mer jobb i längden eftersom det är så bökigt när något behövs ändras eller läggas till.
Jag kom på idén om static site generation, för att sedan upptäcka att det redan fanns. När contentet ändras genererar vi hela sidan till en statisk hemsida med HTML/CSS/JS som kan serveras utan någon back-end som gruvar runt i databaser för varje person som klickar på en länk.
Det finns alltså en back-end, men det körs bara en gång, när hemsidan behövs ändras. Kanske den bara körs en enda gång!
Med SSG behövs inget system som måste vara igång förutom en http server. Det finns inget live CMS att ha logins till, och ingen databas över huvud taget så komplexiteten hålls minimal och säkerhetsbeskymmer är likså nästan obefintliga.
Hur det funkar
Jag tänker med python generera en hemsida från Markdown-filer, denna artikel ser ut såhär t.ex
## Hemsida med Static Site Generation
Det hade varit bra med ett ställe att samla projekt och artiklar, så jag vill göra mig en enkel hemsida.
### Vad är, och varför, SSG
Istället för att blåsa upp en hel MVC eller sätta igång en Wordpress tänker jag försöka hålla det light weight. Men att bara sätta ihop en helt statisk webbplats med HTML kan bli mer jobb i längden eftersom det är så bökigt när något behövs ändras eller läggas till.
Det finns ett python bibliotek som skapar html:en (såklart det finns) från sånhär markdown markdown2 . Jag har inte använt Bootstrap innan förr men vill testa det; så det blir CSS Frameworket. Med Bootstrap behöver man inte definera sin egen CSS, utan använder inbyggda stilar och komponenter som förenklar processen att skapa ett tilltalande och funktionellt gränssnitt. Så man slipper sitta och justera pixelvärdena på alla marginaler osv. Dessutom är det enkelt att göra en responisv design som passar mobiler och alla skärmstorlekar.
Sidan byggs upp av template filer, som innehåller html:en som är projektets grund, och sidorna fylls med innehåll från markdown-filer i content och pages . Alla filer i pages genererar sin egen sida och dyker upp som en länk i navbar:en på toppen av varje sida.
├── articles
│ ├── 2023_12_04_Hemsida.md
│ └── 2023_12_04_Test.md
├── content
│ └── intro.md
├── generate_html.py //huvudscriptet
├── out //Här kommer all färdig html
├── pages //dessa filer blir sidor i huvudmenyn
│ ├── kontakt.md
│ └── övrigt.md
└── templates //delar av sidor som återanvänds
├── intro.html
├── list_group_item_template.html
├── navbar.html
├── nav_item.html
└── template.html
efter att huvudscriptet är kört ser out foldern (den färdiga hemsidan) ut såhär:
out
├── art
│ ├── 2023_12_04_Hemsida.html
│ └── 2023_12_04_Test.html
├── artiklar.html
├── index.html
├── kontakt.html
└── övrigt.html
index.html som startsida och de andra sidorna i sina helheter som html dokument. Mycket html är duplicerat på varje sida, och det är också det som är poängen, iställer för att generera varje sida varje gång någon vill se den. Det är säkert en dålig idé att ha ett filnamn med ö, men det är ju 2023 så jag testar.
Utmaningar och Lösningar
Till denna artikel hade jag inte tidigare tänk på hur ett codeblock skulle se ut, men det skötte markdown. Sen ville jag applicera bootstrapstilar på alla
<pre>
element. Om jag bara hade vanlig CSS hade det inte varit något problem, men nu var jag alltså tvungen att i htmlen lägga till en CSS stil till varje
<pre>
element. Detta kommer jag behöva göra för varje stil som ska gälla över hela sidan som inte är ett vanligt värde i bootstrap.
def apply_styles(html):
soup = BeautifulSoup(html, "html.parser")
pre_tag_classes = [
"border",
"border-secondary",
"rounded",
"bg-secondary"
]
for pre_tag in soup.find_all('pre'):
pre_tag['class'] = pre_tag.get('class', []) + pre_tag_classes
return str(soup)
Slutet gott
I slutändan var det förvånandsvärt straight forward och utan komplikatoner. Det var givande att lära sig grunderna av bootstrap som jag är mycket imponerad av. Rent tekninskt var att få alla relativa länkar att stämma oavsett om de är i en folder osv var lite utmanande men det löste sig fint. Bilder har jag inte övervägt än men markdown verkar stödja det. Jag kommer ladda upp dem och referera dem i de relevant markdown filerna.
Med mindre än 200 rader python är resultat fungerande och modulär lösning som jag lätt kan lägga till sidor eller artiklar till utan att ändra kod eller ens skriva mer html.
Ta en titt på källkoden om du vill på min github