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
mainbranch 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.
Original posted on: allamgr.hashnode.dev
Top comments (0)