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>/
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.
Top comments (0)