Deploy Your Static Web with Confidence
Get your static web deployed in less than 5 minutes 😉
If you are a web developer then at some point you have wanted to get your site deployed with a link that you can share with other people, this can be your portfolio, your working demo, etc … there are many use cases for this example.
Let' start by having a common understanding of what a static web is and then we will continue on how to deploy it in less than 5 minutes for the initial setup, after this setup you should be able to deploy this in less than a minute yes you heard that correctly we will deploy our site in the shortest time possible.
let's talk about Static Web (Site)
A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored, in contrast to dynamic web pages which are generated by a web application. Wikipedia
When you have a static page, all the information is given to the user as it is stored, example of static pages are like informational websites that don't need to fetch any contents from the server.
Deployment
When you are deploying a website, you are making it accessible by the everyone who has access to internet, normally this process gets complicated
In this guide we are going to deploy a basic app using a good a free service called surge.sh
I will use a quick and easy tool in this guide and you are welcome to follow along.
npm install -g create-react-app
Then create a basic app using the create-react-app tool
create-react-app deploy-demo
The above command should take a few seconds and you will have a simple react app, we are not going to change anything you are welcome to change anything you want in the app, the purpose of this article is to demonstrate the deployment part.
now we will need to build the project so that it has the standard html, css and js file that can be read and understood by our users' browsers.
npm run build
The above command will create a build directory that contains the files we mentioned above.
At this point we are ready to deploy our site but we need to get surge.sh running in our terminal. Let us install surge cli globally so that we can access it in when we need to deploy other projects as well.
npm install -g surge
After installing surge we now need to create an account
surge
When you run above command for the first time it will request you to create an account and deploy afterwards, you will need an email and a password.
The important fields you will need to fill in after login is the project path, the project path is where local build is and domain will be the url where your site will deployed to.
The surge command will automatically get your project path as build/ but remember to set the domain to what you want, I am setting mine to surge-demo.surge.sh
You should get the following screenshot that your site has been published successfully.
If you check this link surge-demo.surge.sh you will see that indeed it was published successfully without a hastle.
What is next ?
You can do a lot with surge, you can specify your own custom domain names, not found pages and many more I recommend you to read their docs here.
My next article I will you show how to do the same using github pages and other tools, in case you are not familiar with react, I will also cover how to use these tools without on non-react based projects.
Thank you for reading, Happy coding 😀😀
