UXD手把手教你建立你的第一个网站，这可能是全网最详细的个人网站建站教程了！

2020-09-25 15:07 作者:UXD尤克斯国际艺术中心 0人读过 | 我要投稿

如今越来越多的设计师希望拥有自己的个人网站，设计师们可以把自己的作品、对设计的思考、个人简历等信息发布在个人网站。

响应同学们的需求，UXD将通过一篇文章为同学们讲解，如何从0开始搭建自己的个人网站。本文将涉及域名与服务器的购买、ftp服务器的设置、figma设计个人网站、vs code个人网站的开发、使用filezilla软件将本地网站上传至服务器上的工作流程等重要的知识点，需要的同学们请抓紧收藏。

STEP 01

ip地址与域名的简介

IP地址（Internet Protocol Address），全称为网际协议地址，是一种在Internet上的给主机编址的方式。它是IP协议提供的一种统一的地址格式，常见的IP地址分为IPv4与IPv6两大类，它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。

IP地址是一个32位的二进制数，通常被分割为4个“8位二进制数”（也就是4个字节）。IP地址通常用“点分十进制”表示成（a.b.c.d）的形式，其中，a,b,c,d都是0~255之间的十进制整数。例：点分十进IP地址（100.4.5.6），实际上是32位二进制数（01100100.00000100.00000101.00000110）。

IPV4就是有4段数字，每一段最大不超过255。由于互联网的蓬勃发展，IP位址的需求量愈来愈大，使得IP位址的发放愈趋严格，各项资料显示全球IPv4位址可能在2005至2010年间全部发完(实际情况是在2011年2月3日IPv4位地址分配完毕）。

MacBook在终端（terminal）输入 ifconfig 即可查询本电脑的IP地址。

域名(Domain Name)是internet上用来寻找网站所用的名字，是internet上的重要标识，相当于主机的门牌号码。其中，.com(用于商业公司);.net(用于网络服务);.org(用于组织协会等);.gov(用于政府部门);.edu(用于教育机构);.mil(用于军事领域);.int(用于国际组织)。

STEP 02

购买域名与服务器

在购买域名与服务器时，推荐在阿里云购买（阿里云官网：aliyun.com）由于阿里云推出了云翼计划，每月只需要9.9元左右的价格即可购买一台服务器。

在购买域名时，可根据价格与自身情况选择域名的后缀。不同的后缀也对应着不同的租金价格。

STEP 03

通过DNS进行域名解析

人们为了方便记忆，就用域名来代替这些数字ip地址来寻找主机，如seansun.space。每一个域名与IP地址是一一对应的，人们输入域名，再由域名服务器DNS（Domain Name Server）解析成IP地址，从而找到相应的网站。

STEP 04

服务器上添加ftp服务

当服务器购买完成时，可以在阿里云官网对服务器进行远程控制。我们想要将在本地设计之后的个人网站上传到服务器上的话，就需要通过ftp协议（file transfer protocol）进行本地与服务器之间文件的传送。

首先要在服务器上添加ftp服务器

服务器管理器 - 添加角色与功能（位置在web服务器下方）

管理工具 - IIS Internet Information Service 网站-添加ftp站点（通过指定角色与用户组的方式访问ftpsite）

将端口设置成默认的21，无SSL（secure socket layer）

通过指定角色或用户组的形式进行ftp服务器的访问。

服务器管理器仪表盘 - 工具 - 计算机管理 - 本地用户与组进行用户名与密码的设置。

STEP 05

使用figma设计个人网站

个人网站上可以设计自己的个人logo、导航栏部分可以根据自身情况细分成项目、展览、文章、个人信息等模块。使用figma的栅格系统可使网站更加规整简洁。

STEP 06

使用vscode IDE 与 figma code section进行静态网站的开发

在前端开发中，有一个非常好用的IDE（integrated development environment）工具，Visual Studio Code，简称VS code。

在vs code中安装一些前端开发插件可提高前端开发效率。如 Auto Close Tag, Auto Rename Tag, html tag wrapper, live server等。

可将figma code section的css（cascading style sheet）代码复制，直接拷贝到网站开发的style.css外部样式表文件。

Figma code部分与style.css外部样式表对应相同代码如圆圈标记所示。

STEP 07

使用FileZilla将本地文件传输到服务器上

FileZilla是一个免费开源的FTP客户端软件，分为客户端版本和服务器版本，具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户端工具。

通过FileZilla的Site Manager窗口，输入ip地址、端口号、用户名、密码等，进行本地电脑与服务器的连接。

如图所示为连接成功之后的界面，左边为本地文件，右侧为服务器端已经传送的文件。

ftp连接成功失败的状态会在界面的上方显示。之后即可将本地设计的网页传送至服务器上，打造属于自己的个人网站啦。

更多知识干货以及其他海外留学的资讯可以关注UXD交互工业产品设计分享或者添加小助手，还可获取讲座直播哦~

|福利大放送 | WELFARE
对于设计初学者，完成从0开始创作几乎是不可能的，就像学习过程中书读百遍其义自见一样。有了大量的积累，才能在脑海里建立素材库，这些素材库能帮助同学们完成最初的设计想法积累，基于这样的基础再进行个性化的创作，最终才能做出高质量的作品集。全球院校最新作品集免费拿！添加小助手即可获取：