Att bygga sin egen hemsida

Jag kallar mig själv för en hobbyutvecklare för jag kan egentligen inte koda. Jag är ingen utvecklare. Jag programmerade i och för sig i Python och Matlab på KTH och har byggt lite macron i VBA och sådär på något internship, men jag är inte avancerad. Det jag gör och det jag tycker är kul nu för tiden är att “HTML-hacka” fram mina egna hemsidor. Med andra ord skriver jag lite HTML, CSS och Javascript. Jag googlar och testar mig fram (vilket i och för sig alla utvecklare brukar erkänna är det de egentligen håller på med 95 % av tiden). Jag klurade ut hur jag skulle bygga min egna hemsida 2016 tror jag och jag vill dela med mig av mitt tillvägagångssätt till andra - som inte är några utvecklare egentligen, precis som jag - men som också vill bygga egna hemsidor! För det är fantastisk roligt och givande. Du kanske vill bygga en företagshemsida, en bröllopshemsida, en personlig blogg eller en hemsida till din podcast - eller varför inte alltihop? Möjligheterna är oändliga när du väl har kommit över första tröskeln.

Hur som helst, det roligaste med att webbutveckla är att man får instant gratification. Du kan testa dig fram och vet direkt om det fungerar eller inte. Om jag kunde skruva tillbaka tiden så hade jag nog blivit utvecklare och gått mer mot IT tidigare i min karriär, men nu får jag leka runt med det på fritiden istället. Jag jobbar dock otroligt nära utveckling idag, men jag får inte koda lika mycket i mitt dagliga arbete som jag hade önskat.

Hur som helst, här kommer en kort sammanfattning av hur jag brukar gå tillväga när jag bygger mina hemsidor. Jag laddar först ned en gratis version av en redan existerande webbsida som ser hyfsat snygg ut och fungerar för mitt ändamål. Jag byter sedan ut lite grejer i koden i ett program som heter Sublime och laddar upp de fysiska filerna på Github och använder deras “Github pages”. Det är superenkelt och väldigt basic. Min man, som är fullstackutvecklare på riktigt, brukar skämta om att jag bygger hemsidor som man gjorde på 90-talet, men om jag tycker att det är kul och det fungerar - varför göra det mer komplicerat än det behöver vara?

För hosting använde jag tidigare Loopia, men har precis bytt till Gandi som är så mycket bättre och billigare. När det kommer till kostnad så är det här tillvägagångssättet - mitt egna hemmasnickrade tillvägagångssätt för hobbyutvecklare - i princip gratis. Det som kostar är att köpa och hosta din domän. Beroende på domän så är det några hundralappar per år. That’s it.

Exempel på hemsidor som jag har byggt

Här är filmer och länkar till sidor som jag har HTML-hackat fram helt själv. Jag har spelat in dem som en självbevarelsedrift och för att spara dem så som de ser ut just nu. De kommer kontinuerligt förändras (förhoppningsvis förbättras) beroende på hur mycket jag orkar underhålla dem, eller så kommer de att självdö. Vår bröllopshemsida kommer jag exempelvis nog inte förnya när domänen går ut om lite mindre än ett år så det är roligt att spela in en video och spara den.

Min egna personliga hemsida/blogg som du är inne på just nu (såhär ser den ut i skrivande stund - vem vet hur den kommer att se ut om ett år?) - annaleijon.se

Vår bröllopshemsida som jag har byggt (OBS! nu borttagen)

Vår företagshemsida - flowby.io

Hemsida till min podcast Techskaparna - techskaparna.se

Företagshemsida till vår mobilapp Filmis - filmis.app

Här kommer nu de fjorton stegen du behöver ta dig igenom för att HTML-hacka fram din egna hemsida supersnabbt.

Annas guide till hur du bygger din egna hemsida supersnabbt

