使用 React 和 GitHub 学生开发者包创建作品集

编码作品集

在本博客中，我们将使用 React 和 GitHub 学生开发者工具包提供的工具创建一个作品集网站。

GitHub学生开发者包是什么？我从来没听说过。

对于学生来说，云托管服务、域名、特定软件等实际工具可能价格不菲。因此，GitHub 与其他科技公司合作推出了学生开发者包，旨在让学生在一个平台上免费使用最优质的开发者工具。

太好了。学生开发者包里都包含哪些内容？

目前该软件包包含 23 项服务和工具，学生可以使用。部分服务包括：价值 50 美元的 Digital Ocean 额度、两年的免费 Heroku Hobby Dev Dyno、免费的 .me 域名、更高限额的 SendGrid 邮件服务、通过 Travis CI 进行私有持续集成构建等等。

太棒了！我该如何申请？

要申请 GitHub 学生开发者包，您必须是目前在读的学生。如果您不是学生，则不符合申请资格。请访问https://education.github.com/pack申请学生开发者包。点击“获取开发者包”并按照屏幕上的提示操作。如果您没有以 .edu 结尾的学校邮箱地址，则还需要提供有效的学生证或其他在读证明，例如课程表照片，GitHub 团队将审核这些材料。申请审核通常需要 24 至 48 小时。

接下来会发生什么，请看概要

在本篇博客中，我们将使用 React 和 GitHub 学生开发者工具包提供的工具创建一个作品集网站。为此，我们将使用该工具包中的免费 Heroku dyno 和免费的 Namecheap 域名。我们还将使用 GitHub 推送代码并部署到 GitHub Pages。

入门

在深入编码之前，我们首先需要安装所需的工具。我将使用包管理器 yarn。您可以在https://yarnpkg.com/lang/en/docs/install/yarn找到 yarn 的安装说明 。1. 安装 React 并使用以下命令创建一个名为 portfolio 的 React 应用。

yarn create react-app portfolio

2. Heroku CLI

在 Ubuntu 16+ 操作系统上安装 Heroku CLI 时，请执行以下命令。

