Useful links -
Push to github - Click here
GitHub Error Message — Permission denied (publickey) - Click here
Link to gh pages and host website on github - Click here
Here we will learn how you can host your website live on the internet using GitHub
Step 1 - Check your website is already pushed to GitHub or not
> Download and install git bash - Click here
> Open gitbash at the folder where your code is present - [shift + left-click > gitbash]
> type - $ git status
fatal: not a git repository (or any of the parent directories): .git
If the above response comes, you need to first push your website to git repo
Quickly link your git bash to your GitHub repo -
----------------------------------------------------------------------
(this step is only for those who are setting up gitbash for the first time)
>got to gitbash terminal and type :
1st command - git config --global user.email "you@example.com"
2nd Command - git config --global user.name "Your Name"
Step 2 - Push your local code to Git repo
> Create a repository on Github - Check here
> Go back to your git bash and type
$ git init
$ git add .
$ git status
Now all the files are staged and ready to be committed -
> Commit the files
$ git commit -m "first commit"
> git remote add origin 'your_url_name'
> git push -u origin master
Its done
Step 3 - Edit your package.json file
Add this line -
"homepage" : "https://<username>.github.io/<repo-name>
{
"name": "redux-todo",
"homepage": "https://highhimanshu.github.io/todolist-using-redux", <<< ths line was added
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"redux": "^4.1.1",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.2"
},
Step 4 : Add gh pages to your project using npm or yarn
> Go to your vs-code terminal and write -
npm install --save gh-pages
> Open package,json file again and paste
- "predeploy" : "npm run build", << this is added
- "deploy": "gh-pages -d build", << this is added
"scripts": {
"predeploy" : "npm run build", << this is added
"deploy": "gh-pages -d build", << this is added
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Step 5 : npm run deploy
Step 6 :
> Go to repo > setting > pages > select gh-pages and save.
> A Link is created automatically , that will be your hosted website link
Here is the hosted site link :
Note : Even without pushign the website to git repo again , you wesbtie will be hosted
0 Comments