Create and deploy a personal web page with React (Part I)
Miguel Ruiz
Posted on August 21, 2018
Prerequisites
You need in your computer installed
- NodeJS (version >6.10 is good)
- Npm (version > 5.12 is fine)
You also need:
- A GitHub account
- A command-line Git client
Project creation
After checking everything is correctly installed. We can start our project with next command
npx create-react-app my-app
Then we will install the gh-pages package as a "dev-dependency" of the app
cd my-app
npm install gh-pages --save-dev
Properties
We will add some properties to package.json. At the top level, add a homepage property:
//...
"homepage": "http://gitname.github.io/my-app"
[gitname] → Your github username
[my-app] → Your project path, in this example my-app
Also, let's add some custom scripts for gh-pages deployment, in the "scripts" : { … } section of our package.json
...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
Link to repository
Under our project path let's create a git repo:
git init
This will create an empty .git file. Now we have to add a remote repository url to our repo:
git remote add origin https://github.com/gitname/my-app.git
Deployment
Let's now generate a production build of your app, and deploy it to GitHub Pages.
npm run deploy
Your app should now be accessible at the URL you specified.
What happened here?
When we execute the run command, the library pushes all built files to gh-pages branch and github automatically takes this branch and creates the domain and publish our code.
- (Optional) Push sources to master I recommend to push source files to master branch to keep sources able to be changes anytime from anywhere.
git add .
git commit -m "First source code commit"
git push origin master
Next steps: How to add content
This is the first result for my project.
If you check this page now, it's quite different. How did I created everything you can see? Check next post's for more.
Posted on August 21, 2018
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.