DEV Community

Allam Galan Rosa
Allam Galan Rosa

Posted on

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

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
Enter fullscreen mode Exit fullscreen mode

Then we cd into the created app

$ cd username.github.io
Enter fullscreen mode Exit fullscreen mode

Then install @allamgr/portafolio library

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

# or using yarn
$ yarn add @allamgr/portafolio
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

"scripts": {
    ...,
    "push": "gh-pages -b gh-pages -d build"
}
Enter fullscreen mode Exit fullscreen mode

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
         }
      ]
   }
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;

Enter fullscreen mode Exit fullscreen mode

Runs your app and verify everything works fine:

# using npm
$ npm run start

# or using yarn
$ yarn start
Enter fullscreen mode Exit fullscreen mode

Example expected result:
cv-example1.png

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:
user-repo@2x.png

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

  1. Open Git Bash.
  2. Change the current working directory to your local project.
  3. 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
Enter fullscreen mode Exit fullscreen mode
  1. Add the files in your new local repository. This stages them for the first commit.
  2. Commit the files that you've staged in your local repository.
$ git commit -m "First commit"
Enter fullscreen mode Exit fullscreen mode
  1. At the top of your GitHub repository's Quick Setup page, click to copy the remote repository URL.
  2. 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
Enter fullscreen mode Exit fullscreen mode
  1. 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

To publish the portfolio just run the following command:

# using npm
$ npm run push

# or using yarn
$ yarn push
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)