Building a static site with Parcel — Part 2
In part 1 of this guide, we learnt how to set up our static site using Parcel. In this part, we’ll learn how to automatically deploy our site with Netlify.
Getting started with Netlify
To begin, we’ll need to sign up at Netlify. One catch to deploying sites with Netlify is that your source code has to be hosted on either GitHub, GitLab or Bitbucket. I recommend signing up with your favourite Git provider. I signed up with my GitHub account as that’s my go-to site for hosting code.
Once your account is all set up, click “New site from Git” to link your repository. Don’t worry about any of the build settings yet. Just go ahead and hit “Deploy site”.
When that’s done, you should see an “Overview” page similar to the above screenshot. Next, navigate to Settings > Build & Deploy > Continuous Deployment. We’re going to make some changes to the Deploy settings.
Let’s configure the Build command and Publish directory as shown above. At this point, if you preview your site, you’ll probably notice your CSS isn’t working. That’s because Netlify is simply using your index.html file and not really building anything. To solve this, we’ll have to add parcel-bundler as a dev dependency.
$ yarn add --dev parcel-bundlerOnce you’ve done that, commit your code, push it and watch Netlify automatically re-deploy your site! 😎
Your site name is probably randomly generated, but you can update it in the settings. And that’s it! Your static site is now deployed on Netlify. You no longer have to worry about manually re-deploying your site with every commit. Let Netlify do the tedious work for you.
This concludes my 2 part guide on Parcel and Netlify. If I’ve missed anything out or if you have any queries, do ask away and I’ll try to answer them. Thanks for reading! 🙂
