從零到一制作個(gè)人網(wǎng)站

時(shí)間：2022-08-30 12:09:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-30 12:09:01 來源：網(wǎng)站運(yùn)營(yíng)

想擁有一個(gè)屬于自己的個(gè)人網(wǎng)站？展示作品？個(gè)人博客？專屬域名？

但是作為一個(gè)設(shè)計(jì)師，很多朋友跟我一樣英語(yǔ)不好、不會(huì)代碼、不懂計(jì)算機(jī)基礎(chǔ)，不知道如何開始怎么辦？既然寫出了這段話，我就要保證這篇分享中大家不用懂任何計(jì)算機(jī)技術(shù)，也不需要懂英文，只要會(huì)用鍵盤鼠標(biāo)就OK了。 （大神請(qǐng)忽略，本文主要面向初學(xué)者，共同交流進(jìn)步）


好，進(jìn)入主題！

基礎(chǔ)準(zhǔn)備篇

一個(gè)網(wǎng)站主要是由三個(gè)部分組成：

一.域名

二.服務(wù)器

三.你的網(wǎng)頁(yè)文件（前端+后臺(tái)）

他們之間的關(guān)系，我說下我的理解，有不對(duì)的還請(qǐng)指出。域名相當(dāng)于你的門牌號(hào)，指引你找到你的房間（服務(wù)器），但是這個(gè)房間（服務(wù)器）里空空如也，你要裝修成歐式還是中式展示給訪客的樣子，這要看你的網(wǎng)頁(yè)文件（前段+后臺(tái)）怎么設(shè)計(jì)了。

是不是很簡(jiǎn)單？但是從域名到服務(wù)器，服務(wù)器怎么運(yùn)行網(wǎng)站，這其中又有很多很復(fù)雜的知識(shí)，好在我們都不用去了解。建立一個(gè)能運(yùn)行的網(wǎng)站我們需要做的只有幾個(gè)簡(jiǎn)單的步驟：

1.購(gòu)買域名

自定義的域名都是要自己購(gòu)買的，但是好在現(xiàn)在大波的新的頂級(jí)域名都很便宜，可以挑個(gè)便宜的，比如: www.yourdomain.itd 1年才9塊錢，喝杯奶茶就不止了，如果要一定要買.com的域名也可以，因?yàn)?com 的域名現(xiàn)在可注冊(cè)的越來越少，所以價(jià)格也就貴一點(diǎn)，所以現(xiàn)在放出了一些新的頂級(jí)域名后綴，我覺得跟.com的解析起來都差不多，如果硬要說有什么不一樣，那可能就是用戶習(xí)慣的問題吧。（下面演示中我買了一個(gè).com的域名，55/years。）

2.準(zhǔn)備服務(wù)器

了解完域名，該選擇服務(wù)器里。也就是“房間” 。這里的房間，你可以選擇虛擬機(jī)，也可以選擇vps。虛擬機(jī)和vps有什么區(qū)別？

① 虛擬機(jī)：幫你裝了基礎(chǔ)系統(tǒng)并配制好了一些服務(wù)器需要運(yùn)行的基礎(chǔ)環(huán)境，如數(shù)據(jù)庫(kù)等（相當(dāng)于你租了個(gè)房子，但是給你做了簡(jiǎn)單裝修了，你不喜歡也不行，沒有控制權(quán)）

② vps: 給你裝了個(gè)基礎(chǔ)系統(tǒng)，控制權(quán)相對(duì)自由，可以在后期自己安裝些東西，比如***，你懂得。。

3.準(zhǔn)備你的網(wǎng)頁(yè)文件（前端+后臺(tái)）

這里就是決定你展示出網(wǎng)站是什么樣子的時(shí)候了，這一步的話，如果會(huì)點(diǎn)前端知識(shí)會(huì)更容易點(diǎn)。不會(huì)的話那就是跟我一個(gè)水平了，沒關(guān)系，可以選擇wordpress，一個(gè)強(qiáng)大而又方便的個(gè)人博客系統(tǒng)，用來做網(wǎng)站由來已久。

基礎(chǔ)的就到這里就差不多了，我也就知道這么多啦。但是我感覺可以再嘮叨兩句：

