๐ธ Portfolio
A my portfolio site that fetch data and display from various services such as GitHub, Qiita, SpeakerDeck.
๐ป Technology Stacks
- Next.js
- Firebase Hosting
- Cloud Functions for Firebase
โ ๏ธ Requirement
- Node.js v8
๐พ Installation
Fork and Clone
$ git clone https://github.com/kentaro-m/portfolio
$ cd portfolio
Install dependencies
$ yarn install
Update .env.example file and config.js file
Rename .env.example to .env. Get the token from each service and input.
# Scope: public_repo
GITHUB_API_TOKEN=<Your GitHub Token>
# Scope: read_qiita
QIITA_API_TOKEN=<Your Qiita Token>
# RSS to JSON Convert Tool
RSS2JSON_API_TOKEN=<Your rss2json token>
# Error Tracking Tool
SENTRY_PUBLIC_DSN=<Your Sentry Public DSN>
Input user info on src/app/lib/config.js.
const prod = process.env.NODE_ENV === 'production'
module.exports = {
// Input site description to display meta tags
site: {
url: prod ? 'https://kentarom.com' : 'http://localhost:3000',
title: 'Kentaro Matsushita - @kentaro-m',
description: '',
image: 'og_image.png'
},
// Input user info to display social account links
user: {
name: 'Kentaro Matsushita',
github: 'kentaro-m',
qiita: 'kentaro-m',
speaker_deck: 'kentarom',
twitter: '_kentaro_m',
facebook: 'kentaro.m9',
linkedin: 'kentarom'
},
// Input your skills
skills: [
{type: "JavaScript (ES2015)", level: 80},
{type: "Node.js", level: 70},
{type: "AWS", level: 70},
{type: "React.js", level: 60},
{type: "HTML", level: 60},
{type: "CSS", level: 60},
{type: "Java", level: 50},
{type: "Go", level: 40},
{type: "TypeScript", level: 40}
],
// Search your repository with username and topic name
github: {
topic: 'my-portfolio'
},
// Input the number of items to display
qiita: {
item_count: '5'
},
// Input blog url and the number of items to display
blog: {
url: 'https://kentarom.hatenablog.com/',
feed_url: 'https://kentarom.hatenablog.com/feed',
article_count: '5'
},
// Input the number of items to display
speaker_deck: {
slides_count: '6'
}
}Update site_description.md
Input your profile on src/app/content/site_description.md.
### Kentaro Matsushita
I'm working as a software engineer in Kanazawa, Japan.
Next.js Development
$ yarn run dev
๐ Deploy to Firebase
Create a new project
Create a new project on the Firebase web console and note the project id (https://console.firebase.google.com/project/<projectId>).
Please change firebase pricing plan to Blaze from Spark. Spark plan is external network is not accessible and can not call the services api.
Update .firebaserc file
Input your project id.
{
"projects": {
"default": "<Your Project ID>"
}
}
Deploy from local development
Login to Firebase CLI
$ yarn run firebase-login
Deploy Hosting resources and Cloud Functions
$ yarn run deploy
Deploy from CircleCI
Set up a project on CircleCI
Set up a project by referring to the following pages.
Getting Started Introduction - CircleCI
Generate an access token for using the Firebase
$ ./node_modules/.bin/firebase login:ci
Set the environment variables to CircleCI
Set the environment variables by referring to the following pages.
Using Environment Variables - CircleCI
FIREBASE_TOKENGITHUB_API_TOKENQIITA_API_TOKENRSS2JSON_API_TOKENSENTRY_PUBLIC_DSN
Deploy Hosting resources and Cloud Functions
Run build and deploy for every commit for master branch.
๐ฟ Clean dist folder
$ yarn run clean
๐ License
MIT