We have many excellent open-source deployment platforms for quickly prototyping and deploying static websites. This is particularly useful for hobby projects or building your portfolio!
And even though the internet is full of useful articles about them, I thought of consolidating information in 1 place and sharing my experience by deploying a simple static site (View Code) on all of them.
Each platform has its strengths, ranging from simplicity and speed to advanced features and integrations. Consider your project's needs and choose the platform that best fits your requirements after exploring the official documentation.
Disclaimer: This article demonstrates some examples. All platforms listed below have a free tier which we will be using, but please make sure to review their pricing pages for details.
1. Surge⚡
Here's how you can deploy a website on Surge:
- In your project directory, run the command:
npx surge
- The first time, Surge may ask you to enter your email and password to create or log into an account.
- Once done, you will be asked which files to deploy. For this example, enter . to select all files.
- Surge will display a random site name. Just accept and continue. And there you have it, your site is deployed on Surge!
2. Netlify 🚀
Here's how you can deploy a website on Netlify:
- Sign-up at Netlify official site. Once you login, you will see your dashboard
There are multiple ways to deploy a site: Through Git integration, manually or from a template. In this example, we will deploy directly through Netlify CLI.
Open the terminal in your project directory and run the command:
npx netlify-cli deploy
Netlify requires authentication, so the first time it may ask you to log in through your browser.
After logging in, the terminal will auto-continue with the next steps. In this example, we selected a new site with a random name and the default team to deploy our static site.
Once done, you should see a notification of success and the website URLs within the terminal.
- The site is now deployed on Netlify!
3. Vercel🌐
Here's how you can deploy a website on Vercel:
- Head over to the official site and sign-up.
- Choose from multiple deployment methods: Git integration, manual, or template-based. We'll deploy directly using Vercel CLI.
- Open terminal in project directory, run this command following the automated steps:
npx vercel
- Vercel CLI may require you to login, so complete the login process via email verification.
- Since this was a new site, I used "Link to existing project" as NO. Enter a sample project name, and use . as your project files to include all files for upload.
- Success: Your site is now deployed on Vercel!
4. Firebase Hosting🔥
Here's how you can deploy a website on Firebase:
- Visit the official site and sign-up. In case you have a Google account, you will be automatically signed in.
- Create a new project in the Firebase console.
- Install Firebase CLI globally using this command in your terminal.
npm i -g firebase-tools
- Log in using this command in your project directory terminal following the automated steps:
firebase login
- Configure Firebase by running this command in your project directory terminal to generate the deployment files.
firebase init
- Deploy the site using this command, following automated steps:
firebase deploy
- Successfully deployed!
5. GitHub Pages📄
Here's how you can deploy a website on GitHub:
- Sign up for an active GitHub account here if you don't have one already.
- Upload your code to a GitHub repository. Make sure to use relative paths in file names and avoid underscores for proper linking otherwise your external resource files may now be linked properly.
- Choose GitHub UI or
gh-pagesplugin for deployment. We'll use GitHub UI in this example. - Navigate to your repository's "Settings" > "Pages" to set up deployment from the branch you want e.g. in this case, I selected "master" branch.
- After this, GitHub will automatically deploy your site every time any commit is made to the repository.
- Open Settings > Pages and here you will see the site URL!
6. Cloudflare Pages☁️
- Deploying on Cloudflare requires a few additional steps, follow along this guide:
Install the Cloudflare Wrangler CLI using this command in your machine:
npm i -g wrangler
- Sign up on Cloudflare, go to dashboard and create a "Cloudflare Pages Site" by clicking on "Create" button within "Workers & Pages" option.
- Use the Wrangler CLI to authenticate and deploy the static site to CF pages, by running this command in your project directory terminal, and follow the automated steps to login with OAuth:
wrangler login
- Deploy the static site to CF pages using this command, and with a project name.
wrangler pages deploy .
- You have successfully deployed your site on Cloudflare Pages!
My Personal Choice:🤔
💻 Automated Setup: GitHub Pages would be my choice. No need for a terminal at all; everything can be managed directly from the branch.
🛠️ Manual Approach: For a terminal-based approach, I prefer Surge and Netlify. Both are extremely fast and straightforward to use, with a generous free tier and many benefits.
Thank you for your time!
Feel free to share your thoughts / comments below. And don't forget to follow me for more updates!
PS:
Feel free to connect with me on LinkedIn:
https://www.linkedin.com/in/solat-ali
Top comments (0)