Build your personal website from JSON file with React using @allamgr/portafolio library and publish it on your GitHub page?

Allam Galan Rosa — Mon, 23 Aug 2021 14:33:58 +0000

Hi, this will be my first article here on Dev, oriented to developers/designers, I hope you found this useful, and if you like share it or leave your comments.

Like the title said this will be a tutorial for people who wants to have a personal portfolio website based built with React on their personal GitHub page.

Purpose of this Blog:

Create a personal portfolio with React and @allamgr/portafolio
Publish it to your GitHub page using gh-pages

Step 1 - Create React App and add `@allamgr/portafolio`

Note: replace username with your Github username

cd to your preferred directory and in the command line run:

$ npx create-react-app username.github.io

Then we cd into the created app

$ cd username.github.io

Then install @allamgr/portafolio library

# using npm
$ npm install --save @allamgr/portafolio

# or using yarn
$ yarn add @allamgr/portafolio

Then install gh-pages as will be needed to publish the website on GitHub pages

# using npm
$ npm install --save gh-pages

# or using yarn
$ yarn add gh-pages

Then edit the package.json file to include the following script under scripts section:

"scripts": {
    ...,
    "push": "gh-pages -b gh-pages -d build"
}

Step 2 - Create a JSON file with the required information and render portfolio.

Create a JSON file called cv.json under src folder with the following format, change the information as your needs.

{
   "personalInfo": {
      "name": "👨‍💻 Name",
      "position": "Position",
      "brief": "Brief.",
      "email": "firstpartemail",
      "emailDomain": "domain.com",
      "location": "Azgard",
      "gender": "Male",
      "github": "username",
      "linkedin": "username",
      "twitter": "username"
   },
   "educationInfo": {
      "data": [
         {
            "school": {
               "name": "Name",
               "logoUrl": "https://logo.url/image.png",
               "acronym": "ACRONYM",
               "location": "Azrgard",
               "url": "https://azgard.edu.space"
            },
            "degree": "Thor Technology Assistant",
            "startYear": 2013,
            "endYear": 2017
         }
      ]
   },
   "workExperience": {
      "data": [
         {
            "company": {
               "name": "Advengers",
               "logoUrl": "https://advengers.image/image.png",
               "url": "https://www.advengers.end"
            },
            "title": "Time Traveller",
            "startYear": 2019,
            "startMonth": 12,
            "current": true,
            "description": "Working hard to get a seat in the table"
         }
      ]
   },
   "skillsAndTech": {
      "technologies": [
         {
            "name": "Javascript",
            "level": "advanced"
         },
         {
            "name": "CSS",
            "level": "advanced"
         },
         {
            "name": "React",
            "level": "advanced"
         },
         {
            "name": "Node.js",
            "level": "advanced"
         },
         {
            "name": "SQL",
            "level": "intermediate"
         },
         {
            "name": "MySQL",
            "level": "I"
         },
         {
            "name": "Typescript",
            "level": "I"
         }
      ]
   },
   "portfolio": {
      "projects": [
         {
            "name": "Save Hulk",
            "desc": "Create a suit for protect the people from hulk",
            "stack": [
               "react",
               "redux",
               "sass",
               "azure"
            ],
            "startYear": 2019,
            "endYear": 2020
         }
      ]
   }
}

Open your code editor in this case VSCode and delete the existing code in App.js and App.css

Go to your App.css file and set the following content:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

a {
  text-decoration: none;
}

Go to your App.js file and put the following content:

Note: for this tutorial we are using TemplateLean as it's the only default template available.

import './App.css';
import { TemplateLean } from '@allamgr/portafolio'
import jsonData from './cv.json';

function App() {

  let json = JSON.stringify(jsonData);
  return (
    <div className="App container">
      <TemplateLean json={json}/>
    </div>
  );
}

export default App;

Runs your app and verify everything works fine:

# using npm
$ npm run start

# or using yarn
$ yarn start

Example expected result:

Step 3 - Create GitHub repository

The following info was taked from https://pages.github.com/

Go to create repository page and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

To avoid errors, do not initialize the new repository with README, license, or .gitignore files. You can add these files after your project has been pushed to GitHub.

See the image below:

Step 4 - Initialize git and add remote origin to the local repository:

Open Git Bash.
Change the current working directory to your local project.
Initialize the local directory as a Git repository or Checkout to main branch if is already initialized.

# run if git is not initialized
$ git init -b main
# run if git is already initialized
$ git checkout -b main

Add the files in your new local repository. This stages them for the first commit.
Commit the files that you've staged in your local repository.

$ git commit -m "First commit"

At the top of your GitHub repository's Quick Setup page, click to copy the remote repository URL.
In the Command prompt, add the URL for the remote repository where your local repository will be pushed.

$ git remote add origin  <REMOTE_URL> 
# Sets the new remote
$ git remote -v
# Verifies the new remote URL

Push the changes in your local repository to GitHub.

$ git push origin main
# Pushes the changes in your local repository up to the remote repository you specified as the origin

Step 5 - Build and Publish the portfolio

To build the portfolio just run the following command:

# using npm
$ npm run build

# or using yarn
$ yarn build

To publish the portfolio just run the following command:

# using npm
$ npm run push

# or using yarn
$ yarn push

Go to your GitHub page setting, select gh-pages as the source branch.
and save the new settings.

Congratulations

You have your personal portfolio website in only 5 steps.

For more information about how GitHub pages works go to this link

For more information about allamgr/portafolio go to this link

Thanks for your time, hope you found this tutorial useful.

Buy me a pizza

Original posted on: allamgr.hashnode.dev

DEV Community: Allam Galan Rosa