curl [https://cli-assets.heroku.com/install-ubuntu.sh](https://cli-assets.heroku.com/install-ubuntu.sh) | sh

其他操作系统的使用说明请访问https://devcenter.heroku.com/articles/heroku-cli

请务必使用命令登录 Heroku CLI heroku login。

3. 使用以下命令安装 gh-pages 和 fontawesome 软件包

yarn add gh-pages  
yarn add @fortawesome/fontawesome-svg-core  
yarn add @fortawesome/free-solid-svg-icons  
yarn add @fortawesome/react-fontawesome  
yarn add @fortawesome/free-brands-svg-icons

编码作品集

我们将使用 Bootstrap 4 的简历模板来构建我们的作品集。该模板可以在这里找到：https://github.com/BlackrockDigital/startbootstrap-resume

复制 jQuery 和 Bootstrap。在public 文件夹内

创建目录，并将下载的模板中的以下文件复制到该目录中： 1. bootstrap.min.css 2. resume.min.css 3. bootstrap.bundle.min.js 4. jquery.easing.min.js 5. jquery.min.js 6. resume.min.jscssjs

链接新增依赖项

打开index.htmlpublic 目录，并按如下方式链接复制的 CSS 和 JS 文件：

CSS 文件

<link href="%PUBLIC_URL%/css/cssfilename.css" rel="stylesheet">

对于 Javascript

<script src="%PUBLIC_URL%/js/jsfilename.js"></script>

将模板添加到基于 React 组件的结构中

。Bootstrap 简历模板需要拆分成多个组件。Components在主src目录中创建一个目录，用于存放所有组件。我们将拆分为以下 7 个组件：

1. Sidebar.js

2. Landing.js

3. Experience.js

4. Education.js

5. Skills.js

6. Interests.js

7. Awards.js

使用 JSON 作为用户数据存储。在目录中创建一个名为 `<filename>` 的

JSON 文件。该文件将保存用户的投资组合数据。JSON 文件的结构如下：srcprofileData.json

{
    "landing": {
        "firstName": "First Name",
        "lastName": "Last Name",
        "phoneNumber": "Phone Number",
        "bio": "User's descriptive bio",
            "email": "User's email",
            "linkedin": "User's LinkedIn",
        "github": "User's GitHub"
    },
    "experience": [
        {
                "position": "Web Developer",
                "organization": "Company one",
                "aboutWork": "Details about work here",
                "fromDate": "Date of starting",
                "toDate": "Ending Date"
        },
        {
            "position": "App Developer",
            "organization": "Company 2",
            "aboutWork": "Details about work here",
            "fromDate": "Date of starting",
            "toDate": "ending date"
        },
        ...
        ...
            ...
    ],
    "education": [{
            "university": "University or School Name",
            "degree": "Major",
            "gpa": "GPA",
            "fromDate": "Date of start",
            "toDate": "Date of completion"
        },
            ...
            ...
            ...
    ],
    "skills": [{
            "name": "skill1"
        },
        {
            "name": "skill2"
        },
            ...
            ...
            ...
    ],
    "interests": {
        "paragraphOne": "Descriptive detail about your interests for paragraph one",
        "paragraphTwo": "Descriptive detail about your interests for paragraph two"
    },
    "awards": [{
            "awardDetail": "Your first award"
        },
        {
            "awardDetail": "Your second award"
        },
            ...
            ...
            ...
    ]
}

每个keyJSON 文件都以将要使用的数据组件命名。

修改 App.js 文件

。App.js 是主文件，它导入所有其他组件并定义网站的结构。

import React, { Component } from 'react';
import Sidebar from './Components/Sidebar';
import Landing from './Components/Landing';
import Experience from './Components/Experience';
import Education from './Components/Education';
import Skills from './Components/Skills';
import Interests from './Components/Interests';
import Awards from './Components/Awards';
import profileData from './profileData.json';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      landingData : profileData.landing,
      experience : profileData.experience,
      education : profileData.education,
      skills : profileData.skills,
      interests : profileData.interests,
      awards : profileData.awards
    }
  }
  render() {
    return (
      <div className="App">
        <Sidebar sidebarData={this.state.landingData} />
        <div className="container-fluid p-0">
          <Landing landingData={this.state.landingData} />
          <hr className="m-0" />
          <Experience experience={this.state.experience} />
          <hr className="m-0" />
          <Education education={this.state.education}/>
          <hr className="m-0" />
          <Skills skills={this.state.skills} />
          <hr className="m-0" />
          <Interests interests={this.state.interests} />
          <hr className="m-0" />
          <Awards awards={this.state.awards} />
        </div>
      </div>
    );
  }
}

export default App;

首先，我们从生成的 JSON 文件中导入所有已创建的组件和用户数据。在构造函数中，我们state为每个组件设置其对应的 JSON 数据。这些状态数据将作为参数传递给组件props。然后，所有组件都按照 Bootstrap 的模板进行排列。

创建 Sidebar.js

组件。Sidebar 组件包含网站侧边栏的代码。这是nav模板中的完整标签。在从模板复制代码之前，请确保其jsx符合规范。class应该将其重命名为className，或者您可以使用此工具https://magic.reactjs.net/htmltojsx.htm将 HTML 转换为 JSX。

在每个组件的构造函数中，来自 props 的数据将被赋值给一个变量，并通过该变量添加到组件中的相应位置jsx。

对于侧边栏组件，这是按如下方式完成的this.sidebarData = props.sidebarData。所有其他组件也以类似的方式完成。

将所有硬编码的名称和字段替换为 JSON 中的数据。为此，请通过组件传递 props 的变量来引用 JSON 数据。在 JSX 中引用变量的语法是使用花括号。因此，侧边栏中用户的名字可以通过 `<first name>` 访问{this.sidebarData.firstName}。所有其他数据字段都可以用类似的方式访问并替换为 JSON 中的数据。您可以在 GitHub 上

找到此链接。Sidebar.js

创建 Landing.js 的

方式类似。第一个部分id about是所需的着陆页 HTML。首先，在构造函数中加载 props 中的数据，并将其添加到jsx组件的 <head> 标签中。您可以在 GitHub 上
找到它，链接在此。Landing.js

在 JSON 数据中创建 Skills.js

