Table of contents
What is surge
Surge is a free way to deploy websites if you dont want to deal with paying for a .com domain annually or doing a long sign-up
Steps
Here are the steps on how to deploy your website with surge:
Installing surge
This is step 1
If you want to install surge, open your terminal and write this command if you dont have surge installed already: for NPM: npm install -g surge for Yarn: yarn global add surge for pnpm: pnpm add -g surge for Brew: brew install surge-cli for bun: bun add -g surge
NOTE: May request sudo(super-user do) permissions on some devices
You can move on to the next step once surge is in installed if not already
Logging in/signing up to surge
This is step 2
to log in to surge type in your terminal: surge login
It will request your email address and password
If you arent a registered account on surge it will create one after doing this
Confirming you are logged in to surge
To confirm you are logged in to surge run this command in your terminal: surge whoami
If it returns your email address your logged in
If it returns "You are not logged in." or something similair repeat step 2
Deploying with surge
This is step 3(final step)
If your project is a vanilla JS or CSS or HTML project or all combined you can run in your terminal: surge
If your project is running React, Preact or another framework than you will have to minifie your code and make it readible for the internet to do this in your terminal type: for NPM: npm run build for Yarn: yarn build or yarn run build for pnpm: pnpm build or pnpm run build for brew, you cant do this with brew for bun: bun run build
After running this you should have a folder called 'dist' or 'build'
If it's called 'build' than type in your terminal: surge build
If it's called dist than type in your terminal: surge dist
After doing that surge will ask you for thep project name it will start with a default one like "Cool-page.surge.sh" which you can edit to be whatever you want but it must be suffixed with .surge.sh unless you use surge to a .com domain you own or rented which is not stated about how to do in this article
Once done your website will be live on the internet where search engines can index it and people an view your webpage
If you decide to take it off the internet you will have to type in your terminal: surge teardown [PROJECT-NAME] and than surge will send you an email about your taken down website
NOTE: package.json can sometimes determine if npm run build is sucessful or not so check if it is using the strict tsc && or any other cause that can make npm run build fail and not generate the dist folder
NOTE: This terminal command surge or surge dist only works if you are logged in to surge if you are not logged in to surge refer to step 2
Top comments (0)