从零开始构建高效的投资组合。

2025-06-09

从零开始构建高效的投资组合。

大家好！我刚刚用100/100 的 PageSpeed
重新搭建了我的作品集，想和大家分享一下我的经验。PageSpeed /Lighthouse 的评分从来都不是固定的，所以它会根据 Google 的算法在 97 到 100 之间波动。

我会尝试逐步介绍我为这个简单任务所做的所有解决方法，并告诉您我使用了哪些工具，因为如果您想创建自己的投资组合或建立新的投资组合，它可能会对您有所帮助。

这也是我们在一家大公司中使用的堆栈，用于在 1 天的快速周期内开发和部署登陆页面到生产中（当然，CI 脚本与我们使用的 GCP 和 AWS 等云服务器不同，但其余部分几乎 100% 相同）因此对于大多数初学者来说，学习一些大公司如何有效地处理静态内容是可以的。

  1. 线框图（笔和纸）
  2. 原始数据（副本）
  3. 选择网站托管。
  4. 设置您的主机。
  5. 准备版本控制服务（Git）
  6. 持续集成（CI脚本）
  7. 选择包管理器（npm、npx、yarn..）
  8. 选择捆绑器（parcel.js、rollup、webpack……）
  9. Git 忽略
  10. CSS框架
  11. 构建结构（HTML）
  12. 应用样式（SCSS / CSS）
  13. JavaScript
  14. 部署到生产环境
  15. 优化
  16. 脚注

线框图

如果你已经有作品集了，那就别再纠结于旧作品集了，搜索数百个不同的作品集，把你喜欢的都收藏起来，然后反复浏览，思考哪个最让你喜欢。
这样你就有了新的想法，可以把它们画在纸上。
先画出一个基本结构，不要添加任何内容，只需写下形状和概念，比如在一个正方形上标注“图片”，在另一个正方形上标注“文本”。
当你觉得画得舒服了，恭喜你，你的设计就验证通过了。
重复这个过程两次，一次用智能手机视图，一次用桌面视图。

工具：笔和纸

数据

稍微想想你想要或需要添加哪些信息。
如果你有点完美主义，这可能会激励你达成那些让你对自己的作品集内容感到满意的近距离目标，比如你想说你了解 SCSS，所以你需要学习 SCSS 或了解更多相关知识。任何能让你学习新东西的东西都是好的。

当你在文档中输入完所有信息后，尝试简化它，并思考这些数据能做什么，或者你想用它们做什么。
问问自己：我想一眼就看到所有内容？或者我更喜欢在模态框中显示这些特定信息？或者在某些标签页中，或者在折叠面板中，或者……？

此时做出决定会让您对结果感到更满意，并能防止您循环重建部分投资组合。

如果您的数据不适合线框，请进行一些修改并重新绘制，以确保（至少有一点）您的数据在您的结构中看起来很美观。

工具：Google Docs

托管

现在您已经了解了投资组合的理想形态以及必须包含的数据，是时候为未来的投资组合寻找一个合适的平台了。
我推荐您使用共享主机，因为它是最便宜的选择，而且通常可以毫无问题地运行数百个静态投资组合。
过去10年里，我尝试过大约40个不同的主机，所以根据我的经验，我可以肯定地说，我会选择Banahosting。
它的价格约为4.95美元，而且我非常喜欢它的功能：

  • 它配备了 C-Panel，因此它包含更简单的控制面板来管理您的内容，它还具有终端限制访问
  • 可以在其上运行 Node.js 应用程序（也可以运行 PHP 服务器端编程语言、MySQL 数据库以及 HTML、CSS 和 JS）
  • 您可以免费使用您的域名创建电子邮件帐户。
  • 您可以免费生成并添加一个好的SSL 证书，这样您的网站就不会显得“不安全”。
  • 免费 DNS 管理。购买主机后，他们会生成您的实例，并将您的域名分布在他们的 DNS 上，这样您就可以在 24 小时内上线。
  • 过去 5 年里，我的静态网站从未崩溃过。我曾经遇到过一些托管问题，我的静态网页有时会因为“维护任务”或类似的借口而崩溃。
  • 包含 Softaculous，因此您可以轻松安装大量 Web 应用程序并使用它，或者简单地修改它来学习。

欲了解更多信息，请单击链接并转到顶部菜单上的“Web Hosting”按钮（如果您访问，请告诉 Banahosting 的人给我寄一些钱）。

工具：共享主机

设置您的主机。