買域名和服務(wù)器選擇國(guó)內(nèi)或者國(guó)外都可以，最好都首選大廠產(chǎn)品。國(guó)內(nèi)的服務(wù)器優(yōu)點(diǎn)是穩(wěn)定、而且快，缺點(diǎn)就是麻煩點(diǎn)，要備案，當(dāng)然還有貴啦。我們剛開始練手可以選擇國(guó)外的服務(wù)器，比較便宜一點(diǎn)，而且不用備案，就是偶爾不太穩(wěn)定，訪問速度對(duì)比國(guó)內(nèi)的會(huì)慢點(diǎn)。

OK，實(shí)例演示一遍。

實(shí)操篇

從這里就開始實(shí)際操作如何演示如何建立一個(gè)個(gè)人網(wǎng)站，實(shí)際就是上面三個(gè)步驟細(xì)分出來更多的小步驟，從1到N,包括從買域名、服務(wù)器、搭建服務(wù)器面板等，所需要的鏈接都放到下面步驟中，跟著一步步做就可以了。

① 購(gòu)買你想要的域名，就是門牌。我是在萬(wàn)網(wǎng)上面買的域名，阿里云旗下的。首先你要注冊(cè)個(gè)賬號(hào)： 阿里云注冊(cè) 有淘寶或者支付寶賬號(hào)的可以直接登錄，你不想用淘寶賬號(hào)登錄用手機(jī)號(hào)碼注冊(cè)一個(gè)也可以。

② 注冊(cè)完后拉到最下面，點(diǎn)擊萬(wàn)網(wǎng)，找不到的百度。輸入你想要購(gòu)買的域名然后查詢一下是否被人注冊(cè)過。

③ 選一個(gè)你喜歡的后綴，每個(gè)詞語(yǔ)搜出來的價(jià)格都不一樣，一般字母越少或者常用詞拼寫的會(huì)比較貴。這里有一點(diǎn)要加粗提醒下，不要去購(gòu)買特定的后綴，如.http://gov.cn 這種是政府機(jī)關(guān)專屬的，就算你買了也解析不了，還有一些是要有公司資質(zhì)或者其他資質(zhì)，具體百度搜下哪些個(gè)人可以用的。大部分的詞語(yǔ)是可以自己用的。我在這邊購(gòu)買了一個(gè).com的，加購(gòu)物車付款的過程就不寫了，購(gòu)買完的域名在阿里云的控制臺(tái)-域名里可以看見，初次購(gòu)買會(huì)要你填寫自己的身份資料，要你備案，這個(gè)域名備案比服務(wù)器備案要簡(jiǎn)單很多，跟著操作填寫就可以了。

④ 域名準(zhǔn)備好了，就要準(zhǔn)備服務(wù)器了。服務(wù)器我用的是國(guó)外的，國(guó)外的服務(wù)器選擇性有很多，我們既然是練手的話我個(gè)人建議優(yōu)先選擇 vultr 優(yōu)點(diǎn)是按小時(shí)計(jì)費(fèi)的，就是說一開始可以買個(gè)最便宜，最低配置的來實(shí)驗(yàn)，等你熟悉了或者什么時(shí)候不想用了就把這個(gè)刪了隨時(shí)換一個(gè)。缺點(diǎn)呢，就是用支付寶買的話沒有優(yōu)惠啦，用paypal或者信用卡支付的話沖10美金送25美金，簡(jiǎn)單理解就是：充值10美金用最低配置（個(gè)人站綽綽有余了）的服務(wù)器可以用10個(gè)月。

鏈接：

https://www.vultr.com/?ref=7519565 充值10美金送25美金的，我是用的是這個(gè)。

如果你暫時(shí)不想花錢呢，那就點(diǎn)下面的鏈接，注冊(cè)送50美金，可以去體驗(yàn)下，不過這個(gè)錢好像是有有效期的，一個(gè)月還是兩個(gè)月，到時(shí)候你要用的話再充值的話不知道還有沒有送，留意下看有沒有多充多送。官方活動(dòng)一直在變，有想了解的留意下就可以了。

https://www.vultr.com/?ref=7938020-4F 注冊(cè)送50體驗(yàn)金，有時(shí)間限制。以前有充25送25不知道現(xiàn)在有沒有，自己看下。

填寫郵箱密碼，直接注冊(cè)吧

