Installing Parcel & Uploading to Github Pages

# Installing Parcel & Uploading to Github Pages ### 1. Install Parcel To install Parcel in your project, you can follow these steps: 1. Make sure you have Node.js installed on your computer. You can download the latest version from the official Node.js website: https://nodejs.org/en/download/ 2. Open a command prompt or terminal window and navigate to the root directory of your project. 3. Run the following command to initialize a new Node.js project and create a `package.json` file: ``` npm init ``` This command will prompt you to enter some information about your project, such as its name, version, description, and author. You can simply press Enter to accept the default values for most of these options. 4. Run the following command to install Parcel as a development dependency in your project: ``` npm install parcel-bundler --save-dev ``` This will install the latest version of Parcel and add it to the `devDependencies` section of your `package.json` file. 5. You can now use Parcel to bundle your project's assets by running the following command: ``` npx parcel <entry-file> ``` Replace `<entry-file>` with the path to the main entry file of your project (e.g. `index.html`, `src/index.js`, etc.). Parcel will automatically detect the type of asset you are bundling (e.g. HTML, JavaScript, CSS, images, etc.) and configure the appropriate loaders and plugins to process it. It will also create a development server and hot module replacement (HMR) for you, which will automatically reload the page in your browser whenever you make changes to your code. That's it! You have now installed Parcel in your project and can start using it to bundle your assets. ### 2. Push to Github Pages To deploy your Parcel-built website to GitHub Pages, you can follow these general steps: 1. Make sure your website is ready for deployment. You can run `npm run build` to generate the production-ready files that will be deployed to GitHub Pages. 2. Create a new GitHub repository or use an existing one where you want to deploy your website. 3. Install the `gh-pages` package by running `npm install gh-pages --save-dev`. 4. Add the following scripts to your `package.json` file: ```json "scripts": { "predeploy": "npm run build", "deploy": "gh-pages -d dist" } ``` The `predeploy` script will run the `npm run build` command before deploying to ensure that the latest production-ready files are used. The `deploy` script will use the `gh-pages` package to deploy the contents of the `dist` directory to the `gh-pages` branch of your GitHub repository. 5. Initialize a Git repository in the root directory of your project by running `git init`. 6. Add and commit all your files by running `git add .` and `git commit -m "Initial commit"`. 7. Set the remote repository to your GitHub repository by running `git remote add origin https://github.com/<username>/<repository>.git`, replacing `<username>` and `<repository>` with your GitHub username and repository name. 8. Deploy your website by running `npm run deploy`. After running this command, Parcel will build your website and deploy it to the `gh-pages` branch of your GitHub repository. You can then access your deployed website at `https://<username>.github.io/<repository>/`. :::info more reference: https://www.matteogregoricchio.com/articles/github-pages-hosting-with-parcel :::