八小时快速建立网站：无门槛独立建站指南

Copyright of this article belongs to Rainy Design Studio, and the site administrator reserves the right of final interpretation.
Unauthorized reproduction or distribution of this content on any external platform or account is strictly prohibited, with the sole exception of our official social media channels.
We reserve the right to pursue legal action against any individual or organization for copyright infringement.
For more details, please refer to our Terms and Conditions.

一、前言

1.1 关于本文

大家好，我是 Rainy Design Studio 的 Rainy，今天我们来讲一下如何独立建站，跟着本文的步骤来，哪怕屏幕前的你是从未接触过建站知识的小白，在有一定计算机基础的条件下也可以轻松地在八小时内完成建站。

本教程是面向有一定计算机基础，且对网站开发感兴趣的朋友们，所以会做大量举例以辅助理解。如果你是 IT 从业人员，且已具备了一定的前端或 PM 知识，或是阅读了这篇教程并实现了网站部署，想要进一步学习技术栈的，请移步至博文专辑：《Next.js + Strapi + Tailwind CSS 全套实战教学》（已于2024年10月上线并不断更新内容中）以查看完整教程。

1.2 教程简介

本文约为 10,000 字数，教程部分共分为四个主要章节，学习时长为 6~8 小时，有配套的教学视频在哔哩哔哩发布，点此访问视频链接。 以下为教程大纲：

• 准备工作

  • VSCode 与 Node.js 安装
  • 环境配置
  • 管理项目文件夹
  • 启动网站开发模式

• 资源管理

  • 认识目录
  • 资源生产
  • 资源替换

• 代码编辑

  • 基础讲解
  • 内容修改
  • 样式修改

• 发布网站

  • 部署常识
  • 域名注册
  • 服务器租赁
  • 域名解析
  • SSL 证书申请
  • 连接到服务器
  • 项目部署

视频教程预览：

1.3 教程声明

本教程面向无门槛学习者，旨在引导网友体验建站过程，且互联网设计从业人员学习效果较佳。因考虑受众的普适性，该教程包含大量计算机及开发入门基础知识，且对项目流程做了较多简化，故此没有后端讲解，于任何情况下都不能作为正式、完整的前端教学资料，而是更多地倾向于行业体验，仅限个人学习使用。

注：本教程涉及到部分关于素材及软件的版权问题，详见条例与条款 - 免责声明。

二、准备工作

2.1 VSCode 与 Node.js 安装

前往 Visual Studio Code 官网下载安装包：https://code.visualstudio.com/

官网会自动识别你的系统，并提供稳定版下载。

接下来前往 Node.js 官网下载安装包：https://nodejs.org/

Mac OS用户请访问该链接下载简易安装包：https://nodejs.org/en/download/prebuilt-installer

如有需要请在列表中选择你的 Node 版本：https://nodejs.org/zh-cn/download/package-manager

Windows 系统建议安装到 D 盘根目录下以免发生各种错误，路径如图所示：

2.2 环境配置

接下来验证 node.js 是否已正确安装，并配置相关选项。

2.3 管理项目文件夹

请点此处下载项目文件。下文中区分Windows与OS X两种系统的终端，如果你正在使用Macbook学习，请阅读OS X的命令行。

解压文件到该目录下，会有my_next_project与nginx这两个目录。

随后启动VSCode，以Windows版本为例：

点击打开文件夹，选择项目文件夹（D:\Project\）即可。

2.4 启动网站开发模式

Codeblock copied!
> rainydesign_tutorial_demo@0.1.0 dev
> next dev

   ▲ Next.js 16.1.4
   - Local:        http://localhost:3000
   - Environments: .env

 ✓ Ready in ...

Codeblock copied!
> rainydesign_tutorial_demo@0.1.0
> next dev

▲ Next.js 16.1.4

- Local:        http://localhost:3000
- Environments: .env

✓ Ready in ...

三、资源管理

3.1 认识目录

3.1.1 全局路径

项目目录下的jsconfig.json设置了一个名为compilerOptions.paths的对象，代码如下：