一旦您的主机准备好了，您需要首先设置或搜索一些东西。

  • 转到服务->我的服务->单击您的服务->登录CPanel。
  • 在 CPanel 中，转到 FTP 帐户并为您的全新域名添加一个具有所需密码的新用户，且配额不受限制。
  • 前往 Let'sEncrypt SSL 并生成新证书。然后前往 SSL/TLS 并确保它已附加到您的域名，否则请附加。

目前就是这样，稍后您将能够使用所有功能。

工具：banahosting 的虚拟主机的 CPanel

版本控制

这可能是项目中最省事的部分了。前往 gitlab.com，创建一个帐户，验证后前往“项目”->“你的项目”->“新建项目”。

先不要关闭 GitLab，下一步我们将需要它。

Git-cli：您可以使用终端/控制台对 Git 仓库进行拉取、提交、推送等操作，也可以使用 Git-UI。我个人比较喜欢GitKraken应用，它在不同的操作系统上运行良好，并带有内置的合并工具和面板，不妨试试！

工具：GitLab

持续集成

请记住，我们为新域名创建了一个 FTP 帐户，并且我们在 GitLab 上注册并登录，好的，让我们将两者链接起来。

从本文复制脚本（如果您有兴趣了解更多信息，请阅读）。不要关闭它，您需要按照同一篇文章中的说明设置环境变量。

转到设置-> CI/CD-> 变量并按照链接上的说明设置名称和值。

在 GitLab 的 master 分支上，创建一个名为 的新文件.gitlab-ci.yml。
将脚本粘贴到该文件中，保存并推送到 master 分支。
现在，GitLab 会检测到 CI 脚本，并会尝试运行它，因为你已将某个提交推送到 Master 分支。由于环境变量已设置，因此它必须成功连接到你的主机，因此它一定不能失败。（如果你不理解这一点，请阅读之前链接的文章）。

工具：GitLab

包管理器

有很多选择，如果你觉得有需要，可以阅读所有相关信息。我会在每个选项的官方网站上放一些例子：

有超过 5 个，所以如果你想了解更多，只需谷歌搜索“yarn vs”或“bower vs”，它就会显示你可以检查的不同结果。

对于这种用例，我将选择Yarn classic。

有时由于 cmdtest，它在 Linux 上乍一看会引起问题，如果您此时遇到 yarn 问题，请运行以下命令：

sudo apt 删除 cmdtest
sudo apt 删除 yarn
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
回显“deb https://dl.yarnpkg.com/debian/ stable main”| sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get 更新  
sudo apt-get 安装 yarn
纱线安装

好了，现在您有了包管理器，让我们为项目设置它。

在您想要的位置创建一个目录，它将作为项目的根目录。
假设我们选择以下路径：

〜/文件/项目/我的投资组合

我们将在其上创建一个 void index.html（如果您要使用 preact、react、svelte.js、angular 或 vanilla 脚本应用程序，您还可以设置一个 index.js（或带有脚本的 index.html 来链接您的 js 应用程序），但它是一个作品集，所以让我们尽可能地使其轻便，所以我将选择一个 index.html 文件）。

现在，有了终端的上下文，我们将抛出 init 命令：

纱线初始化

它会询问一些问题来生成 package.json 文件。
并非所有问题都是必需的，而且说实话，你甚至不需要 yarn init 命令，你可以编写一个 package.json 文件，或者从其他项目复制一个。

如果你回答所有问题，结果将类似于以下内容：

{
  “名称”：“我的超棒包”，
  "版本"："1.0.0"，
  "description": "您能找到的最好的套餐。",
  "main": "index.html",
  “存储库”：{
    "url": "https://github.com/yarnpkg/example-yarn-package",
    “类型”：“git”
  }，
  "author": "Yarn 贡献者",
  “许可证”：“MIT”
}

工具：纱线

捆绑器

另一个选择，对我来说很容易，选择 Parcel.js，因为它开箱即用，所有操作“自动”管理，无需配置。如果你觉得更方便，或者想测试其他的，可以选择Rollup或Webpack。

让我们在项目中获取 Parcel.js：

如果你想将其添加为全局：

纱线全局添加包裹捆绑器

如果您只想将其用于该项目：

纱线添加包裹捆绑器

添加 Parcel.js 后，我们需要设置脚本来为你的项目提供服务。打开 package.json 文件并添加以下脚本：

{
  “脚本”：{
    “服务”：“包裹索引.html”，
    “build”：“parcel build index.html --no-source-maps”
  }
}

