今天，你将为自己创建一个最重要的应用程序——你的作品集。

每个 React 开发者或者 Web 开发者通常需要向潜在的客户或者雇主展示自己能做什么。

在这篇文章里，我们将使用 React、Tailwind CSS、Netlify 等等行业标准工具创建一个作品集网站。

开始吧！

作品集是怎样的

这是你将要建立的最终版本。

它的作用是展示你自己、你做过什么项目、你在做这些项目时用了什么技能，还有一个联系表单，以便客户或者雇主联系上你。

我们将使用什么工具

• 我们将用 React 来创建应用程序的用户界面。它将允许我们通过可重复使用的组件来组成登录页面的每一部分，以及添加我们想要的功能，例如博客。
• 为了设计我们的应用程序，我们将使用 Tailwind CSS。Tailwind 允许我们通过组合类名（classnames）将多种样式轻松应用到 React 项目上，给应用程序一个专业的外观。
• 为了把我们的应用程序部署到网络上，我们将使用免费的 Netlify。通过 CDN 的帮助下，用户可以通过我们自己的的域名快速访问到我们的项目。

如何开始

你可以在这里下载我们项目的启动文件。

当你获取到代码，你要做的是把（解压好的）项目文件夹拖到代码编辑器中，然后在终端运行命令。

npm install

然后可以开始了！

我需要使用什么工具来构建作品集

从创建到部署应用程序，需要：

1、你的电脑安装 Node.js，你可以在 nodejs.org 下载安装程序。
2、在你的电脑安装 Git，你可以在 git-scm.com 下载。
3、我建议使用 VS Code 作为你的代码编辑器。你可以在 code.visualstudio.com 下载它。
4、一个在 Netlify.com 上的免费的 Netlify 账户。
5、一个免费的 GitHub 账号。

如何建立作品集的结构

使用 React 的好处是，我们可以将我们的应用程序扩展到任意多的页面，并添加大量的内容，这是非常容易的。

但是，由于我们只处理一个页面，所以可以在应用程序组件中非常快速地找到需要的不同组件。我们将在顶部放一个导航栏，通过上面的链接可以跳转到作品集的不同部分。

然后，我们将有一个“关于”部分，这里包含我们的项目介绍、客户推荐以及联系表单。

这种快速的规划使我们能够弄清楚组件怎样命名，以什么顺序命名。下一步，把它们全部添加到我们的 App.js 文件夹中（在 src 文件夹）：

// src/App.js

import React from "react";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

如何创建组件

现在我们已经列出了所有这些组件，我们需要继续创建它们。

在源代码（src）文件夹中，我们将创建一个 components 文件夹，里面有我们需要的所有文件。

my-portfolio
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.js
    ├── data.js
    ├── index.css
    ├── index.js
    └── components
        ├── About.js
        ├── Contact.js
        ├── Navbar.js
        ├── Projects.js
        ├── Skills.js
        └── Testimonials.js

然后我们将创建每个 React 组件的基本结构，并使用 export default 从该文件导出：

// src/components/About.js

export default function About() {}

// repeat the same basic structure for all 6 components（在所有的 6 个组件中重复相同的结构）

最后在 App.js 中导入它：

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main>
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

请注意，总共应该有 6 个组件

Tailwind CSS 介绍

做完上面的，我们可以开始使用 Tailwind CSS 给我们的应用程序一个基本的外观。

使用 Tailwind CSS 的好处是，我们不必在 CSS 中手动编写任何样式，而是组合多个类（class）来创建我们想要的外观。

// src/App.js

import React from "react";
import About from "./components/About";
import Contact from "./components/Contact";
import Navbar from "./components/Navbar";
import Projects from "./components/Projects";
import Skills from "./components/Skills";
import Testimonials from "./components/Testimonials";

export default function App() {
  return (
    <main className="text-gray-400 bg-gray-900 body-font">
      <Navbar />
      <About />
      <Projects />
      <Skills />
      <Testimonials />
      <Contact />
    </main>
  );
}

如何构建 About 组件

