Använda Surge för att distribuera statiska platser: En omfattande guide

Vid implementering av statiska webbplatser söker webbappsutvecklare alltid efter de senaste och mest effektiva verktygen för att förbättra sina webbplatser. Generellt sett improviserar en Static Site Generator (SSG) med handkodade operationer och ett komplett CMS. Denna inställning är perfekt för de flesta webbplatser eller webbapplikationsprojekt, inte bearbetad på serversidan. På grund av trenden byter utvecklare över till programmet webtask.io för att hantera sina olika serverslutpunkter. Tillsammans med en betydande trend för webbappsutveckling, utvecklar den här artikeln processer som utvecklare genomgår för att utveckla sina statiska webbplatser och Server webbapplikationer.

Vad är statiska generatorer?

I detalj initierar utvecklare som använder State Site Generators processen genom att skapa en webbplats som endast är HTML. Eftersom webbplatsen endast är HTML-baserad, kör den mestadels på 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 av markdown-språket. Oformaterad text innehåller textsymboler för att skapa format med texter inklusive fetstil, kursiv stil, indrag, rubriker och skärmar.

Till skillnad från dynamiska webbplatser kräver dessa filer relativt ingen programmeringskunskap och är den mest grundläggande typen av webbplats att skapa. Därför har varje webbsida på webbplatsen sin egen HTML-fil med fast webbplatsinnehåll som visar samma för alla användare på vilken plattform som helst. Resultatet är en build som överförs till din liveserver.

Statiska platser kontra dynamiska platser

Genom jämförelse, statiska webbplatser är HTML- och CSS-kodbaserad på klientsidan. När en klient begär från en statisk serverwebbplats paketeras HTML-filerna snyggt till en webbplats som omedelbart kan visas på gästenheter. Några populära statiska webbplatsgeneratorer inkluderar Jekyll, som Github Pages stöder, 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.js, Jekyll. 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 få tangenttryckningar på din kommandorad. En premiumversion är tillgänglig som lägger till några ytterligare funktioner som Custom 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 använda. Det är otroligt enkelt, och du kan publicera en statisk webbplats online inom några sekunder. Allt webbpublicering kräver är några kommandon på kommandoraden, och det bästa är att det inte krävs några investeringar. Användare kan också lägga till personliga domäner till sina projekt, dela projekt med andra användare och skapa 404-felsidor för att dirigera klienter till andra webbsidor. Surge har några unika fördelar som andra populära statiska webbplatsinstallatörer saknar (se "Jämförelse av Surge- och Github-sidor").

Är Surge en gratis tjänst?

Som antytts ovan kräver Surge ingen kostnad att använda. Det finns dock en Surge Professional som kommer med fler fördelar för användare som är villiga att investera de extra avgifterna. Denna premiumversion av tjänsten börjar på $30 per månad. Specifikt, med den extra kostnaden, 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.

Den kostnadsfria planen borde räcka om du publicerar källfiler för att skapa en småskalig eller personlig webbplats. Men för alla som regelbundet är beroende av Surge för publicering av projekt är Surge Premium också ett klokt alternativ.

Installerar Surge

Att installera Surge och skapa ett konto är extremt enkelt och intuitivt. Öppna 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 konfigurerar första gången kommer Surge att be dig skapa ett konto. De enda kraven är att tillhandahålla en e-postadress och ett lösenord och att verifiera din e-post efteråt. När du har slutfört detta steg kommer du att ha ett Surge-konto och redo att distribuera till deras tjänst.

Distribuera din webbplats

För att använda din statiska webbplats för att Surge, hitta först filsökvägen till projektkatalogen du vill implementera. Till exempel kommer jag att implementera 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) kommer då att visas. Efteråt måste du ange filsökvägen för projektet:

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! Du kommer att se ett felmeddelande om det anpassade domännamnet som du anger redan är upptaget.
Avbruten – du kan inte publicera till [ ]

När implementeringen är klar visas ett meddelande om framgång i din terminal. Projektets domännamn och IP-adress kommer att visa dig var du kan komma åt live-distributionen.

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

Lägga till ett anpassat domännamn

Använda en CNAME-post

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 ungefär som your-custom-domain.surge.sh. Du kan anpassa och välja vad underdomänen är (förutsatt att den inte redan är tagen). Du vill använda din 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. Låt A-posten peka på IP-adressen 45.55.110.124.

Använda anpassade underdomäner

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

Överspänningsprogrammet kommer att känna igen dessa DNS-ändringar omedelbart. Det kan ta tid att sprida sig någon annanstans; dock tar det vanligtvis inte mer än 24 – 48 timmar.