Steg 1: Bestäm dig för en domän att köpa, vilken sedan kommer att bli din hemsida. Använd exempelvis domainr.com för att se vilka domäner som finns lediga. På domänadressen ska du sedan publicera din hemsida, men det kommer vi till lite längre fram.

Steg 2: Bestäm dig för vilken domänhost du ska använda dig av. Jag kan som sagt rekommendera Gandi, men det finns hur många som helst. Observera att det i samma veva kan vara bra att välja vilken mailhost du vill ha också (om du planerar att skaffa en tillhörande mailadress till din domän).

Steg 3: Via domänhosten köper du sedan domänen som du har valt och det brukar vara relativt straight forward. Du behöver först skaffa ett konto hos domänhosten och i inloggat läge kan du sedan köpa domäner. Det brukar ta några timmar innan köpet går igenom och du får tillgång till din domän.

Steg 4: Ladda ned och installera Sublime.

Steg 5: Hitta en gratis och öppet tillgänglig hemsidemall som du gillar och som du kan ladda ned samt använda fritt.

Steg 6: Extrahera sedan mappen och öppna den i Sublime där du kan påta omkring själv i koden.

Steg 7: Öppna HTML-filerna lokalt i webbläsaren genom att dubbeltrycka på dem. Där kan du se i realtid vad som händer när du ändrar grejer i koden i Sublime genom att refresh:a sidan.

Steg 8: Härja runt fritt och testa dig fram. Det är härligt så tillvida att det är oerhört enkelt att gå tillbaka och ändra saker du har gjort och du behöver ingen avancerad versionshantering eller devops-miljö. Det är ju bara du som kodar själv i din lokala miljö.

Steg 9: Du kan påta runt i koden hur länge som helst, men testa då och då att pusha koden till produktion - det vill säga göra en commit i Github, men skaffa först ett Github-konto.

Steg 10: Sätt upp en repository i Github och ladda upp din kod där. Drag and droppa dina filer in i rutan och välj att committa dem.

Steg 11: Aktivera sedan Github pages.

Om du inte ser detaljerna i bilderna så bra, högerklicka och öppna dem i en ny flik. Jag vill bevara hela bilden från Github för att visa hur ni ska navigera.

Steg 12: I DNS-editorn hos din domänhost kan du peka om din domän till ditt Github-konto och till din nya hemsida (se bilderna nedan). Mitt användarnamn på Github är Lionesse, men du ska givetvis skriva in ditt egna användarnamn. Innan och per automatik pekades nog din domän till en placeholder-hemsida som din domänhost skapat.

Steg 13: Se till att kryssa i HTTPS-encryption på Github pages. Det är standard numer överallt på webben. Webbläsare och Google kommer straffa dig om du inte har HTTPS aktiverat.

Steg 14: När du sedan ska ändra i din befintliga hemsida så laddar du helt sonika ned mappen från github, extraherar den och öppnar den i Sublime för att göra ändringar/tillägg i koden och laddar upp filerna i ditt repository igen på Github.

Välkommen till en underbar värld av hemsideskapande och HTML-hackande som är superrolig och som kommer ge dig massvis med instant gratification. Observera dock att du MÅSTE googla grejer. Det kommer nog inte fungera första gången du försöker, utan du måste googla och du får inte ge dig. Stackoverflow är ett jättebra forum där du kan hitta svar på det mesta. Att träna dig på att googla, och särskilt tech-grejer, är en investering väl värd att göra. Att vara bra på att googla är en extremt viktig egenskap. Stort lycka till!!

Jag tycker att det här ämnet är superspännande och tar jättegärna emot feedback på artikeln! Maila mig på: anna@annaleijon.com. Maila dock inte mig om hjälp med din hemsida, utan det får du googla fram själv ;)

Om du har det minsta intresse för tech och att bygga techprodukter och -företag vill jag rekommendera min podcast Techskaparna. Där diskuterar vi ofta de här ämnena och glöm inte bort att prenumerera på podden! Finns där poddar finns.

/Anna Leijon