干貨！教你3步搭建個(gè)人網(wǎng)站！

時(shí)間：2022-08-24 15:48:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-24 15:48:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)站是由一個(gè)或多個(gè)網(wǎng)頁(yè)組成，也就是一個(gè)一個(gè)的頁(yè)面。比如你的網(wǎng)站可以有一個(gè)主頁(yè)，主頁(yè)里有文章列表，每個(gè)標(biāo)題點(diǎn)進(jìn)去都是文章的詳情頁(yè)面。當(dāng)然也可以整個(gè)網(wǎng)站就一頁(yè)，從頭劃到尾，就像微博。

制作網(wǎng)站的第一步，先從基礎(chǔ)的內(nèi)容搭建做起。

1、搭建網(wǎng)站

建網(wǎng)站可以簡(jiǎn)單理解成→ 制作單個(gè)網(wǎng)頁(yè) + 編排組織網(wǎng)頁(yè)間的跳轉(zhuǎn)關(guān)系。網(wǎng)頁(yè)分為 3 個(gè)部分，HTML, CSS, JS


HTML—— 控制網(wǎng)頁(yè)內(nèi)容，比如文章的內(nèi)容，標(biāo)題內(nèi)容等。

如果你不需要類似點(diǎn)贊評(píng)論之類的“功能”，那就只需要把文章寫(xiě)出來(lái)，保存下來(lái)，再轉(zhuǎn)成 HTML 格式就行。在網(wǎng)上應(yīng)該能找到相關(guān)的工具，本質(zhì)上跟寫(xiě)微信文章是一樣的，都是寫(xiě)出內(nèi)容，然后編輯器幫你保存成 html 格
JS 控制網(wǎng)頁(yè)邏輯，比如一個(gè)“點(diǎn)贊”的按鈕被按了以后，要告訴服務(wù)器這篇文章的點(diǎn)贊數(shù) +1。
假設(shè)你還想做點(diǎn)功能 比如用戶點(diǎn)一下是“贊”，再點(diǎn)一下是“取消”，下一次進(jìn)來(lái)的時(shí)候能夠看到“xx 人閱讀”這種東西。那你就需要會(huì)JS，因?yàn)橐?wù)端通信，獲取當(dāng)前的點(diǎn)贊數(shù)

CSS 控制網(wǎng)頁(yè)樣式，比如標(biāo)題多大字號(hào)，放在什么位置，什么顏色。

在編寫(xiě)樣式時(shí)，需要設(shè)計(jì)稿來(lái)指導(dǎo)CSS如何寫(xiě)。這個(gè)環(huán)節(jié)，前端經(jīng)常會(huì)因?yàn)闃?biāo)注等文稿信息不準(zhǔn)確而與設(shè)計(jì)師反復(fù)溝通，甚至爭(zhēng)執(zhí)。個(gè)人網(wǎng)站或許省掉了這一步驟，但大多數(shù)的程序員會(huì)在個(gè)人布局中犯難，并且，如果真的要把一個(gè)網(wǎng)站完完全全靠自己把代碼敲出來(lái)，耗時(shí)又耗力，完全可以使用模板，然后自己進(jìn)行修改完成。

推薦模板網(wǎng)站：Pixso

相比起傳統(tǒng)的代碼模板，Pixso的社區(qū)內(nèi)有各類型網(wǎng)站設(shè)計(jì)直觀呈現(xiàn)，你可以任選其中一個(gè)，直接進(jìn)行復(fù)用，文稿將自動(dòng)轉(zhuǎn)化為CSS代碼，復(fù)制即可使用。




對(duì)于需要多人協(xié)力制作的網(wǎng)站，Pixso可發(fā)揮的用處會(huì)更大。設(shè)計(jì)師能夠直接在Pixso內(nèi)進(jìn)行設(shè)計(jì)，完成后將文稿生成鏈接，通過(guò)鏈接傳輸給研發(fā)，點(diǎn)開(kāi)鏈接能夠直接獲取標(biāo)注和代碼，直接復(fù)用搭建。

2、購(gòu)買云服務(wù)器和域名

不過(guò)到這里你還只是能夠在自己的電腦上看到自己的網(wǎng)站
要想公布出來(lái)，你需要有一個(gè)能夠被公網(wǎng)訪問(wèn)到的地址，這個(gè)地址可以是“公網(wǎng) IP”，“公網(wǎng)域名”或者是“托管服務(wù)器”。

家里的電腦因?yàn)椴粠ЧW(wǎng) IP，如果將網(wǎng)站比作店面，相當(dāng)于這店面在小區(qū)里面，一般人連小區(qū)門(mén)都進(jìn)不去，你的店鋪就沒(méi)人能進(jìn)來(lái)。
而從阿里云租的服務(wù)器自帶公網(wǎng) IP，也就相當(dāng)于租個(gè)當(dāng)街的店鋪?zhàn)詭€(gè)門(mén)牌號(hào)，但光有門(mén)牌很難記，所以一般會(huì)給自己的店起個(gè)名字，方便記憶和搜索。

服務(wù)器 = 電腦
IP = 門(mén)牌號(hào)
公網(wǎng) IP = 當(dāng)街的門(mén)牌號(hào)
域名 = 店鋪名

1. 公網(wǎng)IP

類似于 192.168.1.1 這種 4 個(gè)數(shù)字組成，但一般家里的網(wǎng)都是私網(wǎng) IP，不連你家 wifi 就訪問(wèn)不到這個(gè)IP地址，可以在阿里云之類的租一臺(tái)服務(wù)器，一般都帶公網(wǎng)IP。然后把網(wǎng)頁(yè)文件放到服務(wù)器上去，再開(kāi)啟一個(gè)程序讓這些文件暴露在公網(wǎng)上，以后用瀏覽器輸入這個(gè)IP就會(huì)打開(kāi)網(wǎng)頁(yè)了。

2. 公網(wǎng)域名[可選]

比如 http://baidu.com 這種，4 個(gè)數(shù)字的 IP 不好記憶，所以你可以把公網(wǎng) IP 綁定到一個(gè)域名上，以后輸入這個(gè)域名就會(huì)自動(dòng)跳轉(zhuǎn)到 IP 上去 公網(wǎng) IP 在阿里云之類的往上都能買，幾塊錢(qián)能買一年（但續(xù)費(fèi)很貴）

3. 托管服務(wù)器

其實(shí)相對(duì)比較簡(jiǎn)單，你可以把網(wǎng)頁(yè)文件放到某些網(wǎng)站上去（比如 github），網(wǎng)站會(huì)根據(jù)你的用戶名給你生成一個(gè)鏈接，這個(gè)鏈接就能看到你的網(wǎng)頁(yè)文件 比如 http://xxxx.github.io/myweb.html

---

以上就是制作個(gè)人網(wǎng)站的最基礎(chǔ)步驟，除此以外，其實(shí)還有一項(xiàng)過(guò)程或許也很重要——為什么要搭建自己的個(gè)人網(wǎng)站。你的目的是自?shī)首詷?lè)，還是作為簡(jiǎn)歷進(jìn)行展示？

這兩者的區(qū)別，會(huì)讓你的網(wǎng)站內(nèi)容更有針對(duì)性，也更能達(dá)到預(yù)期目的。

更多互聯(lián)網(wǎng)干貨請(qǐng)戳：

→ 3步搞定產(chǎn)品經(jīng)理面試必問(wèn)題！

→ 如何從零開(kāi)始自學(xué)UI設(shè)計(jì)？

→ 整理！2021年超火的原型設(shè)計(jì)軟件