How to manualy deploy static sites to Netlify without using SSGs.
A quick Google search on this topic yields a thousand and one results. But one thing you wouldn’t fail to notice is the repeated use and reference to preprocessors and Static Site Generators(SSGs), which in turn require some knowledge of select front-end web frameworks on all of them.
None of them that I came across so far, specifically tackled deploying traditional static web files(HTML, CSS and Javascript) without the use of SSGs/Pre-processors as a beginner would typically have them. Hence, my motive for writing this.
Prerequisites: This tutorial assumes you already have working website(s) coded up and laying in a folder, awaiting deployment. By extension, this means you already know basic HTML, CSS and not so importantly, Javascript, to have built a simple working site.
Before we fully get started, below are a few things you should, or might probably know:
What are static websites?
Static websites are websites that contain Web pages with fixed content. i.e Each page is coded in HTML and displays the same information to every visitor.
What is Netlify?
I found Wikipedia’s definition most basic and self-explanatory:
Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for web applications and static websites.
With emphasis on Static Websites, as at the time of writing, Netlify does not support deployment of apps closely coupled with their back-end(dynamic websites) and I doubt if they ever would.
However, with the use of JAM Stack(A modern web development architecture beyond the scope of this tutorial), you could still utilize Netlify for your dynamic sites by deploying your static files to Netlify and having them communicate with the back-end, via APIs.
Netlify Supports two popular modes of deployment:
- Manual Drag and Drop Deployment
- Continuous Deployment using Git and web-based Git clients like Github, Gitlab, Bitbucket e.t.c
To keep this tutorial as beginner-friendly and as short as possible, I will specifically cover Manual Drag and Drop Deployment.
However, feel free to read up deployment using version control systems(Git), as they are more seamless and are pretty much the de facto standard mode of deployment and managing changes.
Let’s get started
As outlined in the prerequisite above, this tutorial assumes you have a folder that contains the web files you wish to deploy.
This folder usually has the following structure:
my-website
|
+-- css
|
+-- style.css
+-- js
|
+-- main.js
+-- index.html- Now, head on to Netlify, and go ahead and create an account by clicking on either “Get Started” or “Sign up”.
2. On the Signup page, select any of the third party auth providers with which you already have an account to continue. (I’d recommend Github, as it makes more sense, considering it’s likely to house all the projects you’d be deploying in future.) or just sign up using your email if you have none of those.
3. Follow the on-screen prompts and make sure to grant Netlify necessary permissions when asked.
If authentication(Sign up) is successful, you should now be redirected to your new Netlify dashboard. Easy peasy!
Now, let’s deploy!
By now, if you have looked around closely enough, you should have seen the prompt that reads:
“Want to deploy a new site without connecting to Git?
Drag and drop your site folder here”
And just like it says, no jokes: it is what it is.
Remember: It’s always good practice to perform last minute testings on your projects before deploying, no matter how sure of their latest state you might be. So go ahead and verify that everything’s as it should be one more time.
Done with last minute testing?
Now, Simply drag and drop the folder containing your static site files into the dotted box area and voila, your site is deployed!!!
And that’s it on this tutorial.
Found this helpful, have contributions or need further clarifications?
Do well to drop your comments and don’t forget to tap the “👏” icon as many times as you wish :)
Should you want to connect: Find me on twitter.
May the codes be with you!