Codeblock copied!
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/public/*": ["./public/*"],
    }
  }
}

即下述内容的 @/ 等同于项目文件夹的 ./src/ 目录，

同理，@/public/ 等同于项目文件夹的 ./public/ 目录。

3.1.2 Public 目录

项目目录下的 Public 文件存储了网站上可公共访问的文件，其 URL 为 域名/文件路径。以目录下的内容为例：

所有 Next.js 的静态资源都可按照内容分类存储到 Public 目录下。

3.1.3 Source 目录

项目目录下的 src/ 目录如同上述 public/img/ 及 public/vid/ 一样，是对应英文单词的缩写。source 意味着网站源文件目录，通常仅存储原始代码且不做公开。

值得一提的是 Next.js 在安装期可选择让用户是否采用 src 目录。为了方便管理，匹配新的规范，我们统一采用了 src 管理源文件。

相关内容于 4.1 基础讲解详述。

3.2 资源生产

3.2.1 资源寻获

主要管理网站上的图片；有需要的话少量视频。

本来考虑到字体的，但中文字体文件实在太大了，国内也用不了 Google font（有一个类似的站点但是中文字体截至发稿当天不支持引用），所以放弃了

以下枚举了免费下载资源并可做商业使用的网站：

还有很多网站就不一一枚举了，可以自行百度如“免费图片下载 知乎”搜索关键的专栏文章。此处以 pexels 为例：

在搜索栏中选择一种资源类型，然后输入关键词；为确保恰当的结果呈现，请尽可能使用英文进行搜索。

非赞助图片悬停均会显示下载按钮，点击以下载一张图片：

等待弹出表示感谢窗口后，图片会开始自动下载。建议将内容按标签进行分类，下例：

3.2.2 图像生成

访问 Microsoft Designer：https://designer.microsoft.com/image-creator，然后按需填写 promets。

本方法适用于英文基础较好的小伙伴，或自行配合 chatgpt、deepl 进行汉译英，然后将关键词写入描述框即可，下例：

A logo for website, abstract, flat, minimalistic

3.2.3 图片编辑

我们推荐使用 Adobe XD 进行图片编辑，附件包内提供的 XD 文件版本为 29.2.32.3，且只能用比该版本高的 Adobe XD 编辑内容。如果你没有安装 Adobe XD，这里提供了两个链接以供学习下载使用：

• Windows：点此获取下载列表
• Mac OS：点此获取下载列表

请点击跳转下载，或自行在Pesktop以及Filcr.com搜索“Adobe XD ”获取更多内容。 安装完毕后，请打开 XD 设计稿.xd 以浏览文件：

直接阅读设计稿中的说明，替换对应文件并导出即可。导出选项如下：

格式为 jpg，品质为 80，导出用于设计。

3.3 资源替换

访问项目文件夹目录下的 public/img/ 目录，按需替换文件即可。具体可参考教程视频了解细节。

四、代码编辑

4.1 基础讲解

4.1.1 页面与路由

一个网站（Website）通常是由多个网页（Webpage）组成的，而网页路由可以简单理解为域名后的 URL，比如 rainydesign.cn 与 rainydesign.cn/blog。在 Next.js 项目中，除了特定文件外，放在 pages 目录下的、后缀为.js 或.ts 的文件的文件名便是一个简易路由，其页面指向了这一网页模板。以下是项目页面文件一览：

4.1.2 组件简述

一个网站上存储的多个网页通常会反复引用相同的页面元素，有如导航与页尾这些层级较多的元素，也有如按钮这样层级较少的元素。我们可以将它们封装成一个个组件，在所需的组件或页面中引入，并添加到 html 片段之中。本教程项目中的通用组件存储于 @/components/ 目录下，主页专用的组件则存储于 @/components/index/ 目录下。

以下是本教程项目文件包含的组件一览：

4.1.3 html 简介

HTML 即超文本标记语言的缩写，一个以.htm 或.html 作为后缀名的网页文件会包含一些 HTML 标签，它们由尖括号作为标签符书写，包含了标签元素、属性及内容三项。以下枚举了几个 HTML 标签以作示例：

4.2 内容修改

HTML 常见的文本标签如下所示：

如需修改文本，直接修改标签中间的内容即可，如 <p>我是段落</p> 修改为：<p>修改后的内容</p>。

可以看到直接设置 h1~h6 并没有让文字大小起变化；修改样式具体在下个章节中讲述。

4.3 样式修改

4.3.1 CSS 简介

CSS 即 Cascading Style Sheets（层叠样式表）的缩写，用于控制 HTML 标签样式；打比方来说，假如 HTML 是一张草图，那么 CSS 的作用就是在给它上色。

目前我们只需用到一个 CSS 文件，那就是项目文件目录下的/public/styles/globals.css。以下是内容节选：

Codeblock copied!
@tailwind base;
@tailwind components;
@tailwind utilities;

body{
  position: relative;
  background: #FAFAFA;
  color: theme('colors.indigo.950'); 
}

...

以下是 CSS 代码简述：

4.3.2 认识 Tailwind CSS

如果你接触过前端知识，那么你将非常容易上手 Tailwind CSS；如果你没接触过前端知识，那么现在从 Tailwind CSS 入手了解 CSS 知识更是一件美事。

与上述的 nesting CSS 不同，Tailwind CSS 是关注实用性的、开箱即用的工具的代表之一，也更倾向于当前的 HTML 标准，这意味着你不需要思索命名，也不需要在设计稿、HTML 和 CSS 之间来回切换（或是多开一个窗口、多接一台显示器），大大提升了开发效率的同时，逐行调整 + 统一语法的撰写形式更易于维护，且适配组件开发以及 UI 设计标准。

Tailwind CSS 的又一好处是移动端优先的响应式设计。这意味着用 Tailwind CSS 构建布局与样式的网站不再是传统的由桌面至移动端兼容，这也更符合当下移动互联网时代的需求，为目前市场占有率更大的移动设备带来更好的浏览体验。

相信你已经在文件中发现一堆 class="..." 代码了，它们几乎全是 Tailwind CSS 的预设类（即 Class）。此处以便为理解的 @/components/Background.js 为例：

Codeblock copied!
export default function Background() {
  return (
    <div id="bgContainer" class="absolute size-full">
      <div class="absolute w-full h-[125%] overflow-x-hidden overflow-y-visible no-scrollbar">
        <div class="absolute flex justify-center items-center size-[35vw] top-[-3vh] left-[-15vw]">
          <span class="relative size-full rounded-full bg-gradient-to-tr from-gray-100 to-gray-300"></span>
          <span class="absolute size-[25%] right-[-5%] bottom-[10%] rounded-full bg-gradient-to-bl from-red-200 to-red-400 animate-infinity-ping lg:scale-75 lg:animate-infinity-ping 2xl:scale-50 2xl:animate-infinity-ping-2xl"></span>
          <span class="absolute size-[25%] right-[-5%] bottom-[10%] rounded-full bg-gradient-to-bl from-red-200 to-red-400 lg:scale-75 2xl:scale-50"></span>
          {/* <span class="absolute size-[25%] bottom-[-10%] rounded-full bg-gradient-to-bl from-red-200 to-red-400 origin-[50%_-150%] animate-infinity-spin"></span> */}
        </div>

        <div class="absolute flex justify-center items-center size-[40vw] top-[calc(10vh+15vw)] right-[-15vw]">
          <span class="relative size-full rounded-full bg-gradient-to-tr from-gray-100 to-gray-300"></span>
          <span class="absolute size-[25%] left-[25%] top-[-10%] rounded-full bg-gradient-to-bl from-sky-200 to-sky-400 animate-infinity-ping lg:scale-75 lg:animate-infinity-ping-lg 2xl:scale-50 2xl:animate-infinity-ping-2xl"></span>
          <span class="absolute size-[25%] left-[25%] top-[-10%] rounded-full bg-gradient-to-bl from-sky-200 to-sky-400 lg:scale-75 2xl:scale-50"></span>
          {/* <span class="absolute size-[25%] bottom-[-10%] rounded-full bg-gradient-to-bl from-sky-200 to-sky-400 origin-[50%_-150%] animate-infinity-spin-2"></span> */}
        </div>
      </div>

      <div class="absolute w-full h-[200%] top-[150vh] 2xl:max-h-[90rem]">
        <span class="relative block size-full bg-gradient-to-b from-sky-100/0 via-sky-100 via-fuchsia-100 to-fuchsia-100/0 opacity-50"></span>
      </div>
    </div>
  )
}

