Katalogstruktur

Du skapar en katalogstruktur som du kan jobba i på följande vis.

Öppna din terminal och gå till ditt kursrepo.

# Ställ dig i roten av kursrepot

# Skapa katalogen där webbsidor skall sparas
mkdir public

# Gå in i den katalogen
cd public

# Visa de filer som finns i katalogen, det bör vara tomt inledningsvis
ls -al

Tanken är att katalogen public/ är roten till webb-katalogen, här finns alla filer som normalt behövs för att bygga vår webbplats.

Låt oss skapa ett par kataloger för att ge en grundstruktur till webbplatsen.

mkdir img
mkdir css
mkdir js

Nu är vi redo att skapa de filer som behövs för vår webbplats, det är html-filer för webbsidorna, en stylesheet för struktur och utseende och fil för js-kod för dynamiskt beteende.

FIlerna skapas med kommandot touch som skapar en tom fil.

# Skapa filer till webbsidor
touch me.html
touch about.html
touch report.html

# Skapa en stylesheet
touch css/style.css

# Skapa en js-fil
touch js/hello.js

Innan vi är helt klara så laddar vi hem ett par bilder som kan användas när vi bygger webbsidan. Använd dessa bilder till att börja med och ersätt dem senare med dina egna varianter av bilder.

curl -so img/leaf.png https://dbwebb.se/img/theme/leaf_64x64.png
curl -so img/me.png https://dbwebb.se/img/prata-med-ankan.png
curl -so img/desktop.png https://dbwebb.se/img/mos-desktop-kaprifolen.jpg
curl -so favicon.ico https://dbwebb.se/favicon.ico

När vi är klara så ser strukturen ut så här. Du kan själv kolla din egen katalogstruktur via kommandot ls -lR eller kommandot tree.

.
└── public
    ├── about.html
    ├── css
    │   └── style.css
    ├── favicon.ico
    ├── img
    │   ├── desktop.png
    │   ├── leaf.png
    │   └── me.png
    ├── js
    │   └── hello.js
    ├── kmom01
    │   └── me.html
    ├── me.html
    └── report.html

Vi har nu en grundstruktur för vår webbplats.

Starta din texteditor utifrån roten av kursrepot. Jag använder Visual Studio Code som jag kan starta direkt från terminalen och punkten säger att editorn skall visa innehållet i den katalog där jag befinner mig.

# Gå till roten av kursrepot, en nivå upp i katalogstrukturen
cd ..

# Starta texteditorn
code .

Så här ser det ut för mig när jag tittar på resultatet i texteditorn.

Image description — Bild: Strukturen för min webbplats som den ser ut i texteditorn vscode.

Vi fortsätter med att skapa en första webbsida.