Surge.sh is a free static web site host which you work together with out of your command line. It makes it fast and simple to get new websites and apps on-line, both manually or as a part of your CI construct course of. Right here’s how one can get began utilizing the service.
We’ll assume you’ve already bought a listing of information you wish to deploy to the net. For those who haven’t, create a brand new folder, add an
index.html, and a few easy starter content material.
npm set up --global surge
Putting in Surge globally means you should use the
surge command anyplace, even when your working listing lacks a
package deal.json file. Omitting the
--global flag will add the package deal as a mission dependency as a substitute, letting you lock the Surge model used for particular person websites.
Now change listing into your web site’s repository. Run the
surge command to begin the deployment course of. A collection of interactive prompts will probably be displayed, beginning together with your electronic mail tackle to setup a Surge account.
Subsequent, verify the filesystem path to your mission. This defaults to your working listing so you possibly can normally press return to proceed.
The next immediate asks for a site title. A random
.surge.sh subdomain is chosen mechanically. You may select a unique subdomain, or certainly one of your personal domains, by coming into it right here. For those who’re utilizing your personal area, the next sections clarify how one can end setting it up.
After you’ve equipped a site title, press enter to start the deployment. The progress will probably be displayed in your terminal because the Surge CLI uploads your information and makes them obtainable on the internet. Go to your area in your browser to see your content material dwell!
Web site updates are utilized by operating the
surge command once more. The contents of your mission listing will probably be synced as much as your dwell web site.
All the pieces in your folder is uploaded by default. You may exclude particular paths by making a
.surgeignore file. This has the identical syntax as
.gitignore. Recordsdata and folders generally created by different developer instruments, akin to Git and npm, are mechanically omitted.
Utilizing Your Personal Area Title
Surge provides customized area assist by way of
CNAME information. This comes at no additional value over the usual service. Add a
CNAME file in your area supplier’s management panel. Level the
www hostnames to
na-west1.surge.sh. Provide your area title when operating
surge to deploy your web site.
You’ll be prompted on your area every time you run the
surge command. You may keep away from this by including the
--domain flag to
surge instructions. Alternatively, create a
CNAME file in your mission listing. Write your area title into this file.
surge --domain instance.com echo "instance.com" > CNAME
Managing HTTPS Redirects
Surge has computerized HTTPS assist however this doesn’t deal with HTTP to HTTPS redirects by default. Explicitly deploy to the
https variant of your area to drive all guests to make use of a secured connection. Enabling redirects is advisable for all publicly accessible web sites.
surge --domain https://instance.com
You’ll want to provide an SSL certificates when you’re utilizing your personal area. This characteristic is simply obtainable as a part of the paid Surge Plus plan.
Surge additionally offers you management of naked area to
www redirects. The default habits sees
www.instance.com redirect to
instance.com. You may reverse this by explicitly together with the
www portion in your deployment area.
surge --domain https://www.instance.com
Configuring Your Web site
Surge provides a number of built-in comfort capabilities which assist it stand out in opposition to different related platforms. You may add a 404 web page, password safety, and CORS assist, all utilizing particular information in your mission.
The 404 web page is enabled by making a
404.html file. That’s all there’s to it – Surge will serve the file when there’s no direct match for the requested URI.
Password safety is enabled by an
AUTH file. This accepts a easy listing of usernames and passwords.
You’ll be prompted to enter a username and password utilizing HTTP Fundamental Authentication every time you entry your web site. This characteristic is simply obtainable on the paid Surge Plus plan.
One other Surge Plus characteristic is guide routing guidelines. You may create a
ROUTER file to outline customized redirects, both inside your web site or externally.
301 /moved-page /new-link
301 (moved completely) and
307 (moved quickly) standing codes for the primary column. The final column is usually a relative hyperlink inside your web site, or an absolute hyperlink to a different area (
One last configuration file is
CORS. This allows you to allow cross-origin entry to your web site. Add a
* to the file to just accept cross-origin requests from any origin. You may write particular person domains as a substitute to restrict the allowed origins.
Automating Surge Deployments
Surge is totally managed by textual content information and terminal instructions. It’s simple to combine into CI pipelines to deploy web sites mechanically on every commit.
Automating Surge requires use of API tokens. This allows you to keep away from the interactive login prompts. First, login to Surge in your growth machine. Run
surge token to get your API token.
In your CI pipeline, set the
SURGE_TOKEN surroundings variables. The previous needs to be your electronic mail tackle whereas the latter takes your API token. Now you possibly can deploy non-interactively utilizing the
surge --project $PWD --domain instance.com
Surge makes it easy to get static web sites dwell on the internet. The fundamental service is free to make use of. Upgrading to the Plus plan offers you authentication, redirects and extra configurable HTTPS.
Not like different contenders, Surge is absolutely terminal-driven. This makes it perfect for fast developer-centric websites managed by way of Git repositories and CI pipelines. It cuts out the server configuration so you possibly can concentrate on constructing your web site’s content material.
For extra superior use instances, Surge even helps you to add a number of contributors. Run
surge --add email@example.com to provide associates, visitors, and colleagues entry to your web site. They’ll have the ability to deploy by operating
surge and supplying the identical area title you’ve been utilizing.