The starter template you need - part 3

In case you missed , here you can read other parts :

• Part 1
• Part 2
• Part 3, this post

Part 2 Completed - What have we achieved so far ??

So far, we have "saved" our project starter in our GitHub space.

The next goal is to see this page published over the Web.

In order to achive that, we'll use a feature of Github called GitHub Pages
Put simply, every repository on gitHub can have a "live" website , hosted by GitHub server.

Let's go !

3.1 Build your GitHub Pages URL

First of all, IT IS NOT YOUR GITHUB REPO LINK!

The url follows this syntax :

https://<github-name>.github.io/<github-repo-name>/

As example, assuming :

• github-name is mister-blue
• github-repo-name is my-starter.

My GitHub Pages URL will be

https://mister-blue.github.io/my-starter/

Keep this URL written somewhere.

3.2 Configure Deploy to GitHub Pages

Open terminal and navigate to my-starter directory (done in part 1).

In case you deleted, follow part 2, and make a clone of it and navigate inside that instead.

First step is to install the package gh-pages.

So run this command

npm i -D gh-pages

Then open package.json file with a text editor and remove this line

"main": "index.js",

In package.json, add also these lines, replacing <github-pages-url> with your url builded on 3.1 step.

{
  "scripts": {
    "start": ...,// already here
    "build": ..., // already here
    "build:gh-pages": "parcel build ./src/index.html --public-url \"<github-pages-url>\"",
    "predeploy": "npm run build:gh-pages",
    "deploy": "gh-pages -d dist"
  }
}

Example , assuming <github-pages-url is https://mister-blue.github.io/my-starter/ :

"build:gh-pages": "parcel build ./src/index.html --public-url \"https://mister-blue.github.io/my-starter/\"",

3.3 Deploy!

Run this command

npm run deploy

To test your Deployed GitHub Pages you have two option:

• Open your GitHub Pages Link with the browser.
• Open your GitHub Repository page, click on Settings => Pages and you ll find your url at the top.

3.4 Update your starter on Github

The last time we pushed our local code to GitHub is at the end of part 2, so if now we start another clone all steps done in part 3 aren't there.

So we update the GitHub repo (remote repo) with our local changes.

Run

git add .

git commit -m "Added GitHub Pages"

git push origin master

Conclusion

In these blog series , we covered a lot of stuff that at first glance seems intimidating.
Don't worry if you don't understand what some command does or what some step requires you to do.
The idea of this blogpost is to start from a practical working scenario, then you do your research in a reverse engineering manner.

If you found this blogpost interesting, if something is not clear or you get some error, let me know in the comments.