Använda Surge för att distribuera statiska webbplatser (2020-uppdatering)

Använda Surge för att distribuera statiska webbplatser (2020-uppdatering)

Använd Surge för att distribuera statiska webbplatser

Under processen med att distribuera statiska webbplatser söker webbapputvecklare alltid efter de senaste och mest effektiva verktygen för att förbättra sin webbplats. Generellt sett improviserar en statisk webbplatsgenerator (SSG) med handkodade operationer och ett fullständigt CMS. Denna inställning är perfekt för de flesta webbplatser eller webbapplikationsprojekt, inte serverbearbetade. På grund av trenden byter utvecklare över webtask.io program för att hantera sina olika serverändpunkter. Tillsammans med en betydande trend för webbappsutveckling utarbetar den här artikeln processer som utvecklare genomgår för tillväxten av sina statiska webbplatser och "Server”Webbapplikationer.

Vad är statiska generatorer?

I detalj initierar utvecklare som använder State Site Generators processen genom att generera en HTML-endast webbplats. Eftersom det bara är HTML, har webbplatsen mestadels rådata och mallar. Som nämnts klassificeras rådata också som ”markdown-filer”. För en bättre förståelse är markdown-filer (länk: https://guides.github.com/features/mastering-markdown/) generiska textfiler som använder dialekter i markdown-språket. Formateringen av ren text innehåller textsymboler för att skapa format med texter inklusive fetstil, kursiv, indrag, rubriker och skärmar. Dessa filer kräver relativt ingen programmeringskunskap och är den mest grundläggande typen av webbplats att skapa, i motsats till dynamiska webbplatser. Därför har varje webbsida sin egen HTML-fil med fast webbplatsinnehåll som visar samma för alla användare på vilken plattform som helst. Resultatet, en byggnad som överförs till din live-server.

Statiska platser kontra dynamiska platser

Som jämförelse är statiska webbplatser baserade på HTML- och CSS-kod på klientsidan. När en klient begär från en statisk serverwebbplats förpackas HTML-filerna snyggt till en webbplats som omedelbart kan visas på gästenheter. Några populära statiska webbplatsgeneratorer inkluderar Jekyll, som stöds av Github Pages, och Nästa. Däremot är dynamiska webbplatser beroende av skriptspråk på klientsidan och serversidan. När det gäller några exempel, JavaScript (länk: https://www.javascript.com), PHP (länk: https: //www.php.net) och ASP (länk: https: //www.w3schools.com/ asp / webpages_intro.asp) är "dynamiska serversidan" -skript. Som en förklaring skickar filer med en dynamisk HTTP-server filer till webbläsaren. Samtidigt skapar generatorn en ny HTML-fil varje gång slutanvändaren ringer en sida.

Vad är överspänning?

Surge är en tjänst för distribution och värd för statiska webbplatser och applikationer. Du kan använda den för att vara värd för projekt byggda med statiska generatorer som t.ex. Gatsby.jsJekyll. Alla anpassade projekt byggda med HTML, CSS och JavaScript på klientsidan fungerar också. Dess kostnadsfria plan är optimal för nästan vilken statisk webbplats som helst, och konfigurering av tjänsten kan göras med bara några tangenttryckningar till din kommandorad. Det finns en premiumversion tillgänglig som lägger till några ytterligare funktioner som anpassad SSL, lösenordsskydd och mer.

Varför ska jag använda Surge?

Surge är ett mycket bekvämt verktyg som alla front-end webbutvecklare bör bekanta sig med. Det är otroligt enkelt att använda, och du kan publicera en statisk webbplats på Internet bokstavligen inom några sekunder. Allt webbpublicering kräver är några kommandon i kommandoraden. Det bästa är att det inte krävs några investeringar. Användare kan också lägga till personliga domäner i sina projekt, dela projekt med andra användare och skapa 404-felsidor för att dirigera klienter till andra webbsidor. Surge har till och med några unika fördelar som andra populära statiska webbplatsutvecklare saknar (se "Jämförelse av Surge- och Github-sidor").

Är Surge en gratis tjänst?

Som antyds ovan kräver Surge ingen kostnad för att använda. Det finns dock en Surge Professional som ger fler fördelar för användare som är villiga att investera de extra avgifterna. Denna premiumversion av tjänsten börjar vid $ 30 per månad. Specifikt, med tilläggsavgiften kan du skapa obegränsade professionella projekt, ha en anpassad SSL och ha en säker webbplats med https. Du kan också dela resurser, utveckla omdirigeringar på din webbplats och skydda dina projekt med lösenord.

Om du helt enkelt planerar att publicera källfiler för att skapa en liten eller personlig webbplats, bör den kostnadsfria planen räcka. Men för alla som regelbundet är beroende av Surge för publiceringsprojekt, kan Surge Premium också betraktas som ett klokt alternativ.

Surge-prissättning

Installerar Surge

Installera Surge och skapa ett konto är extremt enkelt och intuitivt. Öppna bara ett nytt terminalfönster och skriv följande kommando:

npm installation –global Surge

(Obs: detta steg förutsätter att Node och npm redan är installerade på ditt system. Om inte, kan du installera den senaste versionen av båda från den officiella Node.js webbplats.)

För att kontrollera om Node.js.website är korrekt installerad, gå till kommandoraden och ange "nod -v" för status.

När du startar första gången kommer Surge att be dig att skapa ett konto. De enda kraven är att tillhandahålla en e-postadress och lösenord och verifiera din e-post efteråt. När du har slutfört detta steg kommer du nu att konfigureras med ett Surge-konto och redo att distribueras till deras tjänst.

Övervakningskommandon

Distribuera din webbplats

För att använda din statiska webbplats för Surge, hitta först filvägen för projektkatalogen du vill implementera. Som ett exempel kommer jag att genomföra ett projekt som finns på / Users / air / surge-test.

När du känner till filvägen för katalogen som ska distribueras kör du följande kommando i ett terminalfönster:

uppstår

Ditt användarnamn (dvs. e-postadress) visas då. Därefter behöver du bara ange filsökvägen för projektet:

distribuera din statiska webbplats till Surge

Ange hela filvägen och tryck sedan på enter.

Ökningsprogrammet ger automatiskt ett domännamn med slumpmässiga ord. Du kan också skapa valfri anpassad domän om den inte redan har tagits. Ange ditt valda domännamn och tryck sedan på Enter.

(Obs! Om det anpassade domännamnet du anger redan har tagits visas ett felmeddelande.

Avbruten - du har inte behörighet att publicera till [ ]

När installationen är klar ser du ett framgångsmeddelande visas i din terminal. Domännamnet och IP-adressen för projektet visar var du kan komma åt den live distributionen.

överdriven distribution

Ange domännamnet i din webbläsare och du bör nu se din webbplats live:

distribuera statiska platser med våg

Lägga till ett anpassat domännamn 

Med hjälp av en CNAME Spela in

Som standard kommer Surge att tillhandahålla en anpassad underdomän för alla webbplatser som du distribuerar till deras tjänst. Det kommer att se ut som din-anpassade-domän.surge.sh. Du kan anpassa och välja vad underdomänen är (förutsatt att den inte redan har tagits). Chansen är dock att du vill använda din egen anpassade domän för alla professionella projekt.

För att göra det vill du lägga till två nya CNAME-poster i domänleverantörens DNS-panel. En kommer att vara med värdnamnet @, och den andra kommer att vara med värdnamnet www. Båda CNAME-posterna pekar på följande IP-adress:

na-west1.surge.sh

Använda en A post

Om din domänleverantör av någon anledning inte tillåter CNAME-poster kan du ställa in en A-post som ett alternativ. Ha A-poängen till en IP-adress 45.55.110.124.

Använda anpassade underdomäner

Du kan också använda vilken som helst anpassad underdomän för att peka på Surge, till exempel sub.my-cool-site.com. För att göra det vill du skapa en ny CNAME-post. Detta bör leda till samma na-west1.surge.sh IP-adress ovan, men den här gången kommer värdnamnet att vara *. * Värdnamnet är ett jokertecken. Detta innebär att alla underdomäner förutom den primära domänen är giltiga och tillåtna.

Ökningsprogrammet känner igen dessa DNS-ändringar omedelbart. Det kan ta tid att sprida sig någon annanstans, dock vanligtvis inte mer än 24 - 48 timmar.

Distribuera projekt med anpassade domäner

När DNS-inställningarna har trätt i kraft kan du nu distribuera ditt projekt. Du behöver bara ange domänen som du vill använda. För att göra det, kör överspänningskommandot i din terminal. Ange filvägen till ditt projekt först, sedan den anpassade domänen efteråt, så här:

surge filepath / of / project a-cool-custom-domain.com

Bind anpassade domäner till projekt

Du kanske vill binda din domän till projektet så att du inte behöver ange den när du distribuerar. Du kan göra det med hjälp av echo-kommandot och dirigera det till en CNAME-fil, som så:

eko a-cool-custom-domain.com> CNAME

Dela ditt Surge-projekt

Sunlight Media LLC: Dela ditt Surge-projekt

För att ge andra Surge-användare publiceringsbehörighet måste du först lägga upp ditt projekt. Skriv sedan in kommandot lägg till i kommandoraden för att börja lägga till medarbetare efter deras e-postadress.

surge -add collaborator@email.com

Gäster som är inbjudna till ditt projekt och har accepterat din inbjudan nu kan publicera sina källfiler på samma domän.

 


Lista överspännings projekt

Om du vill visa alla projekt som du har publicerat med Surge skriver du det här enkla Surge-kommandot i din kommandorad. Detta genererar en lista över alla dina projekt.

överspänningslista

Lägga till anpassade 404-felsidor

Om du föredrar att ersätta standard 404-felsidan med en specialbyggd, är allt du behöver göra att lägga till en 404.html-fil i ditt Surge-projekt. När du är redo att distribuera de nya 404-filerna, är det bara kommandot.

 

Skapa en .surgeignore fil, / h2>

Precis som .gitignore-filen i Git-ekosystemet erbjuder Surge sin egen ignorera-fil. Du kan ställa in en lista med filer och kataloger som Surge kommer att ignorera vid tidpunkten för distributionen. Detta är användbart för att utelämna filer som bara kan vara relevanta under utvecklingsprocessen. Allt som du kanske vill hålla helt privat är bra att inkludera här också.

För att ställa in detta skapar du en ny fil som heter .surgeignore i roten till din projektmapp. Inne i den här filen kan du lista alla filer och kataloger som du vill ignorera. Några vanliga exempel kan inkludera nodmoduler, bower_components och andra. Du kan också ignorera specifika filtyper som inte är relevanta för produktionsversionen av en webbplats. Att lägga till * (jokertecken) före tillägget (dvs * .swp, * .psd, etc.) kommer att uppnå detta.

Ta bort webbplatsen från Surge

Om du av någon anledning vill ta bort din webbplats kan du göra det enkelt med kommandot för upprivning av nedbrytning, följt av projektets domän.

kraftig nedbrytning your-domain.com

Innan du försöker ta bort ditt projekt, se till att din version av Surge är uppdaterad till den senaste versionen.

Jämförelse av Surge- och Github-sidor

I likhet med Surge är en annan populär alternativ statisk värdtjänst Github -sidor. Den här kostnadsfria tjänsten tillåter användare att vara värd för sina personliga statiska webbplatsprojekt i ett Github-arkiv. Github Pages har ett extremt välkänt rykte bland webbutvecklare av vilken som helst kaliber som en av de högst rankade statiska värdtjänsterna. Två typer av sidor kan byggas ”Projektsidor eller Användar- och organisationssidor” som kan skapas under domänen github.io. Naturligtvis har du friheten att använda en anpassad domän också. Github rekommenderar uttryckligen att alla projekt som är avsedda att uppnå kommersiella ändamål inte ska publiceras med deras värdtjänst. Därför, även om det kanske inte kan rymma storskaliga webbplatser, är Github Pages perfekt för icke-kommersiellt eller personligt bruk.

Det finns små variationer mellan projektsidorna och sidorna Användare och Organisation. Projektsidor kan publiceras från flera källplatser, inklusive huvud- och "GH-sidor" -grenar. Utan en anpassad domän skulle standardpubliceringsdomänen vara https: // .github.io /. Å andra sidan finns sidor för användare och organisation i huvudgrenen under ditt Github-arkiv. De publiceras med domänen https: // .github.io.

Fördelar med Surge

Medan Github Pages utan tvekan är ett kraftfullt verktyg, erbjuder Surge några fördelar som även Github Pages saknar. En av dessa fördelar är routing på klientsidan. Inom ditt Surge-projekt kan du omdirigera klienter till en "backup" HTML-fil (200.html) om de begär en obefintlig sökväg. Detta är fördelaktigt eftersom Surge helt enkelt kommer att tjäna reservfilen i stället för att visa ett alarmerande 404-fel.

En annan anmärkningsvärd fördel för Surge är att användare kan distribuera nya ändringar på sin webbplats på några sekunder. Som nämnts ovan, genom att helt enkelt skriva kommandot för överspänning i kommandoraden, kan alla ändringar du har gjort omedelbart ses online. Speciellt användbart under testexperiment är de enkla redigeringarna på användarwebbplatser lättare att hantera. På grund av möjligheten att omedelbart uppdatera webbsidan är det mer märkbart att se ändringar i webbläsaren. Alternativt kommer Github Page-användare att fortsätta att driva och begå ändringar i sina online-gränssnitt och kämpa med längre och mer tråkiga processer. I det långa loppet förhindrar rätt statisk webbplats förvirrande tid för mjukvaruutvecklare.

 

Författare Bio

Crystal är senior på en offentlig gymnasium i Santa Clarita, CA. Hon har investerat i teknik sedan det andra året då hon tog sin första webbutvecklingskurs och använde Dreamweaver för att designa sina första webbplatser.

Hon förgrenade sig till datavetenskapskurser på högskolenivå där hon blev skicklig i Java-programmering. Under sommaren 2018 deltog Crystal i ett selektivt program som heter Kode med Klossy, där hon fick kunskaper i HTML5 / CSS, Javascript och experimenterade med att utveckla virtuella och augmented reality-simuleringar.

Crystal hoppas kunna fortsätta sina studier inom datorer och teknik i sin eftergymnasial utbildning.

2 Kommentarer

  • soundos May 29, 2020 vid 6: 45 pm

    fantastisk blogg, tack för publiceringen.

  • Urslan.Ali May 31, 2020 vid 3: 28 pm

    jag får följande problem, råd om hur jag löser det
    Avbruten - Ingen sådan fil eller katalog: C: \ Users \ lenovo \ Desktop \ UrduBootCamp \ UrduBootCamp \ UrslanAli.surge.sh

Posta en kommentar

Kommentarer modereras. Din e-post hålls privat. Behövliga fält är markerade *