现在，为了澄清起见，我们的 package.json 文件看起来像这样：

{
  “名称”：“我的超棒包”，
  "版本"："1.0.0"，
  "description": "您能找到的最好的套餐。",
  "main": "index.html",
  “脚本”：{
    “服务”：“包裹索引.html”，
    “build”：“包裹构建index.html”
  }
  “存储库”：{
    "url": "https://github.com/yarnpkg/example-yarn-package",
    “类型”：“git”
  }，
  "author": "Yarn 贡献者",
  “许可证”：“MIT”
}

至此，我们已经正确设置了 bundler，可以发出yarn serve 命令来服务我们的项目了。Parcel 会输出项目的 URL，默认是http://localhost:1234。


注意：如果您在 scss 或 js 文件中输入了错误，服务可能会中断，您需要停止它并重新启动。没关系，只需按 Ctrl + C 到控制台，向上箭头并按 Enter 即可重新启动。

如果您遇到“端口已被使用”错误，请查看本文的附加内容，我在其中写了释放端口的命令并提供了一些建议。

工具：Parcel.js

.gitignore 文件

我们需要设置.gitignore 文件并将其添加到存储库，以避免将一些不需要的文件推送到版本控制。

它看起来是这样的：

。缓存
节点模块
*。地图
.ftp配额
。主意
.htaccess

这会阻止我们推送缓存文件、node_modules 和 sourcemap 文件。如果您的主机生成了 .ftpquota 文件，您可以添加；如果您使用 Jetbrains IDE，您可以添加 .idea 文件；如果您根据环境（本地、开发、生产……）进行自定义，您可以添加 .htaccess 文件。

建议：
此时我建议您运行 git 命令，它与 .gitignore 文件无关，但很有用。

有时我们需要更改文件的权限，或者在开发时拥有与生产时所需的权限不同的权限，这将导致 git 不会将权限更改解释为文件更改。

git config --global core.fileMode false

--global 标志将使其成为登录用户的默认行为。

如果您不想将其设置为全局，那么您可以使用切换命令：

git -c core.fileMode=false diff

工具：.gitignore

CSS框架

当然，没有必要只选择一个，这取决于你的 CSS 技能以及你的专长。
如果你是后端开发人员、数据科学家、数据库架构师或非 Web 开发人员等，你可能不熟悉 CSS，所以如果你想学习它，请尝试使用纯 CSS 或 SCSS（因为 Parcel 会自动将其编译成 CSS），但如果你认为它不会给你的工作带来任何麻烦，并且更喜欢以轻松的方式完成它，那么请使用框架，最好只导入你需要的部分，以免增加不必要的额外负担。例如，你可以选择 Mustard UI、bootstrap 或 foundation。

我没有使用原有的框架，而是使用 CSS Flex 创建了自己的“网格系统”，它是我为构建高效视图而构建的轻量级 CSS 框架的一部分（完成后我会分享它）。

我们来摘录一下其中的一段：