现在开始第一部分，即 about 部分，介绍我们的基本情况和擅长的技能。

它还将包含联系表单的链接，以及我们过去的项目。由于这些链接将指向同一页面的不同部分，我们能使用 "/#projects" 和 "/#contact"。

为了使这些链接能跳转到每个部分，我们把项目部分 id 的属性设置为 projects，把联系部分的 id 属性设置为 contact。

// src/components/About.js

import React from "react";

export default function About() {
  return (
    <section id="about">
      <div className="container mx-auto flex px-10 py-20 md:flex-row flex-col items-center">
        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
            Hi, I'm Reed.
            <br className="hidden lg:inline-block" />I love to build amazing
            apps.
          </h1>
          <p className="mb-8 leading-relaxed">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui
            laborum quasi, incidunt dolore iste nostrum cupiditate voluptas?
            Laborum, voluptas natus?
          </p>
          <div className="flex justify-center">
            <a
              href="#contact"
              className="inline-flex text-white bg-green-500 border-0 py-2 px-6 focus:outline-none hover:bg-green-600 rounded text-lg">
              Work With Me
            </a>
            <a
              href="#projects"
              className="ml-4 inline-flex text-gray-400 bg-gray-800 border-0 py-2 px-6 focus:outline-none hover:bg-gray-700 hover:text-white rounded text-lg">
              See My Past Work
            </a>
          </div>
        </div>
        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
          <img
            className="object-cover object-center rounded"
            alt="hero"
            src="./coding.svg"
          />
        </div>
      </div>
    </section>
  );
}

对于本部分右侧的图片，我使用的 public 文件夹中的一个 svg 文件（coding.svg）。

这个图片只是作为一个临时的占位符，我强烈建议你使用你自己的图片。

如何构建 projects 组件

我们的项目部分是由一个 section 元素组成，id为 prpjects。这将是包含所有项目的图片集。

// src/components/Projects.js

import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";

