Skapa en egen hemsida

Lär dig att skapa en egen hemsida snabbt och enkelt med NodeJS

Inledning

Detta är ett praktiskt exempel på hur du skapar en egen hemsida. Du kommer att lära dig grunderna i hur man kör en egen webbserver baserad på NodeJS. Detta är tänkt som en miniguide för att du skall komma igång. Förvänta dig ingen fancy hemsida med snöflingor och animerade tomtar. Detta är så grafiskt avbantat det bara kan bli. Men, låt inte utseendet på sidan göra dig lurad in i att tro att du inte kan bygga en stabil och snygg sida vid ett senare tillfälle.

Vi kommer att använda oss av Herokus molntjänst för hosting av sidan. Jag föredrar dem just nu tack vare deras användarvänlighet, skalbarhet och möjlighet till gratis hosting under etableringsfasen av sidan. Några nackdelar finns det såklart jämfört med andra molnbaserade tjänster men just nu är det favoriten. Den enklaste hostingen kostar ca $7 i månaden, denna har jag kört en hel del och kör fortfarande på några av mina affiliatehemsidor.

Vad är NodeJS?

NodeJS är en Javascript-baserad webbendlösning som gör det möjligt att programmera i Javascript även på backendsidan, vilket underlättar för dem som inte vill eller orkar lära sig fler språk än Javascript. Jag personligen, och många fler, förespråkar dock att man bör lära sig fler språk än ett av olika anledningar, mer om detta i ett framtida inlägg kanske. Hursomhelst, NodeJS är en fantastisk lösning för oss som vill bygga sidor snabbt, smidigt och stabilt.

Sätt upp en lokal NodeJS-server

Steg 1

Installera NodeJS genom att installera lämpligt installerpaket från deras hemsida: https://nodejs.org/en/download/

Tips: För enkelhetens skull så kan du välja någon av deras installers ("Windows Installer"/"macOS Installer"). Om du sitter på Linux så finns det säkerligen en smidig apt-get för just NodeJS.

Steg 2

Skapa en projektkatalog på din dator med två tomma filer som du döper till index.js och index.html, dessa kommer att utgöra kärnan i din applikation.

Steg 3

Öppna filen index.js och skriv in följande:

var express = require('express'); 
var path = require('path'); 
var app = express(); 
// Detta anger vilken lokal port på datorn som servern skall köras på, i detta fall är det port 5000 
app.set('port', (process.env.PORT || 5000)); 

// Detta hanterar alla anrop som kommer in till din förstasida 
// Den svarar användaren med att skicka htmlkoden som finns i index.html 

app.get('/', function(request, response) { 
response.sendFile(path.join(__dirname+'/index.html')); 
}); 

// Detta öppnar en lokal port på din dator som är angiven ovanför 
app.listen(app.get('port'), function() { 
console.log('NodeJS app is running on port', app.get('port')); 
}); 

Steg 4

Öppna filen index.html och skriv in följande:

<!doctype html>
<html>
<head>
</head>
<body>
Hello world!
</body>
</html>

Steg 5

Nu är det dags att installera de NPM-paket (NPM bör ha installerats när du installerade NodeJS, NPM är en pakethanterare) som applikationen är beroende av, dvs. express och path. Det gör vi enkelt genom att vi öppnar ett kommandofönster (CMD) och navigerar till den katalog där projektet ligger och kör följande kommandon:

npm install --save express
och
npm install --save path

Save-"flaggan" kommer att generera en fil som innehåller information om vilka paket applikationen är beroende av. Dvs. om du tar bort hela node_modules-katalogen så försvinner paketen i sig men informationen om vilka paket applikationen behöver finns kvar. Detta gör att man inte behöver skicka iväg hela projektet med tillhörande NPM-paket, utan bara informationen om vilka paket, så räcker det med att den som skall köra applikationen bara kör kommandot npm install för att få ner de paket som applikationen är beroende av.

Steg 6

Nu är det dags att köra applikationen! Detta gör du genom att skriva in följande kommando i terminalen:

node index.js

Steg 7

Öppna valfri webbläsare och navigera till följande address:

localhost:5000
Grattis, du har nu satt upp en lokal hemsida som du själv kommer åt.

Hosta servern

Innan du börjar

Se till att du har Git installerat. Du kan ladda hem Git här git-scm.

Se även till att installera Herokus CLI härifrån: heroku-cli

Git är ett versionhanteringssystem som underlättar programmerarens vardag något enormt.

Heroku CLI är ett gränssnitt för att kunna logga in emot Herokus server från kommandofönstret. Vi behöver det när vi skall ladda hem vårat projekt och börja koda.

Steg 1

Skapa en användare hos Heroku.

Steg 2

Skapa ett nytt projekt genom att klicka på New -> Create New App. Namnge applikationen något lämpligt, eller olämpligt, du bestämmer.

Steg 3

Klicka in på ditt projekt och navigera till Settings. Kopiera det genererade git-repot som finns under Info -> Heroku Git URL. Git-repot borde heta något i stil med https://git.heroku.com/ditt-projektnamn.git. Notera även att under Domain längre ner så finns din hemsidas address angiven, dvs. https://ditt-projektnamn.herokuapp.com. Mer om hur man pekar till sin egen domän i ett senare inlägg.

Steg 4

Öppna ett nytt kommandofönster och logga in hos Heroku genom att köra följande kommando:

heroku login
Ange dina Herokuanvändaruppgifter. Detta behöver bara göras första gången.

Steg 5

Navigera till den katalog där du vill att ditt git-repo skall ligga. Kör följande kommando för att få ner det genererade git-repot:

git clone https://git.heroku.com/ditt-projektnamn.git
Voila! Du har nu klonat ner ett tomt git-repo, det är helt i sin ordning.

Steg 6

Kopiera in din hemsida som du skapade tidigare till denna mapp.

Steg 7

Skapa en ny fil i din projektmapp som heter Procfile, utan någon filändelse. Klistra in följande och spara filen:

web: node index.js
Detta behövs för att Herokus server som du skickar koden till skall förstå vad som skall exekveras på servern.

Steg 8

När dina projektfiler finns i din projektmapp med tillhörande Procfile så är det dags att skicka upp koden till Herokus server. Detta gör vi genom klassisk git-manér:

git add .;
git commit -m "lämplig eller olämplig kommentar";
git push;
Det tar ca 1 minut för detta att gå igenom. Nu ligger koden uppe hos Heroku.

Steg 9

Navigera till din tillfälliga projektaddress som vi noterade tidigare, dvs. https://ditt-projektnamn.herokuapp.com. Du borde nu mötas av en hemsida där det står Hello World!.

Grattis, din hemsida är nu uppe!

Det tar ca 5 sekunder att ladda sidan första gången, detta kan du läsa mer om på Herokus hemsida. Om ingen ansluter till sidan på 30 minuter så stängs en "Dyno" av som driver sidan och man får vänta lite på att denna startar igen. Detta är bara i gratisläget. Om man går upp på Hobbynivå så stängs inte Dynon av.

Slutord

Vi har nu gått igenom hur man sätter upp en enkel lokal NodeJS-server samt hur man får denna att köras på Herokus servrar.

Mer om hur man bygger vidare från detta i ett senare inlägg.

Om du gillade inlägget, dela gärna!

Adress till artikeln

https://www.autokod.net/blog/skapa-en-egen-hemsida

2019-07-21