|
1 |
| -# Deploying to GitHub Pages with `parcel` |
| 1 | +# Deploying to GitHub Pages |
2 | 2 |
|
3 |
| -Follow the steps below to deploy to GitHub Pages using `parcel` |
4 |
| - |
5 |
| -1. Create a new branch called `deployed-version` and switch to it. |
6 |
| -2. Install `parcel` |
7 |
| - ```bash |
8 |
| - npm install parcel -D |
9 |
| - ``` |
10 |
| -3. Install `gh-pages` |
| 3 | +Follow the steps below to deploy to GitHub Pages |
| 4 | +1. Create a new branch called `deployed-version` and switch to it with the following command: |
11 | 5 | ```bash
|
12 |
| - npm install gh-pages -D |
13 |
| -4. Remove `script` tag with `"./node_modules/axios/dist/axios.min.js"` from `index.html` |
14 |
| -5. Add `import` statements to `index.js` |
15 |
| - ```js |
16 |
| - import 'regenerator-runtime/runtime'; |
17 |
| - import axios from 'axios'; |
18 |
| - ``` |
19 |
| -6. Add a `"scripts"` section to your `package.json`: |
20 |
| - ```json |
21 |
| - "scripts": { |
22 |
| - "predeploy": "rm -rf dist && npm run build", |
23 |
| - "deploy": "gh-pages -d dist", |
24 |
| - "test": "echo \"Error: no test specified\" && exit 1", |
25 |
| - "dev": "parcel index.html ", |
26 |
| - "build": "parcel build index.html --public-url /weather-report/" |
27 |
| - } |
28 |
| - ``` |
29 |
| - <details> |
30 |
| - <summary>Complete <code>package.json</code></summary> |
| 6 | + $ git checkout -b deployed-version |
| 7 | + ``` |
31 | 8 |
|
32 |
| - ```json |
33 |
| - { |
34 |
| - "scripts": { |
35 |
| - "predeploy": "rm -rf dist && npm run build", |
36 |
| - "deploy": "gh-pages -d dist", |
37 |
| - "test": "echo \"Error: no test specified\" && exit 1", |
38 |
| - "dev": "parcel index.html ", |
39 |
| - "build": "parcel build index.html --public-url /weather-report/" |
40 |
| - }, |
41 |
| - "dependencies": { |
42 |
| - "axios": "^1.7.7" |
43 |
| - }, |
44 |
| - "devDependencies": { |
45 |
| - "gh-pages": "^6.2.0", |
46 |
| - "parcel": "^2.12.0" |
47 |
| - } |
48 |
| - } |
| 9 | +2. Push your changes to your remote repository on a new branch called `deployed-version` |
| 10 | + ```bash |
| 11 | + $ git push origin deployed-version |
49 | 12 | ```
|
50 |
| - |
51 |
| - </details> |
52 |
| -7. Run `npm run deploy` |
53 |
| -8. Confirm that the GitHub Pages branch is set to `gh-pages` in the GitHub UI by going to **Settings** --> **Pages** --> **Source** |
54 |
| -9. Navigate to `https://{your-user-name}.github.io/weather-report/` to see your deployed site. |
| 13 | +3. Confirm that the GitHub Pages branch is set to `deployed-version` in the GitHub UI by going to **Settings** --> **Pages** --> **Source** |
| 14 | +4. Navigate to `https://{your-user-name}.github.io/weather-report/` to see your deployed site. |
55 | 15 |
|
56 | 16 | ## Resources
|
57 | 17 | - [How to Use Axios with Javascript](https://www.digitalocean.com/community/tutorials/js-axios-vanilla-js)
|
58 |
| -- [How to publish a single page application at no cost with GitHub Pages (React, Svelte, etc)](https://levelup.gitconnected.com/how-to-publish-a-single-page-application-at-no-cost-with-github-pages-react-svelte-etc-897b8f75a22b) |
59 |
| -- [Parcel with gh-pages GitHub issue](https://github.com/parcel-bundler/parcel/issues/505) |
| 18 | +- [How to publish a single page application at no cost with GitHub Pages](https://docs.github.com/en/pages/quickstart) |
0 commit comments