Create and deploy a personal web page with React (Part I)

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.