若使用 nesting CSS 撰写上述代码第 3~5 行的样式，除了摈弃上述 Tailwind CSS 的优点以外，还会将内容扩展到如下长度：

Codeblock copied!
#bgContainer{
    position: absolute;
    width: 100%;
    height: 100%;
}

#bgContainer > div:first-child{
    position: absolute;
    width: 100%;
    height: 125%;
    overflow-x: hidden;
    overflow-y: visible;
    -ms-overflow-style: none;
    scrollbar-width: none
}

#bgContainer > div:first-child::-webkit-scrollbar{
    display: none;
}

#bgContainer> div:first-child > div:first-child{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35vw;
    height: 35vh;
    top: -3vh;
    left: -15vh;
}
...

以下枚举一些常见的 tailwind CSS 样式：

如果你对了解 Tailwind CSS 的优势感兴趣，详见Adam Wathan的博客文章：CSS Utility Classes and “Separation of Concerns”

4.3.3 Class 变更

上面我们已经着重介绍了 Tailwind CSS 的优势和常见的 Class ，那么现在就让我们看看 Tailwind CSS 的 Class 是怎么在 Next.js 中工作的，且要如何修改样式。

Codeblock copied!
<p class="
      max-w-2xl 
      mx-auto 
      mt-10 
      text-center 
      xl:text-lg">如你已具备一定的开发能力，或是阅读了这篇教程并实现了网站部署，想要进一步学习技术栈可跳转至博文专辑：
      <a href="#" target="_blank" class="
      relative 
      mx-1 
      text-indigo-600 
      
      before:absolute 
      before:w-full 
      before:h-px 
      before:left-0 
      before:-bottom-0.5 
      before:bg-indigo-300/[.67] 
      
      after:absolute 
      after:w-0 
      after:h-px  
      after:left-0 
      after:-bottom-0.5 
      after:bg-indigo-600 
      after:duration-300 
      after:ease 
      
      hover:after:w-full">《Next.js + Strapi + Tailwind CSS 全套实战教学》</a>，以查看完整教程。
