如何自己搭建一個個人網站？(WordPress免插件實現圖片燈箱lightbox效果)

如何自己搭建一個個人網站？

喜歡的可以收藏轉發加關注

搭建基本的個人網站成本十分低廉，最低從0到數十元不等。取決於對於域名的投入。

如果把搭建網站類比為現實中修建一棟房子，我們可以進行如下類比

修建一棟房子

1.申請門牌號

2.購置一片空地

3.構建房屋框架

4.添磚加瓦，粉刷裝修

搭建網站的步驟

1.申請域名

2.虛擬主機或伺服器

3.引入網站框架或從頭建設

4.網站優化，可藉助資源或DIY

首先

1.申請域名

what？why？

就像現實中每一棟房子都會有國家城市街區門牌號一樣，每一個網站都需要有獨一無二的IP地址。IP地址用二進位數來表示，每個IP地址長32比特，由4個小於256的數字組成，數字之間用點間隔，例如100.10.0.1表示一個IP地址。由於我們在上網時很難去記憶這些數字元號，所以需要有含義的符號化地址方案來代替數字型的IP地址。這樣的字元型地址就被稱為域名。

how？

申請域名現在可以有許多渠道，並且這些渠道也會搭配虛擬主機一起提供。

萬網，阿里雲，騰訊雲等

而我則是選擇了 買域名 | 世界最大域名註冊商 ，一般來說 .com,.org這樣的國際域名年費不超過100元。建議大家選擇國際域名，國內的.cn域名需要驗證實名信息。當然如果只是抱著試一試的態度可以嘗試.xyz,.co,.tk這樣的非主流域名或國外域名，價格相對便宜甚至有機會淘到免費域名。建議大家如果稍有網頁開發基礎，就不必選擇godaddy的增值服務了，如建站達人，虛擬主機等，我們完全可以通過其他渠道免費達到自己想要的更好的效果。

<img src=\"https://pic1.zhimg.com/50/a6ba67b1f2ce282b87048b23138f8be5_b.jpg\" data-rawwidth=\"1344\" data-rawheight=\"638\" class=\"origin_image zh-lightbox-thumb\" width=\"1344\" data-original=\"https://pic1.zhimg.com/a6ba67b1f2ce282b87048b23138f8be5_r.jpg\">

2.虛擬主機或伺服器

一般個人網站會採用虛擬主機的形式租用空間，放置站點及應用組件，進行必要的數據存放和傳輸功能。如果是自建伺服器須保證24小時開機來保證訪問需求，並且花費較大，並無必要。虛擬主機可以有多種選擇。如國內的阿里雲、騰訊雲等，優點是速度較快，缺點是需要報請備案。也可以選擇國外如美國、香港等。考慮到備案的繁瑣，需要保證一定的訪問速度，我了解到香港的

http://api.hostinger.com.hk/redir/17589162

免費套餐具有的一定控制項和流量，足夠個人網站玩耍起來！

<img src=\"https://pic1.zhimg.com/50/a61b64234a7bf029720227b4b365b611_b.jpg\" data-rawwidth=\"1366\" data-rawheight=\"613\" class=\"origin_image zh-lightbox-thumb\" width=\"1366\" data-original=\"https://pic1.zhimg.com/a61b64234a7bf029720227b4b365b611_r.jpg\">

在有了虛擬主機之後，我們需要將域名解析到新的虛擬主機地址，這樣訪客才能正確的找到我們的地盤，這是比較簡單的，現在虛擬主機提供商的圖形化頁面就能為我們提供相應的功能。

<img src=\"https://pic3.zhimg.com/50/62ab1e4717ed91c9ac046775c8008031_b.jpg\" data-rawwidth=\"1347\" data-rawheight=\"586\" class=\"origin_image zh-lightbox-thumb\" width=\"1347\" data-original=\"https://pic3.zhimg.com/62ab1e4717ed91c9ac046775c8008031_r.jpg\">

3.引入網站框架或從頭建設

如果你以前有過基本的html、css、js網頁開發基礎，可以將自己的做的網頁提交到個人虛擬空間，當然如果沒有也沒有關係，網上有許多別人已經做好的模板，可以先借用一下。如模板之家、模板王等，就不一一列舉了。而我是想搭建個人博客系統，所以借用了時下非常流行的wordpress，大家可以前往官網下載China 簡體中文,根據提示進行一步步安裝操作。

4.網站優化

進一步的排版、分欄、美化、加速等，牽扯到許許多多計算機網路、UI設計等知識。一入個網深似海，我們也有許多未知的知識值得去探索。

更多細節及擴展信息會在今後逐一完善。

也歡迎大家交流，早日置備好互聯網世界的一畝三分田。

學習前端的夥伴可以轉發+私信回復小編「前端」領取全套免費前端學習資料和視頻

WordPress免插件實現圖片燈箱lightbox效果

最近有個朋友問我有沒有推薦的點擊圖片放大預覽的WordPress插件，

這不就是圖片燈箱的效果嗎，這個小需求沒必要要用插件啊，於是抽空純代碼寫個一個圖片燈箱lightbox的效果，其實也挺簡單的，就2 3個文件而已，整個文件就14k大小，總比插件好好些吧。

最終效果如下圖所示：

使用教程

1、首先下載文件，在文章底部點擊資源下載按鈕下載圖片燈箱文件。

2、然後把文件上傳到主題目錄，也就是/wp-content/themes這個目錄，解壓！

3、在主題的header.php和footer.php文件分別載入css和js：

注意：請確保正在使用的主題已經載入了jquery！

如果你使用的古騰堡編輯器，那麼教程結束，你可以去試試圖片燈箱效果了，不過記得把圖片屬性鏈接到圖像。

如果你使用的是經典編輯器，那麼還需要修改下js文件。

掃碼關注wpwp自學筆記

精選優質免費WordPress主題模板，分享最新WordPress實用建站教程！

記住我們的網址：ztJun.com