使用 GitHub Pages 和 React 创建作品集网站（二）

照片由@lum3n拍摄

关于我为什么选择 GitHub Pages 和 React 的第一部分可以在这里找到。
关于如何使用自定义域名的第三部分可以在这里找到。

作为一名初出茅庐的软件工程师，我决定创建一个作品集网站，以便有更多机会分享我的经验和项目，同时也是持续提升编程技能的绝佳途径。在本系列博文中，我将探讨我为何使用 GitHub Pages 和 React.js 创建作品集网站，以及我为此采取的步骤。在这篇文章中，我将逐步讲解如何使用 GitHub Pages 创建一个初始的 React 应用并将其发布到线上。

单击此处查看我使用 GitHub Pages 和 React 创建的网站。

步骤 1：设置

如果您已经使用 React 创建过应用，并且之前使用过 GitHub，那么您可能已经做好了入门的准备，可以直接跳到第 2 步。在这里，我将快速介绍一下此过程中必不可少的工具。我还推荐了一些资源，可以作为某些操作的指南，但市面上还有更多选择，如果您还有任何不清楚的地方，请随时自行搜索。

1. GitHub 帐户

您可以在github.com注册一个免费的 GitHub 帐户。

2. 在你的机器上安装 Git

Git 是大多数操作系统的标配预装程序，但您可以通过在终端中运行来检查它是否返回版本号。如果没有，则需要继续安装它。您可以在此处找到针对 GitHub Desktop、MacOS、Windows 和 Linux 用户的全面指南。git

version



3.正确设置GitHub

设置好 GitHub 帐户并在计算机上安装 Git 后，您需要确保已正确配置所有内容，并将 SSH 密钥添加到帐户中。Mac 用户可以在此处找到相关信息， Windows 用户可以查看本指南。

4.安装Node.js和npm

Node.js是一个运行时环境，用于执行用 JavaScript 编写的程序。npm既是一个软件库，又是一个包管理器和安装程序。它是开源的，包含近一百万个包，是开发者共享代码的绝佳方式。您可以从此处的官方网站下载Node.js。

5.选择您的文本编辑器

您需要安装一个文本编辑器才能编辑代码。我非常喜欢使用Visual Studio Code，但您可以自由选择您最熟悉的版本。

第 2 步：创建 GitHub 存储库

设置好环境后，下一步就是创建包含网站文件的仓库。登录 GitHub 帐户后，点击“创建新仓库”按钮。为了使 GitHub Pages 正常工作，您需要使用以下格式命名此仓库：username.github.io，其中 username 是您的GitHub 用户名。在本例中，我的是 iona-b.github.io。

在 GitHub 中创建你的仓库

步骤3：创建初始React应用程序

目前，我们不会创建一个功能齐全的 React 应用。我们只想达到网站上线的阶段，之后再进行进一步的开发。如果您熟悉 React，您可能已经想添加一个简单的“正在建设中”的通知，以防有人来查看。在您完全满意之前，最好不要在任何地方发布您的 URL。

要初始化您的 React 应用程序，请进入您想要在计算机上工作的目录并运行。这将创建您开始工作所需的所有文件。npm

init react-app <whatever-you-want-to-name-your-app>



步骤 4. 安装 GitHub Pages 作为 Dev-Dependency

React 中的依赖项是由开发人员创建的可复用组件，它们使您可以访问有趣的库和功能。为了使您的网站正常运行，您需要安装gh-pages，您可以通过 cd 命令进入您的 React 应用程序并运行“npm

install gh-pages --save-dev”来完成此操作。

<br></br>

## Step 5: Update Your package.json File
When you initialise your app, you'll notice that a package.json file is automatically generated for you. This is a JSON file that is used to manage the project's dependencies, scripts, and versions. To make sure your website can deploy properly, there are three lines of code we'll need to add.

### 1. Add a Home Page
In the first section of the package.json file, add a homepage, for instance: ```"homepage":

 "http://iona-b.github.io/"

2. 添加预部署

在脚本部分，添加预部署，例如：“predeploy”：

“npm run build”

### 3. Add Deploy
Also in the scripts section, add a deploy, like so: ```"deploy":

 "gh-pages -d build"

您的添加内容应类似于以下内容：

更新后的 package.json 文件

步骤 6：推送到 GitHub

完成上述步骤后，您应该将更改推送到 GitHub。为此，您可以运行以下命令：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin <repository URL>
git push -u origin main

步骤 7：部署

现在是时候让你的应用上线了！只需运行，你添加到 package.json 文件中的脚本就会生效。npm

run deploy



步骤 8：更新您的存储库设置

前往你的仓库设置，查看 GitHub Pages 部分。在“源”标题下方，你可以选择从哪个分支构建网站。将分支更改为 gh-pages。这样，你的仓库就会知道你想用哪些文件来构建你的网站。

更新 GitHub 存储库中的设置

第 9 步：庆祝您的网站建设成功！！

您的网站现在应该可以在 your-username.github.io/ 上访问了。当然，它还不是一个功能齐全的作品集网站，但您已经完成了最艰难的工作，现在就可以开始最精彩的部分了！

照片由@amyshamblen拍摄

下一篇文章，我将讲解如何为您的网站使用自定义域名。到时候见！

关于我为什么选择 GitHub Pages 和 React 的第一部分可以在这里找到。
关于如何使用自定义域名的第三部分可以在这里找到。

来源

1. “ GitHub Pages 入门”，GitHub 指南，访问日期：2020 年 10 月 16 日
2. “安装 Git ”，Git 指南，访问日期：2020 年 10 月 16 日
3. “理解 package.json 文件”，技术文摘，访问日期：2020 年 10 月 16 日
4. “ Mac OS X 上 Git 和 Github 的初学者设置指南”，burnedpixel，访问日期：2020 年 10 月 16 日
5. “ Node.js 到底是什么？ ”，freeCodeCamp，访问日期：2020 年 10 月 16 日
6. “什么是 npm？ ”，w3schools，访问日期：2020 年 10 月 16 日
7. Anjali Sharma 在 Medium 上发表文章“如何在 5 分钟内构建并部署 React 应用到 Github 页面”，访问日期：2020 年 10 月 16 日
8. “如何将 React 应用部署到 GitHub Pages ”，Ibrahim Ragab 在 DEV 上发表，访问日期：2020 年 10 月 16 日