如

如何使用 React、Material UI 和 Netlify 创建您自己的（无模板）个人网站在 Netlify 上设置 Material UI 托管正在进行中更多

2025-05-27

如何使用 React、Material UI 和 Netlify 创建你自己的（无模板）个人网站

设置

材质 UI

在 Netlify 上托管

正在进行的工作

更多的

有时我觉得我在这里写的所有内容都可以以“不是另一个[一般类别]帖子......”开头，但我对这个世界还比较陌生，所以我仍然在涵盖和重新涵盖基础知识，但也找到了非常微妙的方法来添加到看似疲惫的概念中。

是的，我知道网上有很多关于创建个人网站的教程。以下是我最喜欢的一些入门教程（如果你在阅读我的博文之前还没有阅读过其他关于个人网站/作品集的教程，我建议你从这些开始，尤其是第一个）：

从这里开始

我的东西

1.0 版带模板，纯 JS/HTML/CSS

我的第一个个人网站几乎完全是模板。我用的是HTML5Up，我非常喜欢它。它易于使用，如果你想稍微定制一下，也可以调整。我用的是“Ethereal”模板，这可能是最常见的模板之一，但我仍然觉得它非常美观，而且我喜欢它的水平滚动条和图库。它在移动设备上看起来也很棒。如果你感兴趣的话，可以看看我的代码库，我做了一些非常细微的修改，当然还添加了我自己的信息。为了对比，我也会把它保留在 GH 页面上，以后我可能会继续调整它，只是为了学习。

是否采用模板

训练营结束后，我想尽快开始申请工作，所以我的作品集网站优先考虑简洁易用。而且我的项目（相对而言）和信息量都不是很大，哈哈！毕竟我才刚起步，所以我想尽量简洁明了。另外，如果我使用简洁易用的模板，我就能有更多时间学习……{查看笔记} 数据结构和算法？

说实话——这篇文章说得最好——使用模板绝对没有错。这里有一些我很喜欢的 React 专用模板。

我个人只是想自己做一个。我意识到自从训练营结束之后，除了 leetcode 之外，我几乎没有“写过代码”，所以现在似乎是重拾旧业、创建自己的网站的好时机。

下一步：我应该使用 React 吗？

我的第一个网站没有用 React，因为它看起来没必要。React 的魅力（我猜？）在于它的可扩展性，所以在这么小的网站上使用它感觉有点不合适。我仍然觉得我的最终目标是只使用我自己的 HTML、CSS 和原生 JS。

如果您还没有看过 - 我最喜欢的个人网站是 Dev 自己的Ben Halpern的网站。

但转念一想，我申请的很多工作都需要 React 经验。所以necessary这里可能没有 React，但这确实是一个很好的练习/复习。所以，我们来了。React 只支持 React。

狗表情包

如果我使用设计库，这个网站真的是“我自己的”吗？

我不确定！一开始我打算自己写所有 CSS，不用 Bootstrap 之类的库。我在训练营的期末项目中就是这么做的，而且我很喜欢，因为我想要尽可能大的灵活性。但后来我开始选择元素、调整颜色，时钟就开始像电影里那样指针转得越来越快，这样你就知道主角浪费了很多时间，工作太累了。

然后我意识到我从未使用过 Material UI，所以这可能是一个尝试新事物的好机会，而且还能让我的生活更轻松，而无需使用完整的模板。

好了，这就是我的长篇大论。现在有很多关于搭建个人网站的教程，也有很多关于 React 的教程，也有很多用 React 搭建个人网站的模板，但关于如何用 React 搭建个人网站的基础知识的超级最新文章却不多。所以，这就是我的“教程”——暂时用引号，因为我不确定它会有多深入。如果你对术语比较严格，我可能会更倾向于称之为“演练”或“概述”。

设置

npx create-react-app personal-site
cd personal-site
npm start
Enter fullscreen mode Exit fullscreen mode

我还想尝试一些与我看过的教程略有不同的东西，不过是用 jQuery 实现的。说实话……我以前根本没用过 jQuery。抱歉。这可能有点 hack，但我希望把我所有的个人数据都放在一个文件中，以便进行单源更新。我的第一个网站没有这样做。但现在我在 a或文件夹中有一个简单的data.js文件，目前为止它基本上包含以下内容：servicesconstantssrc

export const data = {
  name: "Sylvia", 
  occupation: "Software Engineer",
  description: "looking for work",
  image: "profilepic.png",
  ...
  }
Enter fullscreen mode Exit fullscreen mode

然后，在任何其他 React 组件中我都可以添加：

import {data} from '../services/data'
Enter fullscreen mode Exit fullscreen mode

然后使用常量：

    const name = data.name;
    const description = data.description;
    const profilepic= "images/"+data.image;
Enter fullscreen mode Exit fullscreen mode

并将其保存profilepic.png在images文件夹中public。

我还用它App.css来修改 Material 组件之外的 CSS。比如，我一开始不太确定背景该怎么弄，但我了解到一个很酷的颜色渐变，觉得可以稍微展示一下不太为人所知的 CSS 技巧，于是就把它添加到了App.css：

