Att skapa en webbplats är en seriös investering; du måste betala för varje steg i att bygga en webbplats.
Vill du skapa en gratis webbplats för personlig eller professionell utveckling? Här är ett sätt att designa din nästa webbplats med ett anpassat domännamn, livstids gratis värd och SSL-kryptering helt gratis. Oj! Vad mer kan du begära?
Det är enkelt att ha en webbplats avsevärt ökar dina tillväxtsiffror, och idag är det mer en investering än en lyx. Detta gäller inte bara för företag, utan även individer kan dra stor nytta av en personlig webbplats.
Oavsett om du registrerar ett domännamn, är värd för innehållet på din webbplats, bygger webbplatsen eller aktiverar SSL-kryptering, bör du vara redo att tömma dina fickor. För att öka smärtan är några av dessa utgifter återkommande och fortsätter för evigt.
Tänk om jag sa till dig att du kan skapa en gratis webbplats samtidigt som du gör alla de ovan nämnda avgörande stegen för att bygga en webbplats också gratis? Hur världsfrånvänd det än låter kan du göra allt detta gratis om du är student.
Om du är medveten om GitHub, kanske du känner till GitHub-sidor. Det är gratis att använda tjänsten som följer med varje GitHub-konto. GitHub Pages låter alla användare skapa en gratis webbplats och vara värd för den, men det finns en stor varning. Domännamnen på dessa gratis webbplatser slutar i huvudsak med github.io, vilket förstör din webbplats professionalism.
Innehållsförteckning
Vad är GitHub Student Developer Pack?
Färre användare kommer att ta din webbplats på allvar och att ha ett onödigt långt domännamn är aldrig en bra idé. Men Hej! Vi är inte här för att prata om förmånerna eller förbehållen med GitHub-sidor. Jag lovade ett sätt att låta dig skapa en gratis webbplats med det anpassade domännamnet, och så här kan du göra det.
GitHub erbjuder en chans att använda ett fantastiskt kit fyllt med praktiska onlineverktyg för varje student som är inskriven i en examen eller diplomkurs, känd som GitHub Student Developer Pack. Paketet innehåller proffsprenumerationer och häpnadsväckande rabatter på populära verktyg som Canva, Namecheap, Microsoft Azure, Discord, Name.com och StreamYard, bland en gazillion andra.
I den här artikeln kommer vi att använda Namecheap för att registrera en gratis anpassad domän och använda GitHub-sidor för att vara värd för vår webbplats. Vi kommer sedan att titta på sätt att designa och ladda upp dina HTML-, CSS- och JavaScript-filer till GitHub-sidor. Så småningom kommer vi även att aktivera SSL-kryptering för webbplatsen, men först och främst måste vi registrera oss för Student Developer Pack.
Hur ansöker jag om GitHub Student Developer Pack?
Processen att registrera sig för studentutvecklarpaketet handlar om att ha en e-postadress för studenter som beviljats av universitetet. En student-e-postadress slutar vanligtvis med ditt universitets domännamn, t.ex. [email protected] Det finns andra sätt att registrera sig för paketet, men de kräver mycket längre granskningstider än att använda en studentmail. Om du har din student-e-postadress redo, så här kan du registrera dig för paketet:
Steg 1: Gå till GitHub utbildning och klicka på alternativet Logga in.
Du kan logga in med dina referenser om du redan har paketet. Annars kan du följa stegen nedan.
Klicka på alternativet Skapa ett konto i inloggningsfönstret.
Steg 2: Registrera dig sedan med din student-e-post och skapa ett konto.
Steg 3: När du uppmanas med ”Vilken beskriver bäst din akademiska status?”, se till att välja Student.
Steg 4: Fyll nu de nödvändiga rutorna med information om din skolas namn och ditt syfte med att använda GitHub.
Steg 5: Slutligen, skicka in din ansökan med alternativet ”Skicka in din information”.
Du bör få ett bekräftelsemail angående utvecklarpaketet om din ansökan godkänns av GitHub. Processen tar vanligtvis några dagar, men tiden kan variera avsevärt under högtrafik.
Hur ansöker jag om GitHub Student Developer Pack utan student-e-post?
GitHub ger dig också möjligheten att ansöka om paketet med ett giltigt student-ID eller något annat bevis på din akademiska status. De enda förbehållen är den långa väntetiden och högre avslagsförhållande. Hur som helst, så här kan du ansöka om studentpaketet genom den här metoden:
Steg 1: Följ stegen ovan för att skapa ett konto via din personliga e-post.
Steg 2: Ladda nu upp beviset på din akademiska status med hjälp av kameraalternativet eller ladda upp fotona direkt till GitHub med knappen Ladda upp.
Steg 3: Fyll sedan i alla nödvändiga detaljer som skolans namn och syftet med att använda GitHub.
Steg 4: Skicka in din ansökan.
Hur registrerar du din anpassade domän med Namecheap?
Jag antar att du har fått igång ditt GitHub Education-konto. Följande steg innebär att du använder Namecheap för att registrera din kostnadsfria anpassade domän och vara värd för den via GitHub-sidor. Följ dessa steg för att registrera ditt föredragna domännamn:
Steg 1: Logga in på ditt GitHub Education-konto och gå till avsnittet Förmåner.
Du bör se ett Web Dev Kit och ett Virtual Event Kit.
Steg 2: Gå till Virtual Event Kit och scrolla ner för att hitta Namecheap.
GitHub erbjuder en 1-årig domännamnsregistrering på .me TLD, som du kan komma åt genom att klicka på alternativet Get Access.
Steg 3: Följande fönster kommer att be dig att auktorisera anslutningsbegäran från Namecheap till ditt GitHub-konto. Auktorisera Namecheap och fortsätt till nästa steg.
Du bör se en uppmaning som säger ”Vi har framgångsrikt verifierat ditt studentpaket med GitHub” efter framgångsrik auktorisering.
Steg 4: Hitta din föredragna domän i sökfältet och klicka på Sök.
Du bör se domännamnets tillgänglighet på nästa skärm. Om ditt domännamn är tillgängligt kan du fortsätta att köpa det gratis.
Steg 5: Gå till kassan med GitHub Education-e-postadressen och välj GitHub-sidor som din värdmetod medan du fortsätter.
Efter att framgångsrikt registrerat ditt anpassade domännamn och valt GitHub-sidorna som värd, bör Namecheap automatiskt skapa ett arkiv i ditt GitHub-konto. Det här förrådet är helt tomt och innehåller endast en README.md-fil.
Du kan komma åt detta förråd genom att logga in på ditt GitHub-konto och klicka på avsnittet ”Dina förråd”. GitHub Pages erbjuder inte visuella verktyg och förbyggda teman för din webbplats; du måste koda hela webbplatsen manuellt och ladda upp relaterade filer till ditt nyskapade GitHub-förråd.
Hur skapar man en gratis webbplats och är värd för den på GitHub-sidor?
Som nämnts ovan måste du skapa alla HTML-, CSS- och JavaScript-filer som är relaterade till din webbplats. Om du gillar Web Dev och vet hur du kodar dig igenom, är du bra att ladda upp dina filer i ditt GitHub-förråd och få igång din webbplats. Du kan bläddra till avsnittet i den här artikeln som handlar om att ladda upp webbplatskoden till GitHub-sidor.
Men om du är någon som har lite eller ingen information om Web Dev, har vi dig täckt. Du kan använda stegen nedan och designa din egen webbplats med lite grundläggande HTML:
Steg 1: Gå till HTML5 UPP och bläddra till webbdesignen du gillar. Du kan välja vilket annat förbyggt tema som helst från vilken plattform som helst. Här har jag valt ”Massively” från HTML5 UP, men du är fri att ladda ner och anpassa vilken webbdesign du vill.
Steg 2: Extrahera den nedladdade zip-filen av din favoritwebbplatsdesign.
Du bör se filer som heter index.html och generic.html och mappar som tillgångar och bilder i den extraherade mappen.
Steg 3: Öppna nu de extraherade filerna med Visual Studio Code och välj filen index.html.
Steg 4: Ladda ner och installera tillägget ”Live Server” i Visual Studio Code om du inte redan har det.
Steg 5:Välj filen index.html, klicka med höger musknapp och välj alternativet ”Öppna i Live Server”. Det här alternativet låter dig visualisera ändringarna i din HTML-fil i din webbläsare i realtid.
Hur anpassar du din webbdesign?
Jag kommer inte att kalla processen bortom denna punkt som ”steg” för att anpassa din webbplats. Att anpassa HTML-filerna är helt upp till dina önskemål, men här är hur jag anpassade designen ”Massivt” från HTML5 UP och konverterade den till en portfölj. Du kan välja att hämta inspiration från detta eller anpassa din webbplats helt själv. Valet är ditt!
Ändra titel- och stycketaggarna
I början av min anpassningsprocess ändrade jag titeltaggen ”Massivt.” Titeltaggen på din HTML-fil kommer att bestämma dess namn när den öppnas i en webbläsarflik. Standardtiteln för Massively ska vara ”Massively by HTML5 UP”, och jag rekommenderar att du ändrar den till något som din webbplats liknar.
Jag ändrade titeltaggen till ”Samyak Goswami | Tech Content Writer” eftersom det passade perfekt i min portfölj. Därefter ändrade jag Intro-sektionen på webbplatsen, som sa: ”This is Massively” (finns i H1-taggen) och gjorde den till ”Samyaks Portfolio” av uppenbara skäl. Därefter ändrade jag texten nedan i stycketaggar till ”En visning av mina projekt och mina förmågor.”
När jag gick till avsnittet Navigation (Nav) i indexfilen, utelämnade jag två av de tre navigeringsknapparna som finns i List-taggen. Jag ville skapa en ensidig webbplats med alla detaljer på en enda sida, men du är fri att ändra antalet navigeringsknappar enligt ditt val.
Jag ändrade senare texten ”Detta är massivt” på navigeringsknappen till ”Mina artiklar.”
Ändra länkar och ikoner för sociala medier
Du måste också se de olika sociala medieikonerna på liveservern som Twitter, Facebook, Instagram och GitHub. Jag bestämde mig för att utelämna Twitter och Facebook och behålla Instagram och LinkedIn för min användning.
Du kan ändra ikonerna för sociala medier och deras länkar genom att gå till avsnittet Navigation (Nav) och rulla till Lista taggar med Twitter, Instagram och mer skrivna i dem.
Lägg märke till hur det inte finns några länkar kopplade till dessa sociala medier-ikoner eftersom href-taggen lämnas tom. Du kan lägga till länkar till href-taggen genom att ersätta ”#” med din föredragna länk.
Ändra innehållet på hemsidan
Först ändrade jag H2-taggen och gjorde den ”Jag heter Samyak Goswami” och ändrade sedan paragraftaggen till ”Jag är en teknikentusiast…”. Jag skulle föreslå att du ändrar H2-taggen med något som matchar innehållet på din hemsida och paragraftaggen som förklarar det.
Vi kommer nu med den mest avgörande delen av denna anpassning; ändra innehållet i artikelbrickorna.
För att göra detta, gå till avsnittet Inlägg i indexfilen, och du bör se flera kodavsnitt som finns i artikeltaggar. Du kan lägga till länkar till dina berättelser genom att ändra href-avsnittet som vi gjorde samtidigt som du lade till länkar till ikoner för sociala medier.
Senare kan du ändra namnet på artiklarna genom att ändra innehållet i H2-taggarna. Du kan också lägga till en beskrivning till dina artiklar med hjälp av stycketaggen.
Upprepa processen för varje artikel genom att lägga till länkar, ändra namn och lägga till en beskrivning till alla dina artiklar.
Lägga till bilder på dina webbplatser
Du måste ha märkt att förhandsvisningen ser väldigt annorlunda ut än bilderna som finns på HTML5 UP-webbplatsen. Detta beror på de plana och intetsägande bilderna i den anpassningsbara filen. Låt oss piffa upp vår webbplats genom att lägga till anpassade bilder till den.
Originalbilder
För att göra det, navigera till mappen där du tidigare hade extraherat ”Massively” zip-filen. Öppna den extraherade mappen och gå till mappen Bilder. Du bör se olika bilder som heter bg, pic01, pic02, och så vidare. Det här är bilderna länkade till våra artiklar i artikeltaggen.
Du kan antingen lägga till anpassade bilder och ändra indexfilen med namnen på dessa bilder eller lägga till bilderna och namnge dem på samma sätt som standardbilderna. Att ge bilderna identiska namn sparar oss från att ändra koden och mycket tid efteråt.
Ändrade bilder
Jag föreslår att du korrekturläser och ändrar andra delar av din webbplats som inte är viktiga. Här är portföljen jag skapade med hjälp av stegen jag nämnde ovan: samyakgoswami.me.
Hur laddar jag upp din webbplatskod till GitHub-sidor?
Efter att du äntligen har kodat och designat din webbplats är det dags att ladda upp den till GitHub-sidorna och få den att gå live på Internet.
Så här kan du ladda upp din webbplats till GitHub-sidor:
Steg 1: Logga in på ditt GitHub-konto och gå till avsnittet My Repositories.
Steg 2: Du bör se ett arkiv med namnet ditt_användarnamn.github.io. Gå in i detta förråd.
Steg 3: Du bör se ett alternativ för att skapa din egen fil eller ladda upp filer till GitHub-förvaret.
Steg 4: Välj alla fem filer och mappar; tillgångar, bilder, element, generiska, indexera och dra och släpp dem till förvaret.
När filerna har laddats upp, commit koden och vänta tills GitHub bearbetar dina filer.
Steg 5: Navigera till Inställningar>GitHub-sidor för att se statusen för din webbplats. Du bör se uppmaningen ”Din webbplats är publicerad på din_anpassade_domän.”
Du kan nu gå till din webbadress och leta efter webbplatsen själv. Kom ihåg att webbplatsen kan ta lite tid innan den startar live.
Hur aktiverar jag SSL-kryptering i GitHub-sidor?
HTTP är ett osäkert sätt att hantera användarförfrågningar på din webbplats. Alla med skadliga avsikter och gedigen teknisk kunskap kan avlyssna interaktionerna mellan användaren och din webbplats. Å andra sidan ger HTTPS alla dina besökare en mycket säkrare surfsession. GitHub-sidor erbjuder gratis HTTPS-kryptering, och så här kan du använda det:
Bläddra till avsnittet Sidor i arkivet.
Du bör se alternativet ”Enforce HTTPS” i slutet av fönstret. SSL-krypteringen bör aktiveras så snart du markerar kryssrutan Enforce HTTPS.
Om du upptäcker att alternativet Enforce HTTPS inte är tillgängligt för din domän, kan du aktivera SSL-kryptering med hjälp av stegen nedan:
Steg 1: Logga in på ditt Namecheap-konto och gå till avsnittet ”Domänlista”.
Steg 2: Navigera nu till Hantera domän och därefter till avsnittet ”Avancerad DNS”.
Du bör se några befintliga CNAME- och A-poster.
Lägg till följande A-poster med värd som ”@” och IP-adress som ”185.199.108.153”. Nästa med värdnamnet ”@” och IP-adress som ”185.199.109.153”.
Följ trenden tills du har 4 A-poster upp till IP-adress ”185.199.111.153”.
Ta bort alla tidigare A-poster.
Steg 3: Nästa upp, lägg till en CNAME-post med Host som ”www” och Value som ditt GitHub-användarnamn (dot) github (dot) io.
Ta bort de tidigare CNAME-posterna. I slutändan bör dina DNS-inställningar ha 4 A-poster och 1 CNAME-post.
Steg 4: Gå nu till GitHub-sidorna i avsnittet Inställningar. Alternativet Enforce HTTPS bör nu vara tillgängligt för din domän.
Sammanfattning 👈
GitHub ger en fantastisk möjlighet till varje student att skapa en gratis webbplats och hantera den. Även om du inte kan använda GitHub-sidor för att vara värd för massiva trafikbelastningar, markerar det varje kryssruta för en småskalig statisk webbplats. Det kostnadsfria anpassade domännamnet, värdskapet och SSL-krypteringen gör det ännu mer underbart att ha.
Nu kan du läsa ”Hur man väljer ett webbhotell för din nya webbplats.”
Här är några verktyg för övervakning av sidhastighet för att meddela dig när din webbplats går ner.