⑤ 這個(gè)就是你注冊(cè)完后的界面了，當(dāng)時(shí)我是用的光大的信用卡支付的，綁定支付的時(shí)候還天天擔(dān)心給我亂扣費(fèi)，然而用了這么久其實(shí)也沒啥問題，你不去點(diǎn)擊充值它不會(huì)給你扣費(fèi)。當(dāng)你有一天不想用vultr了，你把在用的服務(wù)器destroy，記得要把網(wǎng)站和數(shù)據(jù)庫(kù)先備份好（怎么備份很簡(jiǎn)單，有不懂我再寫），就可以把卡刪了。不過充值的話，我還是建議去注冊(cè)個(gè)paypal，畢竟自動(dòng)扣費(fèi)不符合國(guó)人習(xí)慣，用paypal綁定你的卡去支付，一樣可以得到優(yōu)惠，你還可以在PayPal中把vultr自動(dòng)續(xù)費(fèi)給取消掉。

⑥ 當(dāng)你注冊(cè)充值完了，就可以動(dòng)手去建你的第一個(gè)服務(wù)器了。點(diǎn)擊servers右邊的加號(hào)來創(chuàng)建你的第一個(gè)服務(wù)器吧。

⑦ 第一步先選擇機(jī)房國(guó)家，位置的話我們選擇離我們近一點(diǎn)的新加坡或者日本都可以。如下選擇一個(gè)離我們比較近的新加坡機(jī)房，這個(gè)機(jī)房里已經(jīng)沒有最低的3.5/month 那就選擇一個(gè)5/month 雖然價(jià)格貴了一些相應(yīng)的配置也高一點(diǎn)。接下來勾選下enable IPv6 兼容IPv6，下面的服務(wù)器名稱取一個(gè)容易記的，可以是你的域名名稱，可以一次性開3個(gè)，然后選擇一個(gè)能用的，完了點(diǎn)擊藍(lán)色的按鈕 deploy now 開始部署，等到installing變成running就OK了。此時(shí)你就在新加坡的機(jī)房租用了一個(gè)屬于你自己的空間。

----

選機(jī)房的時(shí)候有幾個(gè)問題要注意下，如果下面步驟 ⑨ 中遠(yuǎn)程連接服務(wù)器超時(shí)或者連接不上，那很有可能你開到的這個(gè)服務(wù)器被國(guó)人給玩壞了。就銷毀掉重新開一個(gè)，我寫這個(gè)剛開始開的東京的機(jī)房，開了兩個(gè)都連不上，開一個(gè)的成本折合人民幣6分錢左右吧。。

比如這個(gè)下面服務(wù)器就是連接不上，不能用。刪掉它，就不會(huì)計(jì)費(fèi)了，最后留一個(gè)你能用的就可以。

⑧ 打開剛才創(chuàng)建的服務(wù)器，有幾個(gè)參數(shù)要了解下，看下圖，每個(gè)月有1000g的免費(fèi)流量（已經(jīng)很多了），右邊的是本月份服務(wù)器到現(xiàn)在的費(fèi)用，這個(gè)是一個(gè)月一計(jì)算，平均一個(gè)小時(shí)0.007美分相當(dāng)于人民幣4分錢。下面兩個(gè)就是服務(wù)器的IP跟自己服務(wù)器的遠(yuǎn)程密碼，這個(gè)要隱藏好，相當(dāng)于你家門的鑰匙，泄漏了隨便人都可以改你東西。

⑨ 服務(wù)器已經(jīng)準(zhǔn)備好了，我們不懂代碼也不懂計(jì)算機(jī)知識(shí)，沒有辦法用發(fā)命令的方法操控服務(wù)器，所以就要裝一個(gè)可視化面板來方便接下來的操作?？梢园惭b一個(gè)寶塔面板，我覺得寶塔對(duì)新手還是很友好的，比較好用。先注冊(cè)個(gè)賬號(hào)：寶塔面板 上面有一些服務(wù)，現(xiàn)在還用不著，等你以后熟悉了，有需要再去購(gòu)買，我們先用免費(fèi)版的。


第一步要先連接你的服務(wù)器，windows和Mac系統(tǒng)方法不同，windows操作看一，Mac直接看二。

一、Windows：用ftp連接工具連接你購(gòu)買的服務(wù)器，這工具有很多種，會(huì)用的用自己習(xí)慣的，我用的是putty。

1.下載并運(yùn)行putty，把你服務(wù)器的IP輸入進(jìn)去