</p>

如果你想要文字居左，且链接为红色的话，修改部分内容即可：

Codeblock copied!
<p class="
      max-w-2xl 
      mx-auto 
      mt-10 
      text-left
      xl:text-lg">如你已具备一定的开发能力，或是阅读了这篇教程并实现了网站部署，想要进一步学习技术栈可跳转至博文专辑：
      <a href="#" target="_blank" class="
      relative 
      mx-1 
      text-red-600 
      
      before:absolute 
      before:w-full 
      before:h-px 
      before:left-0 
      before:-bottom-0.5 
      before:bg-red-300/[.67] 
      
      after:absolute 
      after:w-0 
      after:h-px 
      after:left-0 
      after:-bottom-0.5 
      after:bg-red-600 
      after:duration-300 
      after:ease 
      
      hover:after:w-full">《Next.js + Strapi + Tailwind CSS 全套实战教学》</a>，以查看完整教程。
</p>

以此类推，按你的喜好不断修改样式，直到合适为止。

五、发布网站

5.1 部署常识

所谓的“网址”即域名（Domain），需要经由专门的代理机构进行注册，并解析至相关的服务器公网 IP，最后由服务器系统中的 web 服务器进行域名解析配置，就可以将我们的域名展示在互联网上了。

开始之前，让我们先了解一些建站必备的基础名词：云服务商、云服务器、web 服务器、公网 IP、域名、域名解析、SSL 证书等。

