Detta repo innehåller källkod för info/uppgiftssidan för Uppsala universitets Introduktion till datorer 2016.
Hemsidan är byggd med den statiska webbside-generatorn Hugo.

• Ruby (För att kunna installera SCSS/SASS)
• SCSS/SASS via terminal (Specifikt SASS's SCSS-syntax för att generera sidans CSS)
• Hugo (Själva sidgeneratorn)

• Unix-system (Det medföljer bash-script för att enkelt skapa nya sektioner bl.a.)
• GNU Make (För att lätt bygga systemet via ett kommando)

För hur man skapar en ny modul (sektion), SE HÄR.

Det finns ett fåtal makeregler, men främst används de tre förstnämnda.

make

Bygger CSS och HTML till mappen public.

make clean

Rensar den byggda webbsidan.

make section

Initierar shell-scriptet createsection.sh, vilken guidar dig genom skapandet av en ny modul/sektion. Både markdowns för infosida och uppgiftssida samt datafil för modulen kommer skapas. Existerande filer bör inte skrivas över, men var försiktig.

Namn på sektion måste vara lowercase alphanumeric och samtliga ord skall bindas med dash (-). T.ex. linux-plus.

make server

Startar en hugo-server (obs! utan att rendera/bygga drafts). Se DevInfo/Bygg och kontrollera sidan för mer info.

make draft_server

Startar en hugo-server som även bygger/renderar drafts. Se DevInfo/Bygg och kontrollera sidan för mer info.

make css

Bygger CSS-filen från SASS och lägger denna under /themes/introit/css/style.css.
Måste köras innan make html för att CSS:en skall medfölja.

make html

Bygger webbsidan till mappen public.

Nedan följer fil- och mappstrukturen för hugo-projektet.

Detta är konfigurationsfilen för webbsidan. Den innehåller bl.a. basurl, sidtitel, m.m.
De viktiga fälten är:

Filen ser ut som följer:

baseurl = "http://www.it.uu.se/education/course/homepage/introdat/ht16/"
languageCode = "sv-se"
title = "IntroIT 2016"
theme="introit16"

# Build settings
builddrafts = false
canonifyurls = true
disablerss = true

# Parameters
[Params]
quote = "Någon smörig enradare om UU:s datasystem"
email = "[email protected]"
banner = "images/banner.jpg"
logo = "images/logo.jpg"

Mer eller mindre mallar för när man genererar nya sidor/posts. Huvudsakligen används archtypes från sidans tema, men troligtvis kan dessa overridas mha. archtypes i denna mapp. Se https://gohugo.io/content/archetypes/ för mer info.

Denna mapp innehåller samtliga markdown-filer vilka utgör innehållssidorna som genereras. Detta innefattar t.ex. inte startsidan som listar modulerna då den genereras beroende på vilka sektioner som finns.

Strukturen för markdown-filerna för introduktion till datorer 2016 för en modul är:

content
├── modulnamn.md            // <-- http://site.com/modulnamn/
└── modulnamn 
    └── uppgifter.md        // <-- http://site.com/modulnamn/uppgifter/

Se sektionen "skapa ny modul" nedan för hur du enkelt kan skapa samtliga filer som krävs.

Markdownfiler placerade direkt under content kommer skapas som HTML-fil direkt under bas-adressen. T.ex. skulle hello.md för basadressen http://mysite.dom/ skapas som http://mysite.dom/hello/.

Mappar skapade under content tolkas som sektioner under vilka man kan lägga ytterligare mappar (för underkategorier) eller markdownfiler för att skapa sidor. T.ex. länkas content/mysection/world.md med basurl http://mysite.dom/ som http://mysite.dom/mysection/world/

Mappen data tillåter att man skapar datafiler som kan användas vid generering av hemsidan. Denna webbsida använder datafiler för att spara metadata om modulerna för när de skall visas på startsidan. Metadata för en modul sparas under:

data
└── modules 
    └── modulnamn.toml

Dessa innehåller titel och tagline för modulen, vilket korresponderar mot titel- och undertitel i modulkortet som visas på startsidan. Exempel på en sådan datafil är:

title = "Min modultitel"
tagline = "En underbar modul att läsa"

Se sektionen "skapa ny modul" nedan för hur du enkelt kan skapa samtliga filer som krävs.

För mer information om datafiler i hugo, se https://gohugo.io/extras/datafiles/.

Används ej då samtliga layoutfiler laddas från temat. Troligtvis kan layoutfiler från temat overridas genom att läggas in här.

Layoutfiler är de filer som markdown- och annan data placeras i för att generera HTML-filerna för webbsidan.

Här läggs statisk data för hemsidan som inte är direkt kopplad till temat/mallen. Exempel på statiska filer är bilder som skall läggas in i artiklarna. Helt enkelt alla resurser till modulerna som inte är faktiska texten.

static
├── images           // Bilder till moduler/artiklar
|   └── icons       // Ikoner till modulerna (ex. linux-plus.png) kan läggas till/overridas
└── res              // Resurser till moduler (ex. zip-filer och annat nedladdningsbart)

För bilder kommer då sökvägen bli http://site.com/images/myimage.jpg och resurser http://site.com/res/myarchive.zip.

Denna mapp innehåller temat/mallen för hemsidan. Strukturen i denna är nästintill likadan som de ovan nämnda delarna, därav kommer delar av temat referera till ovanstående sektioner.

Innehåller archtype för markdownfiler och datafiler (.toml). Se archetypes ovan för mer info.

Här finns samtliga layout-filer som används för att generera HTML-sidorna.

Denna används för att generera startsidan (modulkorten).

Dessa layouter används vid generering av infosidorna (främst single.html).

Innehåller layouter för de gemensamma sidhuvud- och sidfotsdelarna i sidorna. Javascript är inkluderat via footer.html.

Används för att definiera s.k. shortcodes för Hugo. Dessa används för att ex. lägga in figurer och liknande. Det finns en del fördefinierade i Hugo och mer info om dessa finns på https://gohugo.io/extras/shortcodes/.

Exempel på en shortcode är att inkludera en bild i en sida:

{{< figure src="images/example.jpg" title="Exempelfigur med caption" >}}

All statisk data för temat/mallen finns i denna mapp.

Här sparas all genererad CSS. Ändra ingen CSS i denna mapp, alla stiländringar skall ske i SCSS/style.scss.

Här finns alla grundläggande bilder för temat/mallen.

Här finns alla javascript som används av temat/mallen. I filen introit.js finns den kod som skrivits specifikt för hemsidan.

Här finns den sass/scss-fil, style.scss, som används för att generera CSS för hemsidan. Samtlig styling av hemsidan finns i filen style.scss

För att manuellt bygga CSS-filen (aka. inte använda make-reglerna) kan följande kommando användas om man står i rotmappen:

scss -t compressed themes/introit16/static/scss/style.scss themes/introit16/static/css/style.css