Requirements

Guide

1. Install Node.js (that comes with npm) and then proceed to install the libraries you need from the terminal:

   $ cd "your_folder_path"
   $ npm init
   $ npm i parcel
   $ npm i bootstrap
   $ npm i popper.js
   $ npm i jquery
   

   As you can see, at line 3 I made you install Parcel. You can also install it as a global package by typing $ npm i parcel -g instead.
   If you choose to install it globally, you'll be able to use it on different projects without needing to reinstall it each time. In this case, it's recommended to include parcel as a peer-dependency in your package.json.In-depth Corner
2. With npm init you create a package.json by filling the input provided. Add the following lines to your package.json:

   "scripts": {
       "start": "parcel ./*.html",
       "predeploy": "rm -rf dist && parcel build ./*.html --public-url "paste here your ENTIRE REPO URL, comprehensive of http/https part"",
       "deploy": "gh-pages -d dist"
   },

   scripts is a JSON property of package.json where you can write shell commands and reference them with aliases from npm. Aliases are way easier to use and remember than the entire commands you'll use. You'll call them by writing npm run {script_key}. We'll understand in a second what these lines mean.
3. At the start of your Javascript entry point you require the libraries:

   // index.js
   import $ from 'jquery'
   import 'popper.js'
   import 'bootstrap/dist/css/bootstrap.min.css'
   import 'bootstrap/dist/js/bootstrap'

   and then, in the same .js file you write a simple function to test that the import works:

   // index.js
   $(document).ready(()=>{
       $('body').html('Hello World, if you see this message Parcel Bundler and Github Hosting are working nicely!');
   })

   You can now run Parcel with $ npm run start and magic, something happens!
   Parcel will build and host your files on a local port, thus you'll now be able to browse your site at localhost:{port} (replace port with the one you can read in the terminal). When you open the page you'll find that your site is working!
   npm run start is the first alias we use, when we call it it will simply run parcel with an argument relative to the entry points of the application.
   ./*.html is a glob pattern with a wildcard that stands for: build all the .html extension files you find in the folder from where you run the command. If you have html in sub-folders, you can add other globs to the command like ./{folder}/*.html (Parcel will interpret it as a list of entries to search). In-depth Corner
   We have our site running fine with all the built libraries and now we want to publish it using Github-Pages Hosting.
4. First thing, in the .gitignore let's add those lines:

   // we will ignore node_modules, dist (the output folder you won't track) and the .cache (parcel working folder) 
   node_modules/
   dist
   .cache

   We then install a new package from npm that will take care of pushing the built code to the gh-pages branch on your remote repository:

   $ npm install gh-pages

   Let's create a Github-Pages branch, push to your remote repo and the switch back:

   $ git branch gh-pages
   $ git checkout gh-pages
   $ git push origin gh-pages
   $ git checkout master
   

5. We're back on the main branch, with our gh-pages running (you can check that the page is online in your online repo, by going to Settings. Github should publish it by default when it finds the gh-pages branch. If you need further help check the documentation).
   It's now time to review the other two lines of the "scripts" section we added before.
   In-depth CornerWhat are we doing? We are creating a script for npm that will execute those commands:

   Pre-Deploy: it will delete the previous dist folder (the folder where are located the processed parcel files) + it will build the site from your entry point. With public-url you set the dns name of your site.

   Deploy: it will use gh-pages package to re-create the gh-pages branch based on the dist folder and it will "commit&push" it to your remote repo.
   WARNING!Please Note: if you have a CNAME file, containing the personalized url of your site, you !MUST! substitute the "predeploy" line in the last snippet with:

   "predeploy": "rm -rf dist && parcel build index.html --public-url "paste here your PERSONAL url, comprehensive of http/https part" && cp CNAME ./dist"

   This instruction will make Parcel build your page on the specified url and it will copy the CPNAME file in the dist folder - this way you'll be able to presist the CNAME and map the custom domain you're using.
   You can apply the same command for every file you need to include in your hosted files.
6. The job is now easy: you work on your site by running npm run start script, that use the Parcel local dev server.
   Every time you have a new version ready to deploy, you type this command in Terminal:

   $ npm run deploy

   Parcel will run, build the site and deploy it to GitHub with all the dependencies you used and are needed by your scripts. Fast, easy, good to go!

Thanks for reading!