使用 GitHub Pages 和 React 创建作品集网站:第一部分

2025-06-09

使用 GitHub Pages 和 React 创建作品集网站:第一部分

照片由@joannakosinska拍摄

有关如何开始使用 GitHub Pages 和 React 应用的第二部分可在此处查看。
有关如何使用自定义域名的第三部分可在此处查看。

作为一名刚从 Flatiron 学院软件工程专业毕业的应届毕业生,我刚刚开始找工作,并一直在努力提升自己的网络影响力。其中很重要的一点就是创建自己的作品集网站。在这篇文章中,我将探讨为什么作品集对于任何软件开发者新手来说都至关重要,以及为什么 GitHub Pages 和 React 是创建作品集的绝佳工具。

在未来的帖子中,我将逐步介绍使用 GitHub Pages 和 React 创建作品集网站的过程,敬请期待!

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


为什么要创建作品集网站?

如果你是一名开发者,很可能已经拥有多个平台来分享你的项目和经验。那么,为什么还要费心去打造一个额外的作品集呢?

1. 比其他平台更灵活

虽然 LinkedIn 和 GitHub 是向潜在雇主展示你的技能和参与过的项目的绝佳工具,但你无法总是按照自己喜欢的方式个性化你的页面。拥有自己的作品集网站,可以让你以自己想要的方式展示你想要的内容。这就像拥有一份简历,但你不必费力地把所有内容都塞进一页纸里,而是拥有足够的空间展示你想展示的内容,并突出你认为重要的内容。

2. 它能让你展示你的能力

就我个人而言,我很想有机会成为一名前端开发人员,很多这类职位都需要用到 JavaScript 和 React.js 等语言和库。通过使用 React 构建我的网站,我可以积极地向潜在雇主展示我使用这些工具的能力,并希望能够用一些简历上无法有效展现的方面给他们留下深刻印象。

3. 它让你继续编码

任何参加过训练营的同学都知道,完成一个高强度的课程非常艰难,所以暂停编程确实很诱人。虽然偶尔休息几天绝对是个好主意,但千万不要完全停止编程。找时间编程似乎很难,尤其是在你刚开始找工作的时候,比如整理简历、录制项目演示视频,以及拓展人脉网络。对我来说,创建作品集网站是一个绝佳的机会,让我感觉自己在努力求职的同时,还能保持编程技能的敏锐。它还能让你有机会学习新知识,向雇主展示你仍在从事项目,并保持你在 GitHub 上的贡献。

4.很有趣!

对我来说,创建作品集网站最令人享受的一点就是能够完全按照自己的想法创作。虽然我知道有些东西必须包含进去,但我可以自由地设计作品集的外观和功能。摆脱了训练营里对项目条条框框的束缚,能够完全按照自己的意愿创作出外观和功能的作品,真是太棒了。


替代文本

照片由@richygreat拍摄

为什么使用 GitHub Pages?

GitHub Pages 允许您将 GitHub 仓库转换为网站。GitHub 会在与您的个人 URL 绑定的主分支或 GitHub Pages 分支上查找网页内容(详见下文),并在几秒钟内为您构建网站。市面上有很多方法可以让您的网站上线,那么为什么选择 GitHub Pages 呢?

1. 易于使用

正如我将在下一篇文章中介绍的那样,GitHub Pages 的使用非常简单。在开始找工作之前,我希望能够尽快搭建并运行我的网站,而无需担心搭建数据库或配置服务器。由于我已经有一个经常使用的 GitHub 帐户,所以我熟悉 GitHub 的界面和流程,因此搭建 GitHub Pages 网站的过程并不费力。即使你没有 GitHub 帐户或对 GitHub 的使用方式不太熟悉,我仍然推荐使用 GitHub Pages。对于任何开发人员来说,掌握 GitHub 的使用方法都是必不可少的,所以这是一个熟悉它的绝佳机会。

2. 免费

是的,100%免费,是您首次创建网站的理想选择,尤其是在您求职期间。正如我下面会提到的,您可以选择投资一个自定义域名,但如果您对标准版本感到满意,则无需投资。

3.您可以添加自己的自定义域名

创建网站后,网站最初会通过 http(s)://.github.io 访问(例如http://iona-b.github.io)。虽然这个域名可能符合您的需求,但您可能想要更个性化一些的域名。您可以以实惠的价格在多个网站上购买不同的域名,并将您的 GitHub Pages 网站放置在这些网站上。

4. 开源

GitHub 非常棒,因为它实际上允许其他用户查看你的代码(只要你在公共仓库中工作)。这意味着你可以向人们展示你解决特定问题的有趣方法,为其他用户提供示例,并为编程社区做出贡献。

5.您可以随时进行更改并重新部署

网站部署完成后,更新和重新部署就非常简单了。如果您之前使用过 GitHub,那么您一定熟悉推送更改,只​​需额外一步即可重新部署您的网站。


替代文本

照片由@sapegin拍摄

为什么要使用 React?

使用 GitHub Pages 构建网站有很多选择,React 并非必需。例如,您可能想使用 GitHub 推荐的静态网站生成器Jekyll来构建您的网站。那么,为什么我选择使用 React 呢?

1. 这是提高 React.js 技能的好方法

我个人非常喜欢使用 React,所以选择用它来搭建我的作品集网站并非难事。如果你已经有 React 使用经验,这应该是一个相当直观的过程。根据你想要展示的内容,你可以随意设计得简单或复杂,这也是继续提升技能的好方法。如果你以前从未使用过 React,这可能是一个学习新知识的好机会。市面上有很多很棒的 React.js 教程,在提升技能的同时,保持网站的简洁也很容易。一旦你熟悉了,就可以随时添加更多功能。

2. 你可以访问许多令人惊叹的图书馆

使用 React,您可以访问各种不同的库,从而进一步个性化您的应用。想要添加视频?这里有一个可以实现。想要添加专门针对 React 的 CSS?这里有一个可以实现。想要使用 Unity 创建游戏并将其添加到您的 React 应用中?没错,这里也有可以实现。

3. React.js 社区非常强大

无论您在使用 React 时遇到什么问题,总有人在某个地方解答过您的疑问。React 由 Facebook 和 Instagram 工程团队以及资深专家提供支持,并且拥有丰富的文档、Stack Overflow 讨论区、开发者和 Medium 博客文章以及其他资源,可帮助您开启 React 之旅。


在以后的文章中,我将详细介绍如何使用 GitHub Pages 和 React 构建我的网站。到时候见!

有关如何开始使用 GitHub Pages 和 React 应用的第二部分可在此处查看。
有关如何使用自定义域名的第三部分可在此处查看。

来源

  1. 关于 GitHub Pages ”,GitHub 文档,访问日期:2020 年 10 月 8 日
  2. 使用 Jekyll 设置 GitHub Pages 网站”,GitHubDocs,访问日期:2020 年 10 月 8 日
  3. 什么是 GitHub Pages ”,GitHub Pages,访问于 2020 年 10 月 8 日
鏂囩珷鏉ユ簮锛�https://dev.to/ionabrabender/creating-a-portfolio-website-using-github-pages-and-react-part-1-1mm4
PREV
将 Ionic React 添加到现有的 React 项目
NEXT
如何自动化 REST API 安全测试