如今越來越多的設(shè)計師希望擁有自己的個人網(wǎng)站，設(shè)計師們可以把自己的作品、對設(shè)計的思考、個人簡歷等信息發(fā)布在個人網(wǎng)站。

響應(yīng)同學(xué)們的需求，UXD將通過一篇文章為同學(xué)們講解，如何從0開始搭建自己的個人網(wǎng)站。本文將涉及域名與服務(wù)器的購買、ftp服務(wù)器的設(shè)置、figma設(shè)計個人網(wǎng)站、vs code個人網(wǎng)站的開發(fā)、使用filezilla軟件將本地網(wǎng)站上傳至服務(wù)器上的工作流程等重要的知識點，需要的同學(xué)們請抓緊收藏。

STEP 01?

ip地址與域名的簡介

IP地址（Internet Protocol Address），全稱為網(wǎng)際協(xié)議地址，是一種在Internet上的給主機編址的方式。它是IP協(xié)議提供的一種統(tǒng)一的地址格式，常見的IP地址分為IPv4與IPv6兩大類，它為互聯(lián)網(wǎng)上的每一個網(wǎng)絡(luò)和每一臺主機分配一個邏輯地址，以此來屏蔽物理地址的差異。

IP地址是一個32位的二進制數(shù)，通常被分割為4個“8位二進制數(shù)”（也就是4個字節(jié)）。IP地址通常用“點分十進制”表示成（a.b.c.d）的形式，其中，a,b,c,d都是0~255之間的十進制整數(shù)。例：點分十進IP地址（100.4.5.6），實際上是32位二進制數(shù)（01100100.00000100.00000101.00000110）。

IPV4就是有4段數(shù)字，每一段最大不超過255。由于互聯(lián)網(wǎng)的蓬勃發(fā)展，IP位址的需求量愈來愈大，使得IP位址的發(fā)放愈趨嚴格，各項資料顯示全球IPv4位址可能在2005至2010年間全部發(fā)完(實際情況是在2011年2月3日IPv4位地址分配完畢）。

MacBook在終端（terminal）輸入 ifconfig 即可查詢本電腦的IP地址。

域名(Domain Name)是internet上用來尋找網(wǎng)站所用的名字，是internet上的重要標識，相當(dāng)于主機的門牌號碼。其中，.com(用于商業(yè)公司);.net(用于網(wǎng)絡(luò)服務(wù));.org(用于組織協(xié)會等);.gov(用于政府部門);.edu(用于教育機構(gòu));.mil(用于軍事領(lǐng)域);.int(用于國際組織)。

STEP?02

購買域名與服務(wù)器

在購買域名與服務(wù)器時，推薦在阿里云購買（阿里云官網(wǎng)：aliyun.com）由于阿里云推出了云翼計劃，每月只需要9.9元左右的價格即可購買一臺服務(wù)器。?

在購買域名時，可根據(jù)價格與自身情況選擇域名的后綴。不同的后綴也對應(yīng)著不同的租金價格。

STEP?03

通過DNS進行域名解析

人們?yōu)榱朔奖阌洃?，就用域名來代替這些數(shù)字ip地址來尋找主機，如seansun.space。每一個域名與IP地址是一一對應(yīng)的，人們輸入域名，再由域名服務(wù)器DNS（Domain Name Server）解析成IP地址，從而找到相應(yīng)的網(wǎng)站。

STEP?04

服務(wù)器上添加ftp服務(wù)

當(dāng)服務(wù)器購買完成時，可以在阿里云官網(wǎng)對服務(wù)器進行遠程控制。?我們想要將在本地設(shè)計之后的個人網(wǎng)站上傳到服務(wù)器上的話，就需要通過ftp協(xié)議（file transfer protocol）進行本地與服務(wù)器之間文件的傳送。

首先要在服務(wù)器上添加ftp服務(wù)器

服務(wù)器管理器?- 添加角色與功能（位置在web服務(wù)器下方）?