Implementera projekt med hjälp av anpassade domäner

När DNS-inställningarna har trätt i kraft kan du distribuera ditt projekt. Du måste ange den domän du vill använda. För att göra det, kör kommandot surge i din terminal. Ange filsökvägen till ditt projekt först, sedan den anpassade domänen efteråt, så här:

surge-filsökväg/av/projekt a-cool-custom-domain.com

Bind anpassade domäner till projekt

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

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

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 kommandot add på kommandoraden för att lägga till medarbetare efter deras e-postadresser.

surge -add collaborator@email.com

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

Lista överspännings projekt

För att se de projekt du har publicerat med Surge, skriv in detta enkla Surge-kommando på din kommandorad. Detta kommer att generera 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 till ditt Surge-projekt när du är redo att distribuera de nya 404-filerna, bara kommandot surge.

Skapa en .surgeignore-fil

Precis som .gitignore-filen i Git-ekosystemet erbjuder Surge sin egen ignoreringsfil. Du kan skapa en lista över filer och kataloger som Surge kommer att avvisa vid driftsättning, och detta är användbart för att utelämna filer som kanske bara är relevanta under utvecklingsprocessen. Allt du kan hålla helt privat är också bra att ta med här.

För att ställa in detta, skapa en ny fil som heter .surgeignore i roten av din projektmapp. Du kan lista alla filer och kataloger som du vill ignorera i den här filen. Några vanliga exempel inkluderar node_modules, 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 åstadkomma detta.

Ta bort platsen 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. Denna kostnadsfria tjänst tillåter användare att vara värd för sina personliga statiska webbplatsprojekt i ett Github-förråd. Github-sidor har ett extremt välkänt rykte bland webbutvecklare av vilken kaliber som helst 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 projekt avsedda för kommersiella ändamål inte ska publiceras med deras värdtjänst. Därför, även om det kanske inte kan ta emot storskaliga webbplatser, är Github-sidorna perfekta för icke-kommersiellt eller personligt bruk.

Det finns små variationer mellan projektsidorna och användar- och organisationssidorna. Projektsidor kan publiceras från flera källplatser, inklusive huvud- och GH-sidorna. Utan en anpassad domän skulle standardpubliceringsdomänen vara https:// .github.io/. Å andra sidan finns användar- och organisationssidor i huvudgrenen under ditt Github-förråd. De har publicerat med domänen https:// .github.io.

Fördelar med Surge

Medan Github Pages utan tvekan är ett kraftfullt verktyg, erbjuder Surge vissa fördelar ä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 kommer att tjäna reservfilen snarare än att visa ett alarmerande 404-fel.

En annan anmärkningsvärd fördel med Surge är att användare kan implementera nya ändringar på sin webbplats på några sekunder. Som nämnts ovan, genom att helt enkelt skriva in surge-kommandot på kommandoraden, kan alla ändringar du har gjort omedelbart ses online. De enkla redigeringarna av användarwebbplatser är särskilt användbara under testexperimentering och är lättare att hantera. På grund av möjligheten att omedelbart uppdatera webbsidan är förändringar i webbläsaren mer märkbara. Alternativt kommer Github Page-användare att fortsätta att driva och genomföra ändringar i sina onlinegrä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.

Slutsats

Sammanfattningsvis, att använda Surge för att distribuera statiska webbplatser är ett kraftfullt verktyg som kan hjälpa till att effektivisera din utvecklingsprocess och få din webbplats igång snabbt. Oavsett om du är en erfaren utvecklare eller precis har börjat, är Surge en användarvänlig och intuitiv plattform som kan hjälpa dig att snabbt bygga och lansera din webbplats.

Från den första installationen och konfigurationen till implementeringen och hanteringen av din webbplats, erbjuder Surge en omfattande uppsättning funktioner och verktyg som gör det enkelt att hantera din webbplats, generera leads och se till att det alltid fungerar smidigt. Med sina kraftfulla automationsmöjligheter och flexibla konfigurationsalternativ är Surge ett utmärkt val för alla som vill bygga och distribuera statiska platser snabbt och effektivt.

Sammantaget är Surge värt att överväga om du letar efter ett pålitligt och effektivt sätt att distribuera din statiska webbplats. Med sitt intuitiva gränssnitt, kraftfulla funktioner och användbar dokumentation är Surge ett värdefullt verktyg för alla utvecklare som vill ta sin webbplats till nästa nivå. Så varför inte prova det och se hur det kan hjälpa dig att effektivisera din utvecklingsprocess och ta din webbplats till nästa nivå?