How to deploy and host your Static Web Projects on Surge.sh


Surge is a platform where you can publish/host your Static Web Projects online using a Command Prompt Interface. Your project will be live after deployment under a subdomain that surge provides for FREE. Although you can host your project on a custom domain of your choice with some extra settings, this blog post tries to explain how to deploy your static web project on a subdomain Surge.sh offers. 
Here are the 3 simple steps you could follow in order to get your Static Web Project live online in minutes. For this blog post, I've used a sample project called "Incrementer Demo" and the project code is available on github.
Step 1 : Download and Install Nodejs
In order to install Surge, you need a command line interface with an in-built npm package manager through which you can install the Surge package as shown in the Step 2.
To Install the latest Nodejs version from the official website, 
• go to https://nodejs.org/en/ 
• download and install the latest build of Nodejs for your preferred platform.

Step 2 : Open Nodejs Command Prompt
Install Surge using npm by running the following command within your Nodejs command prompt
C:\> npm install --global surge
npm successfully installs Surge on your pc. You can check the location of installed package in the npm folder like shown below

 Step 3 : Open Surge and Register your account

 Now that you have installed surge in your pc, you can open it and login to your account using the command
C:\> surge
If you haven't already registered an account on Surge, you will have to create one in order to deploy your projects to Surge. For this, you can type in your email id, password, your project path, preferred subdomain name and press enter key like shown in the screenshot below

email : <email id with which you want to create a Surge account>
password : <password of your choice>
project path : <location of your project - including your project folder>
domain : <default name of your choice>.surge.sh

Done. Your project is now live and running on <some_name>.surge.sh domain name generated as a result of the above step (which in my case is, incrementer.surge.sh)

Hope you are excited about how easy it is to publish your frontend web projects online? Please feel free to comment your experience and the project link below in the comments section.

 Frequently Asked Questions

Q1. How to remove/delete my published domain from surge?
Ans. You can use 'list' command to view all the domains under your account. Now you can use 'teardown' command to remove/delete your published domain.
C:\> surge list - to list out all your domains
C:\> surge teardown - to delete/remove your published project domain
You can check if your domain is deleted/removed by checking the available domain list using 'surge list' command

 Q2. Can I deploy and host my project on surge using a custom domain name?
Ans. Yes, indeed you can. Surge documentation has provided information about how to host your project on surge.sh with a custom domain name of your choice. You can refer the following link for more details : https://surge.sh/help/adding-a-custom-domain. If you are still not satisfied with the information provided in the official website, I'll consider your request to make a simpler blog post explaining how to do it.
For more help, you can type the below command inside your Node.js command prompt window
C:\> surge -h


Comments

Post a Comment

Popular posts from this blog

How Pandas Profiling Can Speed up your Exploratory Data Analysis (EDA) in Machine Learning

Image
Pandas Profiling Data analysis is a process of inspecting, cleansing, transforming and modeling data with the goal of discovering useful information, informing conclusion and supporting decision-making. According to Wikipedia, Exploratory Data Analysis is defined as follows In statistics, exploratory data analysis (EDA) is an approach to analyzing data sets to summarize their main characteristics, often with visual methods. A statistical model can be used or not, but primarily EDA is for seeing what the data can tell us beyond the formal modeling or hypothesis testing task. EDA is very important in understanding large datasets while building machine learning models.Generally speaking, EDA is a collection of various findings like Data Quality, Data Spread and Variable Relationships. Data Quality refers to information that define the quality of data and makes sure if is an information is actually necessary for decision making and also helps us determine the overlea...
Read more

How to mimic a fully functional REST API using JSON Server node module.

Image
What is a RESTful API? A Representational State Transfer (REST) API is a web service that uses HTTP requests to GET, POST, PUT, PATCH and DELETE data from server. RESTful systems provide faster performance, reliability and scalability by updating and reusing components without affecting the performance while running on a server.   What is a JSON Server? JSON Server is a Node Module that you can use to create a mocked version of REST JSON web service on the go. All you need is a json file for storing your data. Before directly getting started with our discussion, let’s go through why we actually need to fake/mock our REST API while we can setup one on any server with limited knowledge. Well, you can go through setting up a basic RESTful web service “ quickly ” in this never ending tutorial guide https://stackify.com/rest-api-tutorial And if you are basically a front-end developer who wants to strictly focus on developing an application, test it with server...
Read more