export default function Projects() {
  return (
    <section id="projects" className="text-gray-400 bg-gray-900 body-font">
      <div className="container px-5 py-10 mx-auto text-center lg:px-40">
        <div className="flex flex-col w-full mb-20">
          <CodeIcon className="mx-auto inline-block w-10 mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
            Apps I've Built
          </h1>
          <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            facilis repellat ab cupiditate alias vero aliquid obcaecati quisquam
            fuga dolore.
          </p>
        </div>
        <div className="flex flex-wrap -m-4">
          {projects.map((project) => (
            <a
              href={project.link}
              key={project.image}
              className="sm:w-1/2 w-100 p-4">
              <div className="flex relative">
                <img
                  alt="gallery"
                  className="absolute inset-0 w-full h-full object-cover object-center"
                  src={project.image}
                />
                <div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
                  <h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
                    {project.subtitle}
                  </h2>
                  <h1 className="title-font text-lg font-medium text-white mb-3">
                    {project.title}
                  </h1>
                  <p className="leading-relaxed">{project.description}</p>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

注意，我们还将使用库 @heroicons/react，以便将 SVG 图标写成 React 组件。

我们从同一个文件夹中的 data.js 文件导入一个项目数组。在那里，我们导出一个对象数组，每个对象包含项目的数据。

// src/data.js

export const projects = [
  {
    title: "React Reserve",
    subtitle: "MERN Stack",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-1.gif",
    link: "https://reactbootcamp.com",
  },
  {
    title: "React Tracks",
    subtitle: "React and Python",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-2.gif",
    link: "https://reedbarger.com",
  },
  {
    title: "DevChat",
    subtitle: "React and Firebase",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-3.gif",
    link: "https://jsbootcamp.com",
  },
  {
    title: "Epic Todo App",
    subtitle: "React Hooks",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium dolore rerum laborum iure enim sint nemo omnis voluptate exercitationem eius?",
    image: "./project-4.gif",
    link: "https://pythonbootcamp.com",
  },
];

如何构建 Skills 组件

我们在这部分填写自己会的技能和技术。

这将包含一个简单的清单，列出在我们熟悉的主要工具，可用于雇主或客户的项目中。

再一次，我们将从 data 文件夹导入一个数组。但是这个数组是由字符串组成，是我们所知道的技能，如 JavaScript、React 和 Node。

// src/components/Skills.js

import { BadgeCheckIcon, ChipIcon } from "@heroicons/react/solid";
import React from "react";
import { skills } from "../data";

export default function Skills() {
  return (
    <section id="skills">
      <div className="container px-5 py-10 mx-auto">
        <div className="text-center mb-20">
          <ChipIcon className="w-10 inline-block mb-4" />
          <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-4">
            Skills &amp; Technologies
          </h1>
          <p className="text-base leading-relaxed xl:w-2/4 lg:w-3/4 mx-auto">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nisi sit
            ipsa delectus eum quo voluptas aspernatur accusantium distinctio
            possimus est.
          </p>
        </div>
        <div className="flex flex-wrap lg:w-4/5 sm:mx-auto sm:mb-2 -mx-2">
          {skills.map((skill) => (
            <div key={skill} className="p-2 sm:w-1/2 w-full">
              <div className="bg-gray-800 rounded flex p-4 h-full items-center">
                <BadgeCheckIcon className="text-green-400 w-6 h-6 flex-shrink-0 mr-4" />
                <span className="title-font font-medium text-white">
                  {skill}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

如何构建 Testimonials 组件

在 Testimonials 组件中，我们将列出一些过去的比较熟悉的客户的推荐信。

这些将由几个卡片组成，里面有推荐人和推荐人所在的公司。

我们将导入一个包含推荐信息的数组，里面的对象包含了评价、图片和公司。

// src/components/Testimonials

import React from "react";
import { TerminalIcon, UsersIcon } from "@heroicons/react/solid";
import { testimonials } from "../data";

export default function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container px-5 py-10 mx-auto text-center">
        <UsersIcon className="w-10 inline-block mb-4" />
        <h1 className="sm:text-4xl text-3xl font-medium title-font text-white mb-12">
          Client Testimonials
        </h1>
        <div className="flex flex-wrap m-4">
          {testimonials.map((testimonial) => (
            <div className="p-4 md:w-1/2 w-full">
              <div className="h-full bg-gray-800 bg-opacity-40 p-8 rounded">
                <TerminalIcon className="block w-8 text-gray-500 mb-4" />
                <p className="leading-relaxed mb-6">{testimonial.quote}</p>
                <div className="inline-flex items-center">
                  <img
                    alt="testimonial"
                    src={testimonial.image}
                    className="w-12 rounded-full flex-shrink-0 object-cover object-center"
                  />
                  <span className="flex-grow flex flex-col pl-4">
                    <span className="title-font font-medium text-white">
                      {testimonial.name}
                    </span>
                    <span className="text-gray-500 text-sm uppercase">
                      {testimonial.company}
                    </span>
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

如何构建Contact组件

在登录页的尾部，我们将加入联系表单，以便潜在的雇主能联系到我们。

这个表格包含 3 个输入：姓名、电子邮件和输入信息。

为了接收这些表格所提交的信息，我们将使用 Netlify 表格工具以轻松保存这些信息。

// src/components/Contact.js

import React from "react";

export default function Contact() {
  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

如何嵌入 Google Maps 位置

在表格的左边，我们将一个 Google Maps 嵌入，显示我们的所在位置。

我们可以在一个在线工具（embed-map.com）的帮助下这样做。你所要做的事只是输入你的位置并点击Generate HTML code。

在给我们生成的代码中，不要复制所有的代码，只要复制 ifame 中的 src 属性，然后替换掉 src 的默认值。

向 Netlify 发送任何提交的表单数据，Netlify Forms 需要将从静态 HTML 中识别表单。因为我们的 React 应用是由 JavaScript 控制的，而不是普通的 HTML 组成，所以我们需要在 public 文件夹下的 index.html 文件中添加一个隐藏的表单。

<!-- public/index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- head content skipped -->
  </head>
  <body>

  <form name="contact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
  </form>
  
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

我们需要隐藏这个表单，因为它不需要被用户看到，它只需要被Netlify看到。

如何从联系表单提交

完成上面这些，我们将回到 Contact.js。我们将使用 JavaScript 提交这个表单。

const [name, setName] = React.useState("");
const [email, setEmail] = React.useState("");
const [message, setMessage] = React.useState("");

我们将在 onChange 处理程序的帮助下，将用户在每个输入项的信息存储在 state。

// src/components/Contact.js

import React from "react";

export default function Contact() {
  const [name, setName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [message, setMessage] = React.useState("");

  function encode(data) {
    return Object.keys(data)
      .map(
        (key) => encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
      )
      .join("&");
  }

  function handleSubmit(e) {
    e.preventDefault();
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({ "form-name": "contact", name, email, message }),
    })
      .then(() => alert("Message sent!"))
      .catch((error) => alert(error));
  }

  return (
    <section id="contact" className="relative">
      <div className="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
        <div className="lg:w-2/3 md:w-1/2 bg-gray-900 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
          <iframe
            width="100%"
            height="100%"
            title="map"
            className="absolute inset-0"
            frameBorder={0}
            marginHeight={0}
            marginWidth={0}
            style={{ filter: "opacity(0.7)" }}
            src="https://www.google.com/maps/embed/v1/place?q=97+warren+st+new+york+city&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
          />
          <div className="bg-gray-900 relative flex flex-wrap py-6 rounded shadow-md">
            <div className="lg:w-1/2 px-6">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                ADDRESS
              </h2>
              <p className="mt-1">
                97 Warren St. <br />
                New York, NY 10007
              </p>
            </div>
            <div className="lg:w-1/2 px-6 mt-4 lg:mt-0">
              <h2 className="title-font font-semibold text-white tracking-widest text-xs">
                EMAIL
              </h2>
              <a className="text-indigo-400 leading-relaxed">
                reedbarger@email.com
              </a>
              <h2 className="title-font font-semibold text-white tracking-widest text-xs mt-4">
                PHONE
              </h2>
              <p className="leading-relaxed">123-456-7890</p>
            </div>
          </div>
        </div>
        <form
          netlify
          name="contact"
          onSubmit={handleSubmit}
          className="lg:w-1/3 md:w-1/2 flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
          <h2 className="text-white sm:text-4xl text-3xl mb-1 font-medium title-font">
            Hire Me
          </h2>
          <p className="leading-relaxed mb-5">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Illum
            suscipit officia aspernatur veritatis. Asperiores, aliquid?
          </p>
          <div className="relative mb-4">
            <label htmlFor="name" className="leading-7 text-sm text-gray-400">
              Name
            </label>
            <input
              type="text"
              id="name"
              name="name"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setName(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label htmlFor="email" className="leading-7 text-sm text-gray-400">
              Email
            </label>
            <input
              type="email"
              id="email"
              name="email"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
              onChange={(e) => setEmail(e.target.value)}
            />
          </div>
          <div className="relative mb-4">
            <label
              htmlFor="message"
              className="leading-7 text-sm text-gray-400">
              Message
            </label>
            <textarea
              id="message"
              name="message"
              className="w-full bg-gray-800 rounded border border-gray-700 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-900 h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
              onChange={(e) => setMessage(e.target.value)}
            />
          </div>
          <button
            type="submit"
            className="text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">
            Submit
          </button>
        </form>
      </div>
    </section>
  );
}

正如你在上面看到的，我们正在用一个特殊的encode(编码)函数对表单数据进行编码。

如何构建 Navbar 组件

最后一步是构建我们的 Navbar 组件。

// src/components/Navbar.js

import { ArrowRightIcon } from "@heroicons/react/solid";
import React from "react";

export default function Navbar() {
  return (
    <header className="bg-gray-800 md:sticky top-0 z-10">
      <div className="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
        <a className="title-font font-medium text-white mb-4 md:mb-0">
          <a href="#about" className="ml-3 text-xl">
            Reed Barger
          </a>
        </a>
        <nav className="md:mr-auto md:ml-4 md:py-1 md:pl-4 md:border-l md:border-gray-700	flex flex-wrap items-center text-base justify-center">
          <a href="#projects" className="mr-5 hover:text-white">
            Past Work
          </a>
          <a href="#skills" className="mr-5 hover:text-white">
            Skills
          </a>
          <a href="#testimonials" className="mr-5 hover:text-white">
            Testimonials
          </a>
        </nav>
        <a
          href="#contact"
          className="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">
          Hire Me
          <ArrowRightIcon className="w-4 h-4 ml-1" />
        </a>
      </div>
    </header>
  );
}

如何在较大的设备上将 Navbar 组件在页面的顶部显示？我们将使用 md:sticky 类添加到 header 元素。

如何部署作品集

现在，为了使我们的作品集上线，我们需要把应用程序推送到 GitHub。

一旦你熟悉了这个流程，我们可以首先创建一个新的 GitHub 仓库。之后，我们将运行 git add .、git commit -m "Deploy"，创建 git 远程，然后 git push -u orgin master。

一旦我们的项目建立在 GitHub 上，我们就可以去 Netlify，选择 Choose Site from Git。然后选择 GitHub 作为持续部署，并选择我们刚刚推送代码的 GitHub 仓库。

之后，我们的项目将自动部署到网络上！

下一步是什么

祝贺你，你现在可以通过一个在线的作品集应用程序向潜在雇主展示你的所有项目和技能了！

下一步要做的事设置一个自己的域名，最好用你的名字（例如 reedbarger.com）。

由于 Netlify 包含一个 DNS，你可以很容易在那里设置一个自己的域名。

可以考虑在你的 React 应用程序中添加一个博客，向潜在的雇主展示你更多的开发知识。

通过个人作品集表达你自己以及你作为开发者的热情所在，你将获得成功！

获得学习 React 的方法

The React Bootcamp 有你应该学习的 React 的所有知识，里面有视频、手册，还有特别的奖金。

数百位开发人员已经在这里掌握 React，找到他们梦想的工作，并掌握他们的未来

点击这里，当它开放时，你将得到通知

虽然 WordPress、Discuz!X 等建站系统早已非常成熟，但在人们更看重 UI/UX 设计的今天，它们专用的模板引擎反而成了二次开发最大的障碍。只要是近两年做过  Web 前端开发的同学就知道，不能利用基于 Node.js 的现代化工具链的项目，开发起来有多蛋疼。

Web 前后端分离催生了 Web 前端岗位，也让  WordPress、Ghost  这些老牌 CMS 系统开放了  RESTful API。但有的开源项目做得更加激进 ——  Headless CMS，前台界面都省了，只有后端 API  和后台界面，普通用户看啥你们自己写~

这其中最为优秀的便是  Strapi，因为它的后台设计不局限于传统的博客、门户，而是：

1. 数据模型灵活可配置（可用 Git 管理 JSON 配置文件）
2. RESTful API 完全支持  CRUD（增删查改）和  RBAC（角色权限）
3. 自身是个标准的  Node.js 后端项目，并有留有二次开发接口
4. 包括  Swagger  Documentation 在内的插件生态

这使得它既像 BaaS 中的  LeanCloud，又像 Python 开发框架  Django，在简单易用的同时，又不束缚专业开发者。

本地开发

创建项目

以下命令会一键创建项目骨架、安装依赖包、启动开发模式：

npm init strapi-app ~/my-project --quickstart

开发模式启动

下次继续开发时，则执行以下命令：

cd ~/my-project
npm run develop

如果执行  npm start，启动的后台系统只能添加数据，不能修改数据结构，是线上生产模式。

创建代码库

在 GitHub 上创建代码库后，把生成的代码传上去：

git init
git remote add origin https://github.com/my-id/my-project.git
git add .
git commit -m "[add] Strapi framework"
git push

服务器部署

下面以 Linux (Ubuntu 18.04) 为例，简介线上部署。

安装容器环境

# 安装 Docker
curl -fsSL https://get.docker.com | sh
# 安装 Python pip
apt install python-pip
# 安装 Docker Compose
pip install docker-compose

初始化 Git

为了后面自动化部署的方便，需要生成好  SSH 密钥对：

# 生成 SSH Key
ssh-keygen -t rsa -b 4096 -C "my_email@example.com"

cd ~/.ssh
添加 SSH Key 私钥
ssh-add id_rsa
信任 SSH Key 公钥

并将上述公钥添加到  [https://github.com/my-id/my-project/settings/keys][16]  页面。

如此，便可无需用户名、密码，直接克隆代码库：

git clone git@github.com:my-id/my-project.git /var/www

部署配置文件

将以下两个文件放在代码库相应路径中，并提交：

Docker 服务编排

~/my-project/docker-compose.yml

version: '3'

以上配置的是最简单的  SQLite  数据库，小型网站完全足够。

GitHub Actions 持续部署

以下配置让我们无需每次更新 Strapi 配置、代码时，登录服务器手动部署新版本：

~/my-project/.github/workflows/main.yml~

name: Deploy Server
on:
  push:
    branches:
      - master
jobs:
  SSH:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@master
      - name: Deploy
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.HOST }}
          username: root
          key: ${{ secrets.SSH_KEY }}
          script: |
            cd /var/www
            git fetch --all
            git reset --hard
            git pull
            docker-compose down
            docker-compose up -d

【注意】在推送代码前，务必去  [https://github.com/my-id/my-project/settings/secrets][22]  页面创建好上述配置中的变量：

名称内容HOST服务器  IP 地址SSH_KEYssh-keygen  命令生成的私钥，通常存在  /.ssh/id_rsa

总结

经过前面的一顿折腾，开发者只需在本机浏览器中点点鼠标、轻敲键盘，就能实现网站数据结构的设计；推送代码到 GitHub，就能实现网站后台的更新。而运营专员访问的线上后台锁定了数据结构，他们只能在现有数据表中添加具体数据。这样一来，面对单纯的数据存取，后端 API 和后台 UI 都不用开发了~

欢迎访问我的更多文章。

因为 COVID-19 新冠肺炎疫情的传播，我们公司要求员工在 2020 年 3 月初在家工作。

起初，从传统的办公室环境到远程工作的转变是惊人的：在纽约市，我没有一个舒适的工作区，在那里我可以写代码、写代码，或者做主动任务。

日子一天天过去，我已经尽力做出调整，而且和我的许多同事一样，我也花了大量时间寻找方法来适应新的程序。

好好利用这个机会，我经常提醒自己。

由于纽约 COVID-19 新冠肺炎疫情的流行，我知道我会在家里呆上好几个月。它让我想到了一个主意：我挑战自己，学习新的技能。在我看来，学些有挑战性的、与众不同的东西会是一件很愉快的事，也是一种非常需要的可靠的分散注意力的方式。

我花了些时间思考我要学什么。随后我进行了研究，并提出了一些我认为可以在隔离期开发的技能，这些技能满足以下条件：

• 学习技能应该是有趣的
• 一旦学会，我就应该在生活中更广泛地使用它
• 它应该帮助我创建对他人有用或有价值的东西
• 最后，我应该通过在线自学来学习这些技能

根据这些指导和我的能力圈，我列出了一些我想要深入了解的东西。

第一份清单是：

• 学习弹吉他
• 成为一名能胜任的业余厨师，能烹调各种营养食物
• 提高我在中国留学时的普通话水平
• 创建一个或多或少是从头开始的网站，帮助像我一样的人在家里工作

在和朋友们讨论和看过各种在线教程后，我选择建立了自己的第一个网站。立刻，我被迷住了。

我从中学到了很多，现在我想和大家分享几门核心课程。

随着 WFHAdviser.com 网站的开发，我的故事还没有完成，我每周会学到更多。

网上有很多资源，内容包括如何创建网站或者通过博客赚钱。当然这篇文章不是目的。

我想先强调一下我已经认识到的一些更高层次的知识，你应该知道的，然后才是你自己的网站项目。

收获 1：创建网站时，请围绕你感兴趣的主题

在我开始创建 WFHAdviser.com 的时候，我实际上是在创建一个在线资源，它可以帮助我解决一些我非常清楚的问题。

尽管流量不大，但我的想法是可行的，这个网站对于我和一些正在努力解决下列基本问题的同事来说仍然是有用的：

• 在远距离工作的时候，如何与他们讨论新的福利和好处
• 怎样在预算范围内建立家庭办公室
• 如何减轻压力或者在卧室工作时保持舒适的姿势？

我发现创建网站内容的过程非常有意义。

写这篇文章不仅很有意思，而且我还需要更多地了解人们所关心的，以及他们在家庭办公环境中所面临的挑战。

我做了定性研究，给朋友打电话，和他们谈谈他们是如何处理远程工作的。为了更好地理解人们在网上搜索什么，我做了定量研究和搜索查询趋势调查。

这一过程非常艰苦。在夜间和周末，努力从家庭空间获取更多关于工作的信息。我把这些学习成果变成了内容，然后把它们分享给生活中的重要人物(朋友、家人、伙伴)。他们再次和其他人分享我的网站。

我从我的朋友或前同事的朋友那里得到关于我的博客是如何帮助他们在家里成功工作的邮件和信息，这促使我建立更多资源、指南和内容来帮助这些读者。

所以，如果你想建立一个网站，一定要在垂直方向上建立网站。花费一些时间来理解你要构建的内容，以及为什么要这样做，并确保数字指纹的细节显示：站点的内容、外观和服务对象的所有权。

飞轮从热情开始。对一些人来说，也许会在 CBD 或者更多的技术内容发布平台找到激情。有可能存在的表是无限的。对于我来说，就是在家办公。

收获 2：速度很重要，所以要迅速行动

这个网站的第一版最多只能说是草率。把它称为带有一些链接的漂亮的登录页面是非常大方的。站点缺少我想要包括的功能，但无法在启动时完成。

有些我的博客内容需要编辑，但是我还是把它们放到了网站上。很遗憾，有些链接导致了 404 错误。

为什麽在发布时我会坦率地分享网站的缺点？

由于我认为，如果你热心于帮助用户，那么发布速度就非常重要。

在行动上显示偏见和坚持高标准并非相互排斥的概念。你应该对网站有一个设想，在它还未完成时就开始，知道未来的改进将产生更好的结果。

自 2020 年 3 月网站启动至 2020 年 8 月，我进行了约 1000 次编辑、改进和修复。假如我

等了五个月才把所有事情做对的话，数以千计的人将无法回答他们的问题，也不会知道如何在家工作。

飞轮需要一个初始动量来移动。

收获 3：赢得用户信任

最重要的一点是，用户需要信任一个网站(以及该网站的作者)，这样他们才有时间浏览网页，吸收网站的内容。

当用户第一次访问我的网站时，我发现有很多人跳转。考虑到网站的空位，这并不奇怪。

但通过大量的工作和网站的改进，人们实际上花了更多的时间来阅读我写的指南和我培养的资源。当我的作品在Google上被索引时，我对细节的关注也增加了。

在获得用户信任方面，经验是非常重要的。每星期我会检查三个指标：每页所花的时间、网站的退出和跳出率。

当我改进了常规网站和特定网站时，这些运营指标也得到了改善。为了减少延迟和加载时间，我将较大的图像文件替换为较小的图像文件。对网站速度进行优化。

对网站感兴趣的人并不多，但对它感兴趣的人却很多。为了对内容有用和有用，我在网站上花了一些时间。随着来访者告诉我他们的经历变得越来越好，我知道自己在朝着正确的方向前进。

在旋转时飞轮需要信任。

结论

在隔离中花费大量的时间让我有时间发展新的技能，即网站开发。这种技能在新兴的垂直行业（远程工作）（帮助人们在家里工作）中释放出新的热情。

人都想在家里学会如何成功地工作，这是我想要生活的世界，也是我不断创新的使命。

原文：How I Learned Web Development During the COVID-19 Lockdown and Built a Website Thousands of People Are Using，作者：Adam Naor