2.點(diǎn)open 的時(shí)候會(huì)有一個(gè)彈窗，安全提示選擇yes就看下面的界面。打上 root 然后回車（Linux系統(tǒng)不能直接用刪除鍵，注意別打錯(cuò)了）——如果在這一步一直卡住沒有提示你yes那可能就是這個(gè)IP是不能用的，重復(fù)上面⑦的步驟。

3.把你服務(wù)器的密碼（看步驟⑧里那串很復(fù)雜的數(shù)字）復(fù)制過來用快捷鍵ctrl+v或者單擊右鍵粘貼（下面面板不會(huì)顯示你粘貼的密碼，實(shí)際上已經(jīng)粘貼了），回車。

4.看到下面這個(gè) [root@vultr ~] # 界面的時(shí)候就代表你已經(jīng)連上你的服務(wù)器了，可以直接安裝寶塔面板，看下一步。

5.安裝最新的寶塔6.8面板，復(fù)制下面虛線內(nèi)代碼，粘貼，回車：

-------

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

-------

會(huì)看到下面滾代碼的界面，碰到讓你選擇確定的界面直接輸入y，然后回車，安裝時(shí)間有幾分鐘，可以去泡杯茶再回來看看。

6.滾完代碼了，就是下面這個(gè)界面了。畫重點(diǎn)，下面框出來的是你的初始賬號(hào)和密碼，拿個(gè)小本本記起來，把這個(gè)信息記下來后就可以把putty關(guān)了。




二、Mac：蘋果系統(tǒng)就簡(jiǎn)單一點(diǎn)，不需要你再去下載工具，直接打開你的終端工具。

1.find—應(yīng)用程序—實(shí)用工具—終端

2.輸入： ssh root@0.0.0.0 然后回車，會(huì)問你是否繼續(xù)連接，輸入yes，回車（0.0.0.0就是你的IP地址）——如果在這一步一直卡住沒有提示你輸入yes那可能就是這個(gè)IP是不能用的，重復(fù)上面⑦的步驟

3.把你服務(wù)器的密碼（看步驟⑧里那串很復(fù)雜的數(shù)字）復(fù)制過來用快捷鍵ctrl+v或者單擊右鍵粘貼（下面面板不會(huì)顯示你粘貼的密碼，不用擔(dān)心沒有粘貼上，粘貼一次就可以），回車。跟windows一樣出現(xiàn)如下提示代表你成功連接上服務(wù)器。

4.安裝最新的寶塔6.8面板，復(fù)制下面虛線內(nèi)代碼，粘貼，回車：

-------

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && bash install.sh

會(huì)看到下面滾代碼的界面，碰到讓你選擇確定的界面直接輸入y，然后回車，安裝時(shí)間有幾分鐘，可以去泡杯茶再回來看看。

-------

5.滾完代碼了，就是下面這個(gè)界面了。畫重點(diǎn)，下面框出來的是你的初始賬號(hào)和密碼，拿個(gè)小本本記起來，把這個(gè)信息記下來后就可以把終端關(guān)了。

⑩ 面板安裝完了現(xiàn)在可以開始登陸，配置你的服務(wù)器環(huán)境了，寶塔都是一鍵配置的，不用你去逐條敲指令了。打開瀏覽器，輸入剛才記下的參數(shù)，把SERVER_IP替換成你的IP（IP地址是多少？看步驟⑧ ）。其他不變，回車就跳轉(zhuǎn)到寶塔登陸面板。把上面的賬號(hào)密碼輸入進(jìn)去然后回車。

? 第一次登錄要配置環(huán)境，按照下面框選的參數(shù)選擇完后點(diǎn)一鍵安裝就開始配置服務(wù)器環(huán)境。時(shí)間大概十分鐘左右。

? 安裝完畢，基本上我們已經(jīng)完成了第二大步驟中的服務(wù)器的準(zhǔn)備了，但是還要再做兩件事情，點(diǎn)開安全，然后更改兩個(gè)東西，1.啟用禁用ping 2.ssh端口改掉默認(rèn)的，自己選擇一個(gè)。這么做的目的是避免一些菜鳥黑客用工具自動(dòng)掃描攻擊你的服務(wù)器。默認(rèn)的密碼不好記可以面板設(shè)置里面更改