• 云服务商：指提供了互联网应用或网站所需的各类项目的服务商，常见服务有域名注册、SSL 证书签发、云服务器、云存储、云数据库租赁等，国内比较知名的云服务商有华为云、腾讯云、阿里云、天翼云等等。
• 云服务器：指物理服务器经由云服务商托管，用户直接通过互联网链接访问操作的云端服务器。你可简单理解为云服务商提供了一台随时随地供你远程控制的电脑。
• web 服务器：此处与云服务器不同，指的是一个运行在服务器系统上的服务，常见用途为放置网页项目并解析域名共公网浏览，也处理访问端的请求，可以选择性地开放上传权限。你可以理解为云服务器是一座房子，而 web 服务器就是一扇向公众开放的大门；常见的 web 服务器有 nginx、apache 等等。
• 公网 IP：一台设备在公网上的地址，这和他的国家及其对应的代理商有关系，代理商获得入网许可然后将随机 IP 分配到各个设备上（你可以于百度搜索“IP”获知你的公网 IP 地址）。然而作为服务器，IP 地址必须是固定的。
• 域名：一种定位标识，因为公网 IP 不便于记忆所以使用域名代替，域名有一二三级之分，其中一级为后缀（.com，.net，.cn 等），二级为一级后缀的前一个字符串（如 rainydesign.cn），三级则再往前（如 www.rainydesign.cn）。
• 域名解析：通过将域名解析到相关 IP，我们得以在访问一个站点域名的时候连接到公网 IP 所在的服务器，以存取其 web 服务器上的信息。
• SSL 证书：首先，SSL 作为一种安全协议，具备身份验证和数据传输加密功能，在同时拥有已注册的域名与租赁的服务器的情况下可申请 SSL 证书，由受信任的数字证书颁发机构 CA 在验证服务器身份后颁发，并在服务器上端解析完毕，最后由 web 服务器配置 SSL 文件、使用 https 协议，之后通过该协议的域名访问就能一定程度地提升安全性。

5.2 域名注册

1. 访问腾讯云首页，在右上角搜索“域名”并点击进入页面：



2. 选择“产品&解决方案”，点击“立即注册”按钮：



3. 输入你想要注册的二级域名字符并搜索：



4. 如图所示，被抢注的域名就不能再注册了。这里推荐好好想一下自己的域名，常见的由和品牌或个人 IP 相结合，此处随便输入一个二级域名做示范：



5. 可以看到一级域名都可以抢注，商用建议拿下.com、.cn、.net 和.co 四个域名，个人使用的话哪个便宜选哪个就好，此处以.com 为例，点击“添加购物车”按钮并点击“立即购买”：



6. 准备好你的信息模板购买即可，之后可以在控制台中查看已有的域名（在上方搜索栏中“域名”并跳转至“域名注册/我的域名”即可）。

5.3 服务器租赁

我们可以根据项目的大小按需选择想要的服务器类型，对于网建而言，轻量应用服务器就很够用了。

1. 确定完你想要采购的服务器类型后，访问轻量应用服务器页面进行采购，此处依旧以腾讯云为例：



2. 选择一个套餐进行采购：



3. 推荐租赁一年起订，如果你没有开发基础，也不会在 linux 下使用命令行部署系统环境的话，建议选择 windows server。



注意，如服务器在国内则需要进行网安备案，这意味着你将实名公示。
4. 所有内容确认完毕后，点击购买即可，之后我们能在控制台 - 轻量应用服务器中确认已采购的服务器：



5. 按需进入查看即可。

5.4 域名解析

1. 回到控制台 - 轻量应用服务器 - 服务器列表，选择域名解析选项卡，点击“添加域名解析”：



2. 将二级域名及三级域名添加到解析列表（如 rainydesign.cn 和 www.rainydesign.cn）：



3. 点击确认提交。

5.5 SSL 证书

将域名解析到服务器后便可以申请 SSL 证书了。

1. 控制台中搜索 SSL 证书并打开：