$col边距：16px；
.flex 容器 {
  宽度：100%；
  填充：0 15px；
}
.flexrow {
  显示：弹性；
  弹性流：行换行；
  边距：0 calc(#{$col-margin}/2 *-1);
}

我们设置了一个名为 flexrow 的基本布局包装器。它易于记忆和使用，但有点不准确，因为它可以根据以下条件包含或生成任意数量的行：

[class*='col-'] {
  边距：计算（#{$col-margin}/2）；
  自动换行：break-word；
}
.col-50 {
  弹性：0 1 计算（50% - #{$col-margin}）；
  最大宽度：计算（50％-#{$col-margin}）；
}

这是一个“列”，其宽度为父元素的 50%。
您可以根据需要生成任意数量的 .col-[Number] ，只需在 CSS calc() 函数中更改数字即可。

您可以分叉这个 codepen，我从中复制了我正在构建的框架的某些部分，并将其用作游乐场或绿地来构建您自己的东西。

当使用它时，由于我已隔离所有组件，因此我生成了一个带有@use语句的main.scss，仅导入我正在使用的组件，因此不会增加额外的重量。

工具：CSS Katana UI 框架

结构

如果您选择使用框架，请查看其官方文档。
如果您决定只编写需要的部分，或者 fork 我的“Katana-UI”（我甚至不知道这是否是最终的名称），您可以查看后续步骤。

查看框架块中链接的 codepen 上的 SCSS 代码，我们可以设置不同的结构，我将为此设置 3 个示例：

  • 布局具有全高块和自定义背景，并且标题位于其中间。 
    <-div class="container-fluid background-1 全高">
<-div class="container">
<-div class="flexrow">
  <-div class="col-100">
    <-h1 class="d-flex flex-center-x flex-center-y"> 我的作品集 <-/h1>
  <-/div>
<-/div>
<-/div>
<-/div>
  • 布局包含不同的背景和两个内容块，每个内容块占可用宽度的 50%。第一个内容块包含图片，第二个内容块包含文本： 
    <-div class="container-fluid background-default">
<-div class="container">
<-div class="flexrow">
  <-div class="col-50">
    <-img src="my-image.jpg" class="img-responsive">
  <-/div>
  <-div class="col-50">
    <-p> Lorem ipsum dolor sat amet
  <-/div>
<-/div>
<-/div>
<-/div>
  • 具有不同列宽的布局，第一列为文本，第二列为图像： 
    <-div class="container-fluid background-1">
<-div class="container">
<-div class="flexrow">
  <-div class="col-70">
    <-p> Lorem ipsum dolor sat amet
  <-/div>
  <-div class="col-30">
    <-img src="my-image.jpg" class="img-responsive">
  <-/div>
<-/div>
<-/div>
<-/div>

造型

如果你选择一个框架，请确保你只使用了@use你需要的 scss 组件。为了提高效率，我们不希望加载整个框架却只使用其中的一部分。下一点之后，我们会解释如何处理这个问题。
主题：你可能想要设置拼写错误、颜色、阴影以及其他覆盖框架默认值的设置，或者为你的 HTML 元素添加新的样式。

因此，我们将添加一个 theme.scss 文件，用于导入框架中用到的部分，并设置主题样式。例如：

@use'vars/breakpoints'；
@use'vars/colors'；
@use'vars/fonts'；
@use'基础/列'；
@use'base/containers'；

.内容块{
  下边距：25px；
}
#portfolio-header {
  位置：相对；
}
div.页面标题 {

  h1, h2 {
    字体系列：“Ubuntu Mono”、Consolas、Monaco、“Andale Mono”、等宽字体；
  }
  h1 {
   显示：弹性；
    @media 仅屏幕和（最大宽度：460px）{
      最大宽度：适合内容；
    }
    跨度#标题{
      字体大小：1.5em；
      字体粗细：粗体；
      @media 仅屏幕和（最大宽度：断点。$screen-xs）{
        字体大小：1.25em；
      }
    }
    跨度#cursor1 {
      动画：闪烁.75s线性无限交替；
      字体大小：1.5em；
      字体粗细：较轻；
    }
  }

需要澄清的是，如果您使用 CSS，则可以使用@import，这会在运行时发生，如果您使用 SASS/SCSS（推荐），@import则会在构建时运行，并提供单个 CSS 文件作为输出，这是首选（较少的请求），但我们不使用@import语句，原因如下：

  • @import使所有变量、混合宏和函数都可全局访问。这使得人们（或工具）很难分辨任何内容的定义位置。
  • 因为一切都是全球性的，所以库必须为其所有成员添加前缀以避免命名冲突。
  • @extend规则也是全局的，这使得很难预测哪些样式规则将被扩展。
  • 每次执行时都会执行每个样式表并发出其 CSS @imported，这会增加编译时间并产生臃肿的输出。
  • 无法定义下游样式表无法访问的私有成员或占位符选择器。

新的模块系统和@use规则解决了所有这些问题。

该@use规则会从其他 Sass 样式表中加载混合宏、函数和变量，并将来自多个样式表的 CSS 组合在一起。这些加载的样式表@use被称为“模块”。

当然您也可以在主 theme.scss 文件中定义它_partials。@use

让我们评论我们更喜欢使用 CSS 而不是 JS 来实现样式和交互组件。交互？没错，CSS 确实提供了一些有时难以实现的功能，但 SASS 可以帮上忙（它简化了你当然可以用纯 CSS 实现的任务）。
你可以使用不同的方法创建纯 CSS 模态窗口、手风琴/可折叠元素、标签页等等。

实现这种交互式组件的最常见方式是陷入伪选择器世界，特别是:checked和:target。

工具：SCSS

JavaScript

我在标题上说了“高效”，所以我会信守承诺。只在绝对必要时使用 JavaScript 才能帮助我们实现目标。

CSS 只需要下载和执行，而 javascipt 则属于另一条道路，我不会在这里深入描述，而是向您介绍从下载到执行的详细过程第 1 部分、第 2 部分和第 3 部分。

