Home/ Questions/Q 3080

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T11:24:08+00:00

The starter template you need – part 3

  • 61k

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

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>/
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

"main": "index.js",
Enter fullscreen mode Exit fullscreen mode

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"   } }
Enter fullscreen mode Exit fullscreen mode

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/"",
Enter fullscreen mode Exit fullscreen mode

3.3 Deploy!

Run this command 

npm run deploy
Enter fullscreen mode Exit fullscreen mode

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 .
Enter fullscreen mode Exit fullscreen mode 

git commit -m "Added GitHub Pages"
Enter fullscreen mode Exit fullscreen mode 

git push origin master
Enter fullscreen mode Exit fullscreen mode

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.

beginnersjavascripttutorialwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,