2. 点击“免费申请证书”进行申请：



3. 输入你的域名和邮箱，点提交按钮进行验证：



4. 跳转至控制台 - 我的域名页面，进入域名，点击“解析”：



5. 点击“添加记录”按钮，将“记录类型”修改为“CNAME”，添加上面第 3 步提交验证后出现的“主机记录”和“记录值”，点击“确认”按钮保存：



6. 回到证书页面进行手动验证，等待验证完成即可。

5.6 连接到服务器

通过使用 windows 自带的 mstsc，我们可以轻松地远程访问 windows 服务器（mac OS 需要安装 Microsoft Remote Desktop）。

1. 来到控制台 - 轻量应用服务器 - 服务器内：



2. 如果你在租赁服务器时没有设置密码，此时可能需要手动修改一下，点击上图箭头所示的“重置密码”进行重置：



3. 接着查看“防火墙”选项卡：



4. 确保 80 与 443 端口开启，点击“添加规则”按钮，新建一个“3000”端口：



5. 然后回到“概要”选项卡，复制左上角的公网地址，之后按下 windows徽标键 + R，输入“mstsc”，回车：



6. 点击“编辑”，在弹出对话框中点击“更多选项”，如果当前 windows 用户不是 Administrator，则需再点击“选择其他账户”，至此账户与密码框都可以编辑，输入刚才保存的账号密码即可：



7. 填写完毕后，点击“确认”，并连接到服务器（如弹出安全性警告可以无视并继续连接）：

8. 

接下来就可以开始部署网站项目了。

5.7 项目部署

1. 将远程控制窗口最小化，然后回到项目文件夹（d:\project\），将本地项目文件夹内除了node_modules和.next文件夹以外的文件复制一份到my_website，就像这样：



2. 接下来需要下载 SSL 证书并替换到 nginx 目录下；访问腾讯云 - SSL 证书页面，刚才的证书申请应该已经成功了，点击下载并选择 nginx：



3. 下载完毕后，将压缩包复制粘贴进项目文件夹里的 nginx\nginx-1.25.3\conf\cert目录，解压到当前目录，并修改 nginx\nginx-1.25.3\conf\ 目录下的 nginx.conf文件中的参数：



4. 在 VSCode 中依次修改上述高亮文本内容，使其对应你的域名和 SSL 证书文件。仔细校对、确认无误后，在文件管理器里头将上述内容打个包，就像这样：



5. 复制文件，回到远程控制的服务器上，创建一个 project 目录，然后在目录内粘贴并解压，就像这样（别忘了校对项目目录名：my_website，不然等下一定报错）：



6. 确认目录无误后，在服务器上重新跑一遍二、准备工作的操作事项，不过这次只用装 Node.js、不用装 VSCode，所以可以将 Node.js 安装包一并传到服务器、安装，然后直接用 powershell 跑指令即可，直到在服务器端的 powershell 中正常启动 Next.js 项目为止：
想要方便预览的话，还可以顺带给服务器装个chrome浏览器，不过调试阶段以外不建议开启，chrome相当吃内存，选择firefox会好一些。



7. 现在你应该能通过公网 ip 后加 3000 端口号直接访问网站了，就像我们的官网一样：



8. 不过迄今为止网站都运行在开发模式，你需要使用打包指令将其打包并转入生产模式。在上述的 powershell 中按下 Ctrl+C 停止 Next.js（一次没反应就按两次，直到出现目录为止），然后运行 cnpm run build 进行打包，等待打包完毕后，运行 cnpm run start：



9. 如看到项目成功 start，最后启动 web 服务器即可，来到桌面上的 Project\nginx\nginx-1.25.3 目录，双击 nginx.exe 启动；



10. 在底部任务栏右键菜单中选择任务管理器，输入 nginx，如看到 nginx 正常运行，则可以在浏览器内输入网址访问你的网站了：



11. 如图所示，网站已经可以正常访问了。Enjoy！

六、常见疑问解答