我必须承认，我只是快速阅读了这些文章，试图找到一些关键词，看看它是否对你有用，我已经把它固定到我的综合阅读中，因为我认为我可以从中学到一些新的东西，所以我给你一个关于网络上的 javascript 阶段的 tl;dr：

TL; DR
下载
脚本评估
脚本解析和编译
执行和垃圾收集

正如您所见，除了下载和渲染 CSS 这两个步骤之外，还有很多工作要做。

在我的投资组合中，我只设置了一个类似打字效果的脚本和外部分析脚本（使用 GTAG 异步和延迟），用于异步加载和延迟到控制选项脚本在 gtag 加载后运行。

当然，JavaScript 比 jQuery 或任何其他会使我们的生产视图超载的库更受欢迎。

工具：JavaScript

部署到生产环境

此时我们将拥有一个不错的静态作品集，我们只需要删除 dist/ 文件夹内容来清理它，发出yarn build“build for production”命令并将其作为第一个版本上传到 GIT。

如果您已经设置了 CI 脚本，请确保只将 dist/ 文件夹的内容发送到生产环境。您不需要在生产环境中使用所有基础源，而且即使您上传了这些资源，它们也不会被使用。

如果您没有设置 CI 脚本并且想要“采用旧方式”，只需将您的 dist/ 文件夹通过 FTP 上传到您的域的根目录即可。

您可能希望使用 pagespeed 和 lighthouse“按原样”上传和测试您的作品集，或者在下一步之后部署它。

工具：GitLab 上的 CI 脚本

优化

根据您的解决方法，您可以从 pagespeed 和 lighthouse 获得不同的警告。

Note that they are using an emulator with a crawler and monitoring tools that could be less accurate than you may think. I saw with my two eyes (at the same time) how pagespeed shows different scores for the same webpage on a 5 minute difference with a 20 score difference.
This shouldn't happen to you as much but on dynamic webpages with loads of content and modules. On static webpages the maximum difference I've saw it's about 3-5 points as much.

我建议您做几件事来从最佳实践中受益，如果您遇到其他问题，您可以在评论中询问我，我会回答您并提供可能的解决方法来解决您的问题。

  • Lighthouse 隐式地使用 pagespeed，因此我只需关注 lighthouse。
  1. 裁剪或缩小所有图片。您可以使用 Chrome 模拟器检查不同的屏幕分辨率/DPI，并查看图片的最大显示尺寸（在 Chrome 开发者工具的“计算”选项卡中）。因此，如果图片的最大显示尺寸为 500px * 300px，则没有必要将其设置为更高的尺寸，Lighthouse 会因此责怪您。
  2. 图片和视频压缩。任何布局都需要多媒体资源来丰富访客的感知，提升用户参与度，这对于 SEO 至关重要。但如果这些资源过载，用户体验会随着加载时间的增加而下降，这对 SEO 不利。该怎么办？压缩你的视频和图片，并提供更多选项！查看 PICTURE HTMLVIDEO标签，学习如何为旧版浏览器提供下一代格式的回退功能。

脚注

以后你需要反复练习这些步骤，不更新的网页会失去 SEO 排名，用户也会觉得无聊。最后一点可能不适用于你的作品集（毕竟这是作品集），但如果 SEO 对你来说很重要，那就定期更新内容吧。

记得时不时查看灯塔指标，确保你的分数保持在谷歌用来评估我们评分的“95%”基数的100分。或许，就在你读到这篇文章的时候，谷歌更新了某些内容，而我自己的投资组合在某个指标上降低了一些分数。

我还建议您在 Google 网站管理员工具（现称为Google 搜索控制台）上注册您的投资组合财产，添加 sitemap.xml 并检查可用性问题。

奖金

我正在写一些关于纯 CSS 组件的文章，这些组件通常用 JavaScript 编写。希望你读到这篇关于如何构建高效作品集的文章时，会觉得它很有趣。

这是从头开始构建 CSS 交互式组件 - 第一部分和第二部分

希望你觉得这本小圣经有用。也欢迎你在评论区分享你的感想，感谢阅读。

鏂囩珷鏉ユ簮锛�https://dev.to/joelbonetr/building-an-efficient-portfolio-from-scratch-29j5
Devto 翻译
PREV
通过示例揭开设计模式的神秘面纱
NEXT
为 Node 和浏览器编写自己的可链接事件发射器类