I added two fairly young projects – Query Server and YayDoc to the projects list on http://labs.fossasia.org/. I pulled the code from GitHub, made the changes and it worked fine. Now to get it reviewed from a co-developer, I needed to host my changes somewhere on the web.
The fossasia-labs repository runs on gh-pages by GitHub. Hence, one way of hosting my changes was to use gh-pages on my fork but I tried this tool instead to deploy my site in six keystrokes.
This is what it took to deploy the static webpage right from my command line. Let’s dive into how this tool is as easy as it gets.
What is surge?
surge is a web-publishing tool aimed at front-end developers to help them get their static web pages up and running easily. It can be used to deploy HTML, CSS and JS with the ease of a single command.
How to use surge?
surge is quite an easy tool to use. It has been developed as a npm package. Now for folks who don’t know what npm is – npm is the JavaScript package manager (Curious?).
To have surge running, you need to have Node.js installed. Run these in the terminal:
sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm Now you have Nodejs as well as npm installed. Let’s move on to the main course – installing surge.
npm install --global surgeYou have installed surge!
(You may need to preface this command with sudo.)
So let’s go to the directory where we have our files to deploy. Here I have the labs.fossasia.org repository which we’ll try to deploy.
To clone this repo, run this command:
git clone git@github.com:fossasia/labs.fossasia.org.gitAfter cding into the directory named labs.fossasia.org type
surgeand hit enter.
You’ll be prompted to sign up with your email. Choose a password. After that you’ll see something similar to this.
Properties of the directory – path and size are listed here. Also, as you can see in the picture, a domain is listed. This is a randomly generated domain by surge. You can stick with it too, or just delete it and type whatever domain you like. surge will deploy your directory to that domain, provided that it is available.
In this example, I thought to escape elfin-education and go with my-labs.surge.sh .
Press enter after typing in the desired domain name and you’ll see surge uploading files to the domain. After it successfully deploys, you’ll get a message :
That’s it. Finally it’s time to check my-labs.surge.sh .
Saving your Domain with CNAME
Next up we take a look at making surge remember the domain.
You’ll be prompted for a domain name, every time you run surge inside the same directory (this is the default behavior). This can be avoided by simply adding a CNAME file to your directory root. Let’s say that you want to stick with ‘my-labs.surge.sh’ in the above example. You can add it to the CNAME file by running this in the terminal.
echo my-labs.surge.sh > CNAME surge also offers adding your own custom domain for deployments. To know about this and read further about surge, visit surge.sh .
Additional Resources