按照B站站友、公众号留言与其他渠道的提问顺序依次解答。
视频将在FAQ内容达到一定数量后制作（做视频真的很累的 T.T）

1. 方便出一期Vercel、Cloudflare、Netlify等网站托管服务教程吗？

   • 当然，我们很愿意做一套前沿的部署教程，但国内最大的问题是大部分人不会科学上网，而这期教程又是面向零基础的宝子们（本教程的资源甚至包括一个可选下载的、完整的依赖包文件夹——node_module，就是考虑到cnpm -i都拉不下来的情况)，而那问题不方便公开讨论，所以我们这里仅提供国内的云服务商。
     等到下一期正式教程，我们就默认观看的宝子们都是业内伙伴了，会在第一章明确声明学习该课程所需的知识储备与硬性条件，前者就包括了遇到问题可以自行谷歌、无障碍浏览StackOverflow、HTML5 + CSS3 + Vanilla JavaScript精通等基本要求。
     下一期课程我们粗估了一下，大概有30+基础课与20+进阶课，按网站开发顺序一Part一Part发上来，届时会在课程的后半段讲到。相关课程博客请点击查看：《Next.js + Strapi + Tailwind CSS全套实战教学》，目前先更新个大纲，内容正在按照顺序生产了，敬请期待哦。

2. Adobe XD 我并不会用，能使用其他热门一点的图片编辑软件，比如Photoshop吗？

   • 当然可以，我可是从平面设计转行过来的哟😘。不过PS的话，编辑起来会稍微有一点麻烦，我这边也提供了一个Adobe XD设计稿转换过来的Photoshop设计稿件，会在这两天传到下载链接上，里头同样包含了操作指南，之后有空我也会出一期Adobe XD教程哟。
     这里我还是要疯狂安利一下XD的：对于未掌握PS的伙伴而言，Adobe XD的轻量级+对齐前端逻辑的设计理念更适合用户上手。与其说XD具备平滑的学习曲线，更不如说XD没什么学习门槛，而掌握了PS的同学上手XD更是开箱即用。
     这一点甚至体现在我们网建收尾的售后服务之中：我们会要求客户指派的运营人员掌握Adobe XD，无论对方是否有过设计经验，以生产对齐VIS的图片资源，如博客与视频封面，因为XD学起来实在是太快了。以下是XD模版化设计的各种功能优势：
     • Drag-to-replace：图片拖入即换；
     • Plugin Market：插件广场，常用的包括图标库、Logo与图片搜索、一键批量填充头像、根据数据生成图表、随机彩色、批量命名等；
     • Ctrl / Command + R：连续重复图层；
     • Ctrl / Command + E：导出所选资源；
     • 以及：Ctrl / Command + Enter ↩︎：实时预览项目动画等等。

     是的，Adobe XD是一款ui设计软件自然少不了动画和交互，毕竟是对标Sketch的软件。
     不方便访问figma，或是使用Windows的小伙伴们推荐使用。

3. 图片替换不太懂，具体要换啥？

   • 如果是用Next.js直接生成的静态页面，那么Next.js的公共图片会在根目录的/public目录下。你在网站项目中看到了哪张想换的图片，找到对应图片直接替换就好啦。具体要换的图片也都在设计稿中命名好了，替换完图片直接导出即可。

4. 我可以用Yarn管理项目么？

   • 当然！Rainy Design Studio的小伙伴们默认使用Yarn进行项目管理，因此我们自然也十分推荐，简单地在VSCode的终端中使用yarn、yarn add、yarn remove与yarn dev以完成开发阶段的大多数管理事项。不过国内还是老问题——科学上网，这节课又面向零基础，所以到了面向业内宝子们的正式课程我们就会用Yarn啦。

七、结语

（待补充）

八、资源下载

项目资源：蓝奏云下载地址
项目文件： Project.zip
设计资源： 设计资源包.zip
软件安装：访问 www.pesktop.com 并搜索XD
如果无法安装依赖请下载： node_modules.zip 并解压到项目目录
不习惯使用XD，想用Photoshop进行编辑的请下载：ps设计稿.zip