Skapa din egen portfolio-sida

By . Latest revision .

Du skall sätta samman en portfolio-sida till kursen design. För att göra det skall du använda en förberedd kopia av ramverket Pico med innehåll anpassat till kursen design.

Du behöver installera din portfolio, fylla den med innehåll och sedan lägga till egen style med hjälp utav CSS.

Du skall också skapa ett Git-repo av din portfolio-sida och ladda upp det till Github.

#Förkunskaper

Du har en labbmiljö som motsvarar labbmiljön för kursen design.

#Introduktion och förberedelse

Gör följande steg för att förbereda dig inför uppgiften.

Kopiera från example/portfolio

Det finns en förberedd installation som är specifik för kursen design och dess portfolio-sida. Kopiera den och installera det som behövs med composer

# Stå i rooten av kursrepot
rsync -ravd example/portfolio/ me/portfolio/
cd me/portfolio
composer install

Nu kan du öppna en webbläsare och peka mot katalogen me/portfolio. Får du problem eller felmeddelanden så hojta till i chatten så hjälper vi dig den sista biten.

#Publicera till studentservern

För att din portfolio ska fungera på studentservern så behöver du uppdatera två rader i me/portfolio/.htaccess, annars får du 404 på dina länkar och 500 på bilderna.

I följande stycke:

# Rewrite 1 - For request via www.student.bth.se
RewriteCond %{HTTP_HOST} ^www\.student\.bth\.se$ [NC]
RewriteRule ^image/(.*)$ /~mosstud/dbwebb-kurser/design/me/portfolio/assets/cimage/img.php?src=$1 [QSA,NC,L]

RewriteCond %{HTTP_HOST} ^www\.student\.bth\.se$ [NC]
RewriteRule (.*) /~mosstud/dbwebb-kurser/design/me/portfolio/index.php/$1 [NC,L]

Så ska ni byta ut mosstud till ert egna studentakronym (ex. abcd20).

Därefter kan ni publicera till studentservern för att se att allt fungerar:

dbwebb publish me

#Git

Gör ett git-repo av alla filer i katalogen.

# Stå i me/portfolio
git init
git add .

Nu har du ett repo, ett repository eller source code repository och du har lagt till alla filerna i katalogen så de är en del av repot.

Informationen om själva repot lagras i den dolda katalogen .git. Om du behöver starta om så kan du ta bort den katalogen. Den återskapas när du kör git init igen.

ls -la .git

Du kan kontrollera statusen på ditt nyskapade Git repo genom att köra:

git status

Kommandot visar dig statusen för ditt repo och berättar vilka filer som ändrats och som är och inte är commit:ade.

För att “skriva till repot”, eller göra en commit på de ändringar som gjorts, så utför du en commit.

git commit -m "Här skriver du ett bra commit meddelande"

Eventuellt kommer Git be dig att ange din epost och namn för att kunna identifiera dig som den som gör commit:sen.

git config user.email "user@dbwebb.se"
git config user.name "Niklas Andersson"

Nu är alla filerna tillagda till ditt repo.

#Historik

Git som versionshanteringssystem kommer ihåg den historik som du committat till repo. Den minns varje commit och vid behov kan man se exakt den kodversionen som gällde för en viss commit.

För att göra det enkelt att se sin egen commithistorik så lägger vi till två alias som visar en lista över alla commits, commit-meddelandet och tidpunkten.

Kör följande två kommandon i din terminal.

git config --global alias.hist 'log --all --decorate --pretty=format:"%h %ad | %s%d [%an]" --graph --date=short'
git config --global alias.tree "log --graph --abbrev-commit --decorate --date=relative --format=format:'%C(bold blue)%h%C(reset) - %C(bold green)(%ar)%C(reset) %C(white)%s%C(reset) %C(dim white)- %an%C(reset)%C(auto)%d%C(reset)' --all"

Du har nu två alias som du kan använda för att visa din commit-historik.

git hist
git tree

Du får fram en lista av dina commits, den senaste visas överst.

#Github

Gå till GitHub och skapa ett nytt repository dit du kan ladda upp git-repot.

Ladda upp ditt git-repo till GitHub (byt ut git@github.com:dbwebb-se/design-v3.git mot länken till ditt egna repo).

git remote add origin git@github.com:dbwebb-se/design-v3.git
git push -u origin master

Använd SSH-nycklar för att identifiera dig, det blir enklare för dig att slippa behöva skriva in lösenord varje gång du ska ladda upp ditt repo.

Får du problem med SSH-nycklarna så pröva igen, GitHub själva har en bra stegvis guide på hur man kan göra.

När det är klart har du publicerat din portfolio på GitHub.

#Bekanta dig

Bekanta dig med strukturen för din portfolio-katalog och se vad som finns där.

Du kan följa med i videon nedan för att se hur man kan:

  • Uppdatera startsidan
  • Lägg till ny sida
  • Lägg till under-sidor (subpages)
  • Modifiera HTML-strukturen på sidan
  • Redigera flash-bilden
  • Hur du lägger till en bild på sidan

#Krav

  1. Förstasidan portfolio/content/index.md skall innehålla en hälsning/presentation av/om dig tillsammans med minst en bild som representerar dig.

  2. Skapa en about.md där du skriver ett kort stycke om kursen tillsammans med en bild som du känner representerar din tanke kring design.

    • På din about.md ska du ha en länk till kursens Github-repo.

    • På din about.md ska du ha en länk till ditt egna Github-repo.

  3. Byt ut flash-bilden som finns på samtliga sidor.

  4. Skapa en report/kmom01.md där du påbörjar ett utkast till din redovisningstext för kursmomentet.

  5. Skapa ditt eget tema .

  6. I din portfolio-mapp (me/portfolio/), skapa en fil som heter github.txt som innehåller enbart länken till ditt Github-repo (ex: https://github.com/dbwebb-se/design-v3)

  7. Publicera dina filer till studentservern, dbwebb publish me, och kontrollera att allt fungerar som det ska.

  8. Commit:a dina ändringar .

  9. Push:a repot till GitHub.

#Tips från coachen

Gör små commits och gör dem ofta, när du väl har din bas. Använd tydliga commit-meddelanden så historiken ser bra ut, det är en bra övning inför projektkurserna och arbetslivet.

Lycka till och hojta till i chatt om du behöver hjälp!

#Revision history

  • 2020-08-26: (A, nik) Draft

Document source.

Category: kurs/design-v3.