? 新建你的網(wǎng)站文件夾和數(shù)據(jù)庫(kù)。點(diǎn)左側(cè)導(dǎo)航欄的網(wǎng)站-添加站點(diǎn)，根據(jù)下圖輸入你之前買的域名，一個(gè)帶www的回車、一個(gè)不帶www的（這么做目的是要告訴服務(wù)器要接受這個(gè)門牌號(hào)），再創(chuàng)建一個(gè)數(shù)據(jù)庫(kù)，名稱默認(rèn)的就可以。

? 點(diǎn)提交后。點(diǎn)擊進(jìn)入根目錄文件夾，上傳wordpress壓縮包，就是第三大步驟中你的網(wǎng)頁(yè)文件（前端+后臺(tái)），可以直接上傳zip壓縮文件。

? 將Wordpress文件夾里所有的文件剪切到上層文件夾里，再刪除掉下面提示的三個(gè)文件。

? 回到阿里云的控制臺(tái)面板，找到我們買過的域名，點(diǎn)擊解析,添加一個(gè)A記錄（目的是告訴域名要掛到這個(gè)房間）上去。步驟如下，記錄值就是你服務(wù)器的IP地址。

? 打開瀏覽器輸入你的域名。看到下面的界面就可以恭喜你前面幾步都成功了，你的域名能成功解析到你的網(wǎng)頁(yè)，并且你的服務(wù)器也是可用的。再來設(shè)置下你的wordpress的工作面板，選擇簡(jiǎn)體中文面板，點(diǎn)擊繼續(xù)。

? 填寫前面三個(gè)參數(shù)，將右邊寶塔面板里數(shù)據(jù)庫(kù)的信息復(fù)制到左邊對(duì)應(yīng)的框里面，填寫完畢點(diǎn)提交。

? 填寫你網(wǎng)站后臺(tái)的賬號(hào)密碼，郵箱用你QQ郵箱就可以，填寫完畢點(diǎn)安裝wordpress，安裝完會(huì)跳轉(zhuǎn)到后臺(tái)登錄面板。

? 用剛才填寫的信息登錄后臺(tái)。

后臺(tái)界面一覽：

前臺(tái)初始界面：

OK，本篇到這里就結(jié)束了，到這里你已經(jīng)從無到有建立起了一個(gè)屬于你自己的，可訪問的個(gè)人網(wǎng)站。

————

網(wǎng)址：www.youdomain.com

后臺(tái)：www.youdomain.com/wp-admin

————

開始慢慢積累你的創(chuàng)作與生活吧!

你可以在文章里面發(fā)表你的日記、博客，也可以新建一個(gè)頁(yè)面放你的作品集、照片。后臺(tái)頁(yè)面有很多的功能，慢慢研究吧，如何部署排版，用什么主題決定了你前端展示出給訪客看的效果，wordpress有很多非常棒的主題，可以在網(wǎng)上找到很多，有需要的同學(xué)百度搜索wordpress。這種建站的方式雖然很方便，但是也有一些缺點(diǎn)，以后慢慢會(huì)發(fā)現(xiàn)出來，總體來說問題不大。

關(guān)于Wordpress后臺(tái)的一些設(shè)置和主題的應(yīng)用，有人看了我在寫點(diǎn)我的經(jīng)驗(yàn)吧。

——

寫在最后還想嘮叨兩句。

關(guān)于如果只是要建站來進(jìn)行作品展示的話，建議放到專業(yè)的設(shè)計(jì)網(wǎng)站上去，如behance、站酷、UI中國(guó)等，作品展示的本質(zhì)在交流吧，設(shè)計(jì)網(wǎng)站上面專業(yè)性比較強(qiáng)，流量也高，還能收到同行的反饋，同時(shí)不需要自己搭建空間節(jié)省成本。但是如果你又想放到網(wǎng)上，又有不方便讓大部分人看見，或者想寫點(diǎn)自己的個(gè)人博客，擁有自定義專屬域名，還愛折騰的話，不妨跟這步驟做一個(gè)自己的個(gè)人網(wǎng)站來吧！

——
Tips：經(jīng)常會(huì)有些網(wǎng)站密碼要求大小寫或者帶符號(hào)，有的又沒有要求所以很容易記亂。這里附一個(gè)表格，養(yǎng)一個(gè)好習(xí)慣，把用到的賬號(hào)密碼做一個(gè)備忘，方便下次登錄。