管理工具?- IIS Internet Information Service 網(wǎng)站-添加ftp站點（通過指定角色與用戶組的方式訪問ftpsite）

將端口設(shè)置成默認的21，無SSL（secure socket layer）

通過指定角色或用戶組的形式進行ftp服務(wù)器的訪問。

服務(wù)器管理器儀表盤?- 工具?- 計算機管理?- 本地用戶與組?進行用戶名與密碼的設(shè)置。

STEP?05

使用figma設(shè)計個人網(wǎng)站

個人網(wǎng)站上可以設(shè)計自己的個人logo、導(dǎo)航欄部分可以根據(jù)自身情況細分成項目、展覽、文章、個人信息等模塊。使用figma的柵格系統(tǒng)可使網(wǎng)站更加規(guī)整簡潔。

STEP?06

使用vscode?IDE?與?figma?code section進行靜態(tài)網(wǎng)站的開發(fā)

在前端開發(fā)中，有一個非常好用的IDE（integrated development environment）工具，Visual Studio Code，簡稱VS code。

在vs code中安裝一些前端開發(fā)插件可提高前端開發(fā)效率。如 Auto Close Tag, Auto Rename Tag, html tag wrapper, live server等。

可將figma code section的css（cascading style sheet）代碼復(fù)制，直接拷貝到網(wǎng)站開發(fā)的style.css外部樣式表文件。

Figma code部分與style.css外部樣式表對應(yīng)相同代碼如圓圈標記所示。

STEP?07?

使用FileZilla將本地文件傳輸?shù)椒?wù)器上

FileZilla是一個免費開源的FTP客戶端軟件，分為客戶端版本和服務(wù)器版本，具備所有的FTP軟件功能。可控性、有條理的界面和管理多站點的簡化方式使得Filezilla客戶端版成為一個方便高效的FTP客戶端工具。

通過FileZilla的Site Manager窗口，輸入ip地址、端口號、用戶名、密碼等，進行本地電腦與服務(wù)器的連接。

如圖所示為連接成功之后的界面，左邊為本地文件，右側(cè)為服務(wù)器端已經(jīng)傳送的文件。

ftp連接成功失敗的狀態(tài)會在界面的上方顯示。之后即可將本地設(shè)計的網(wǎng)頁傳送至服務(wù)器上，打造屬于自己的個人網(wǎng)站啦。

更多知識干貨以及其他海外留學(xué)的資訊可以關(guān)注UXD交互工業(yè)產(chǎn)品設(shè)計分享或者添加小助手，還可獲取講座直播哦~

|福利大放送 | WELFARE?
對于設(shè)計初學(xué)者，完成從0開始創(chuàng)作幾乎是不可能的，就像學(xué)習(xí)過程中書讀百遍其義自見一樣。有了大量的積累，才能在腦海里建立素材庫，這些素材庫能幫助同學(xué)們完成最初的設(shè)計想法積累，基于這樣的基礎(chǔ)再進行個性化的創(chuàng)作，最終才能做出高質(zhì)量的作品集。全球院校最新作品集免費拿！添加小助手即可獲?。?/p>

UXD交互工業(yè)產(chǎn)品設(shè)計學(xué)院是尤克斯國際旗下的一家專注于交互、服務(wù)、工業(yè)、產(chǎn)品設(shè)計專業(yè)的頂級設(shè)計學(xué)院。除了一對一設(shè)計課、基礎(chǔ)技能課程、小組課題、設(shè)計評圖、聯(lián)合教學(xué)外，我們提供不定主題的公開課和內(nèi)部小組課，教學(xué)計劃課程由三大部分組成，包括基礎(chǔ)軟件技能教學(xué)、設(shè)計理論系統(tǒng)講座、申請必備知識解析等。

本文版權(quán)歸UXD尤克斯所有??

部分圖片來自于網(wǎng)絡(luò)??

如有侵權(quán)請與我們聯(lián)系