body {
  background: linear-gradient(#ccafac 20%, #bebbcc, #9ba6c9, #8d95b8, #ccafac );
}
Enter fullscreen mode Exit fullscreen mode

我显然不是设计师。这个背景可能很丑。我觉得它很酷，但有点老派。我愿意接受批评，但请让我放心。

编辑！我目前正在交替使用这个颜色渐变背景和我在 Unsplash 上找到的纯色图片背景。倒不是因为有人讨厌我的 CSS 渐变。所以，如果你现在正在浏览我的网站，心想，等等，我听说过的那个颜色渐变在哪里……我是那种每周都会重新布置家具的人。另外，我希望og meta image在 LinkedIn 的缩略图上显示一个漂亮的图片，所以我肯定用了 Unsplash。我可能还会保存一个纯色渐变图片作为缩略图……🧐 待定

材质 UI

在此之前，我只用过 Bootstrap 和 Semantic UI。这篇文章其实并不是一篇关于设计库细节的文章，但以下是我在决定使用 Material Design 时浏览过的一些不错的文章：

总而言之 - Material 很受欢迎，易于使用，而且我喜欢它目前的外观。另外……Google所以我打开文档，开始操作：

npm 安装

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core
Enter fullscreen mode Exit fullscreen mode

这就是你真正需要的全部内容了。至于字体、图标和响应式元标签，我还做了以下设置：

// for svg icons
// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons
Enter fullscreen mode Exit fullscreen mode

index.html并在元素内添加<head>：

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <meta
      name="viewport"
      content="minimum-scale=1, initial-scale=1, width=device-width"
      />
Enter fullscreen mode Exit fullscreen mode

我也用 Font Awesome 制作图标。我试过 Material 图标，但发现 FA 对品牌来说更容易（Material 好像没有 DEV 图标 😞 ），所以我把它添加<script src="https://kit.fontawesome.com/{your code}.js" crossorigin="anonymous"></script>到了图标的末尾index.html。FA 完全免费，你只需要提供你的邮箱地址就能获取这个工具包的链接。

此时，我还想将icon链接更改为 React 默认链接以外的其他内容。我只需保存一些类似小月亮表情符号的内容，然后将其更改为：

<link rel="icon" href="%PUBLIC_URL%/moon.png" />
Enter fullscreen mode Exit fullscreen mode

使用 Material 的一些一般想法：

  • 理解React hooks- 虽然我提到添加您自己的App.css更改（例如上面的背景），但我还修改了useStyles组件中的钩子以进行特定的更改，例如padding，margin
  • 从基本组件开始<Grid>，例如<Paper>，，，然后再讲解更复杂的模板和<Button>示例<Typography>
  • 文档中有一些非常基本的示例，它们仅使用 Material 组件，但大多数其他“示例”或“模板”都添加了很多内容，这使得尝试使用变得复杂

在 Netlify 上托管

我想用 Netlify，因为又一次有机会尝试新东西了。我记得我读过这篇文章，觉得 Netlify 很酷，速度也很快。我的网站很小，所以可能没什么影响。但即使在这么小的规模下，它看起来也比 GH Pages 快。太棒了！

有关设置自定义域的信息，请参阅以下文章：

对于大多数人来说，这可能是一个简单的过程，但对我来说却是新的，我很高兴有这个出色而清晰的演练。

但就单纯在 Netlify 上托管 React 应用而言，通常很简单。我遇到的麻烦比预想的要多，可能是因为我在实际操作之前就写了“很简单”，结果给自己带来了厄运，哈哈。

我按照终端提示和浏览器选项设置了持续部署。更多详细步骤请参阅文档和操作指南。

[编辑]我意识到自己在部署时犯了一个非常愚蠢的错误。我一开始用的是Components大写字母 C 的文件夹。然后，作为一个不注重细节的人，我把它改成了components小写字母 c。Netlify 持续部署区分大小写！！！真是个有趣的事实。所以我不得不这么做git mv。就在你自以为了解 git 的时候。不过无论如何——如果你想要持续部署，并且从一开始就按照 Netlify 的提示链接你的 GH，你甚至不必运行npm run build。如果构建失败——可能会出现类似的问题。

以下操作无需 CD 即可完成：

npm run build
npm install netlify-cli -g
netlify deploy
Enter fullscreen mode Exit fullscreen mode

因为（我可能解释得不太清楚，但大致意思就是这样）npm run build基于我的原始 git 仓库运行了一次构建。但是 CD 使用的是远程仓库，所以大小写不敏感的问题就在这里发生了。

正在进行的工作

艺术家的作品永远没有完成，对吧！我可能花了太多时间在编辑上（我所说的“编辑”指的是不停地切换#9ba6c9，#8d95b8直到我的隐形眼镜掉出来），但与此同时，我有时会完全被另一个项目分散注意力，忘记在个人网站上更新一些重要的东西。但也许这篇博文能激励我继续编辑/寻找更好的做事方式。infinite 👏 days 👏 of 👏 code

更多的

再见，谢谢你们所有的鱼

文章来源：https://dev.to/sylviapap/how-to-make-your-own-no-template-personal-website-with-react-material-ui-and-netlify-pij
Devto 翻译
PREV
重构 JS 函数中 if/else 语句的 5 种方法 1. 默认参数 2. 或运算符 3. 空值合并 4. 可选链式调用 5. 无 else 返回和保护子句
NEXT
我厌倦了