How to Publish Your Front-End Over Surge Cloud Platform ?
Last Updated :
24 Jan, 2021
Requirement: NPM must be installed
As a front end developer, we create lots of cool designs and we want to showcase them to others. But as students, we may not want to buy domains in order to get the site live on web. There are some free tools available like github and Heroku but the setup is a little complicated when it comes to publishing the front-end only.
There is one more tool called surge available that is developed specially for front-end developers and it is quite easy to use. Follow the steps below to get your pages published under 2 minutes.
To start, lets begin with making a dummy web page, a single HTML file.
Index.html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.navbar {
text-align: center;
background-color: rgb(0, 90, 121);
color: white;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<div class="navbar">
This is the navbar
</div>
<div class="body">
This is the body of my website
<br> Content goes here.
</div>
</body>
</html>
|
- You must have npm installed in your system for this step. Open the terminal in the same directory where index.html is located. Run the following command:
npm install -g surge
- Now you have ‘surge’ globally installed in your system so that you will be able to use it as many times as you want in future. Execute the following command:
surge
- It will now ask for your email ID and a password. Here you need to enter your email id and a new password for your surge account.
- After that you need to give location to your static files. If you opened the terminal in the same folder as instructed, hit enter.
- Now it will ask you for a domain name with an example domain name. Go ahead and edit the part before ‘.surge.sh’ and if that domain is available, it will be assigned to you.
- Now hit enter and you will get the link to your site published over web.
As we saw that the process is quite easy and takes less than two minutes using some simple commands. We can use it to design web pages, making resume for interviews and many other tasks free of cost.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...