@ amamgr/portafolioライブラリを使用して反応してJSONファイルからあなたの個人的なウェブサイトをビルドし、あなたのGitHubページに公開?

やあ、これは開発者/デザイナーに向けられたdevの上の私の最初の記事である、私はあなたがこれが役に立つとわかったことを望みます、そして、あなたがそれを共有するか、あなたのコメントを残したいならば.
タイトルのように、これは個人のGithubページに反応して造られる個人のポートフォリオウェブサイトを持ちたい人々のためのチュートリアルであると言いました.

このブログの目的

個人的なポートフォリオを作成する@allamgr/portafolio

それをあなたのGitHubページに公開しますgh-pages

ステップ1 -反応アプリを作成し、@ allamgr / portafolioを追加

注意:ユーザ名をgithubユーザ名に置き換えます.
好みのディレクトリとコマンドラインのCDを実行します.

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

その後、我々は作成されたアプリにCD

$ cd username.github.io

インストール@allamgr/portafolio 図書館

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

# or using yarn
$ yarn add @allamgr/portafolio

インストールgh-pages Githubページの上でウェブサイトを発表するのに必要であるように

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

# or using yarn
$ yarn add gh-pages

次に、package.json 以下のスクリプトを含むファイルscripts セクション

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

ステップ2 -必要な情報とレンダリングポートフォリオでJSONファイルを作成します。

JSONファイルを作成するcv.json 下src フォルダは、次の形式で、お客様のニーズとして情報を変更します.

{
   "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
         }
      ]
   }
}

この場合、コードエディターを開き、vsCodeとAppの既存のコードを削除します.JSとアプリ.CSS
あなたのApp.css ファイルを設定し、次のコンテンツを設定します

.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;
}

あなたのApp.js ファイルを次の内容にします.
注意:このチュートリアルではTemplateLean それは利用可能な唯一のデフォルトのテンプレートとして.

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;

あなたのアプリケーションを実行し、すべてがうまく動作確認します.

# using npm
$ npm run start

# or using yarn
$ yarn start

期待される例

ステップ3 - Githubリポジトリを作成する

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

移動するcreate repository ページとユーザー名という名前の新しいパブリックリポジトリを作成します.ギタブ.ユーザー名がGithubのユーザ名(または組織名)です.
リポジトリの最初の部分がユーザー名と正確に一致していない場合は、正しく動作しません.
エラーを避けるために、ReadMe、License、または新しいリポジトリを初期化しないでください.gitignoreファイル.プロジェクトがGithubにプッシュされた後は、これらのファイルを追加できます.
以下の画像を見てください.

Step 4 - Gitを初期化し、リモートリポジトリをローカルリポジトリに追加します。

オープンgit bash.

現在の作業ディレクトリをローカルプロジェクトに変更します.

ローカルディレクトリをgitリポジトリまたはチェックアウトとして初期化するmain branch ifが既に初期化されています.

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

新しいローカルリポジトリにファイルを追加します.これにより、最初のコミットが行われます.

ローカルリポジトリでステージをファイルしてコミットします.

$ git commit -m "First commit"

GitHubリポジトリのクイックセットアップページの上部にあるリモートリポジトリURLをクリックします.

コマンドプロンプトで、ローカルリポジトリがプッシュされるリモートリポジトリのURLを追加します.

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

ローカルリポジトリの変更をGithubにプッシュします.

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

ステップ5 -ビルドとポートフォリオを発行する

ポートフォリオを構築するには、次のコマンドを実行します.

# using npm
$ npm run build

# or using yarn
$ yarn build

ポートフォリオを公開するには、次のコマンドを実行します.

# using npm
$ npm run push

# or using yarn
$ yarn push

あなたのGitHubページ設定に行ってくださいgh-pages ソース分岐として.
と新しい設定を保存します.

祝辞

あなたはわずか5ステップであなたの個人的なポートフォリオのウェブサイトを持っている.
Githubページの動作に関する詳細についてはthis link
詳しくはallamgr/portafolio 移動するthis link
あなたの時間のおかげで、このチュートリアルが役に立つことを願っています.
Buy me a pizza
オリジナルallamgr.hashnode.dev