时，用户的技能是一个字典列表。为了将其添加到jsx从 props 加载的数据中，使用循环遍历这些数据map，并将数据插入到列表中jsx。

{
  this.skills.map((data, index) => (
    <div key={index} className="col-6">
      <p className="list-item">
        <FontAwesomeIcon icon={faCheckCircle} color="green" />
        <span className="ml-3">{data.name}</span>
      </p>
    </div>
  ))
}

this.skills用户技能数据是从哪里加载的？profileData.json

与其他组件的创建方式类似。运行服务器，即可在浏览器中yarn start查看您的作品集。http://localhost:3000

使用 GitHub 学生开发者包

使用 Namecheap 获取免费 **.me** 域名

。 访问https://education.github.com/pack/offers并查找 Namecheap。将您的 GitHub 帐户关联到 Namecheap，即可获得免费域名。

授权 Namecheap，然后找到您的免费​​域名。获取域名后，前往您的域名列表，点击“管理”按钮管理您的域名。

点击Advanced DNS“添加记录”选项卡，找到Host Records“Add new Record添加新记录”按钮。添加以下记录：

替换githubusername.github.io成您实际的 GitHub 用户名。之后，您的域名就可以与 GitHub Pages 一起使用了。

使用 GitHub Pages 托管您的作品集。

在项目根目录下，git按如下方式初始化一个仓库

git init。前往 GitHub 并创建一个名为 `<repository_name>` 的空仓库githubusername.github.io，其中 `<username>` 替换githubusername为您实际的 GitHub 用户名。复制仓库的 Git 链接，并将其添加到您的本地 Git 仓库中，如下所示。

git remote add origin <git link>

在目录根目录下创建一个名为的文件CNAME，并将你的 Namecheap 域名以这样的格式添加到该文件中，yournamecheapdomain.me然后保存。

按如下方式将 2 个脚本添加predeploy到deploy您的脚本中package.json。

"predeploy": "yarn run build",  
"deploy": "gh-pages -d build"

注意：如果您的仓库是githubusername.github.io主分支，请使用以下脚本代替上面的脚本。githubusername.github.io仓库只能托管在主分支上，这样可以避免您在访问域名时看到 README 文件而不是网站的问题。

"predeploy": "yarn run build",  
"deploy": "gh-pages -d build -b master"

这两个脚本都应该位于 ` scripts<key>`内。另外，向 ` <key> package.json` 添加一个键并将其设置为 `<key>`。homepagepackage.jsonhttp://yournamecheapdomain.me/

运行命令yarn run deploy将代码推送到gh-pages分支并从该分支托管。前往http://yournamecheapdomain.me/查看您托管的作品集。

请按照以下步骤将代码推送到主分支：

git add -A  
git commit -m "Push portfolio code"  
git push origin master

使用 GitHub 学生开发者包，即可在 Heroku 上托管您的作品集

，并免费获得一个 Heroku 的 Hobby Dev Dyno。访问 https://education.github.com/pack/offers并将您的 GitHub 帐户与 Heroku 连接。

该流程需要 Heroku 团队进行人工审核，可能需要一到两天才能获得批准。申请获批后，即可将应用部署到您的 Heroku 帐户，并使用 Hobby Dev Dyno 进行开发。

要部署您的应用，请确保登录 Heroku CLI。此外，请package.json按如下方式添加一个新对象：

"engines" : {  
    "npm": "6.4.1",  
    "node": "10.5.2"  
}

您可以通过在终端中node运行以下命令来获取您的版本node -v，并npm通过运行以下命令来获取您的版本。npm -v

通过执行以下命令创建 Heroku 应用：heroku create appname`appname`，其中 `appname` 是您为作品集选择的应用名称。如果您尚未提交代码，请提交代码并执行`git commit` git push heroku master。等待 Heroku 完成部署。

运行此命令heroku open打开托管在 Heroku 上的应用程序。

就是这样，就这么简单。

GitHub Pages 已部署版本位于http://anupamdagar.com/GitHub-Education-Portfolio/

Heroku 部署版本位于https://studentpackportfolio.herokuapp.com/

该应用程序的完整源代码位于 GitHub 上的Anupam-dagar/GitHub-Education-Portfolio仓库中。