Have you ever imagined having your own website on the internet with a valid HTTPS URL? Recently, I created my own portfolio website and a small business website for a friend. In this tutorial, I'll show you how I did it in just a few minutes. It's super easy, free, and perfect for anyone who wants to showcase their work online!
Why Have a Personal Website?
As a software engineer, having a portfolio website is essential. It allows you to showcase the projects you've built, highlight your experience, and make a great impression—especially if you're looking for new opportunities. A basic portfolio website can be a static website, meaning it doesn't require a backend. That makes deployment much easier since we only need to focus on building the frontend and finding a place to host it.
Static vs Dynamic Websites: What's the Difference?
A dynamic website is one where the content changes based on user interactions or data from a backend server. Examples include social media platforms, e-commerce stores, and dashboards.
A static website, on the other hand, consists of pre-built HTML, CSS, and JavaScript files that are served directly to the user without requiring backend processing. Static websites are faster, cheaper to host, and ideal for portfolios, blogs, and landing pages.
Why Render?
Render is a modern cloud platform that offers an impressive free tier for static website hosting. It provides automated deployments, SSL certificates, and CDN distribution out of the box. Unlike traditional hosting services, Render simplifies the deployment process by connecting directly to your GitHub repository and automatically rebuilding your site when you push changes.
Prerequisites
- Basic knowledge of React/Next.js
- A GitHub account
- Your website code ready in a repository
Step-by-Step Deployment Guide
Step1. Prepare Your Repository
Make sure your Next.js project is ready for static deployment. You can use my template as a starting point: Next.js Website Template
Step2. Set Up Render Account
Visit Render and sign up for a free account
Step 3: Create a New Static Website
On your Render dashboard, click + Add New > Static Site.
Step 4: Connect GitHub
Select GitHub as your Git provider and authorize Render to access your repositories.
Step 5: Select the Repository to Deploy
Choose the repository where your website code is stored.
Step 6: Configure the Deployment
- Site Name: Choose a unique name (Render will generate a URL in the format: https://.onrender.com).
- Build Command:
npm install && npm run build - Publish Directory:
out(for Next.js static export)
Tip:: Once the site name is set, it cannot be changed, so pick wisely!
Step 7: Deploy Your Website
Click Deploy and let Render handle the rest. The system will automatically build and deploy your site. Once it's done, you'll see the message "Your site is live!" 🎉
Troubleshooting
If you encounter issues:
- Check your build logs in the Render dashboard
- Verify your build command and publish directory
Conclusion
That's it! You now have your own website live on the internet, completely free. Whether it's a portfolio, blog, or small business site, Render makes it incredibly easy to deploy static websites with Next.js. If you have any questions or improvements, feel free to drop a comment.
Top comments (0)