超詳細圖解：從 0 搭建一個個人網站，也太簡單了吧

大家好，我是明哥。

前兩天我用WordPress 給自己搭建了一個網站，整個過程非常的順利，體驗非常地好，於是我就整個過程、以及其中的一些搭建心得，記錄下來。

如果你也正好有搭建個人網站的想法，那麼本文會給你一個參考，也許看了這篇文章你就可以不用再百度、甚至谷歌了，因爲我會寫得 足夠的細緻而系統。

1. 寫在前面

說到網站，其實我搭建過挺多個了。

從最開始的 Hexo 靜態博客，到後來使用 Django 仿照 Hexo -Next 主題自己寫了一個有後端的個人博客。

再後來又發現了 Sphinx + Github + ReadtheDocs 完美的文檔編排組合，用了搭建了四個網站，分別是：

黑魔法 Python：http://magic.iswbm.com
PyCharm 中文指南：http://pycharm.iswbm.com
Python 編程時光：http://python.iswbm.com
Go 編程時光：http://golang.iswbm.com

這些四個網站，很好的將我這幾年來寫的文章進行分類，並以精美的排版展現在每一個需要的人眼前。

四個網站，用的都是三級子域名，可見在我心裏，他們無論哪一個都無法成爲我心中的個人網站。

原因有幾點：

內容過於分散，不能代表一個完整的我。
可定製性太低：沒有頭像，沒有評論系統等等
對 SEO 太不友好了，不利於曝光
託管在 ReadtheDocs上，訪問速度太慢。

雖然有不少讓我心痛的地方，但是它們卻有流淌在基因裏的優勢：

無成本（時間成本當然不算啦）：你不需要服務器，也不需要域名。
新手友好，只要簡單配置，就能立馬快速上手。

好像扯遠了，還是說回 WP 的網站搭建吧。

在教程之前呢，我先 show 一下我的成果，歡迎你去點點點~

網站地址：https://iswbm.com

2. 準備工作

一臺 Linux 服務器

在開始搭建網站之前，當然第一步是購買一個屬於自己的『服務器』。

你可以選擇如下渠道進行購買：

阿里雲
騰訊雲
Ucloud

等的大廠服務器，不要貪圖便宜去買國外的服務器廠商，因爲速度很慢很多，很影響體驗。

我的就是在阿里雲上購買的，剛開始買個最低配置的服務器就行，以後不夠用了，可以慢慢升級，擴容。

可以先領個券，再購買更實惠：點擊領券

如果是學生可以在領券頁面裏找到學生專享，服務器9.5元/月，直接點擊購買即可。不是學生也可以組團購買，更便宜，服務器購買就不多說了，拿錢就好了。

一個專屬的域名

買了服務器後，你就會擁有一個公網ip，如果網站搭建起來了，你完全可以使用這個 ip 去訪問，但僅供開發、測試使用。

如果要真正運營起來，想要有流量，還得搞一個域名，方便你推廣。

域名的購買建議和上面服務器使用同一個廠商，可以省去一些麻煩。比如阿里雲購買的域名要備案是需要你在阿里雲下有一臺服務器的。

一個遠程登陸軟件

由於後面我使用的是手工部署的方式，所以要登陸服務器進行操作。

登陸的方法有兩種：

廠商提供的控制檯界面登陸：Workbench 和 VNC

這種方法對於不經常登陸服務器運維的人來說，還是挺香的。
自己下載專業的遠程登陸軟件：Xshell 或者 CRTSecure

在使用這些遠程登陸軟件時，你需要在服務器廠商控制檯上面先獲取到三個信息

服務器公網IP
服務器SSH端口
服務器遠程連接密碼

關於 Xshell 如何使用的，可以自行百度搜索，教程非常多。

可以到阿里雲上去購買，選最低配置就足夠啦，後續訪問量起來了再擴容升級。

2. 部署方式選擇

部署方式，可分爲兩種

使用服務器管理軟件，實現自動化部署，最著名的就是寶塔面板。
手動登陸遠程服務器，實現腳本化部署。

那麼如何選擇呢？

使用寶塔部署，門檻低，只要會界面點一點即可。

而使用腳本自己手工部署，需要你學會

遠程登陸服務器：使用 Xshell 或者直接使用廠商提供的在線SSH窗口
一些 Linux 的基本操作：比如 Vi/Vim 的使用，目錄及文件的基本操作等

在這裏建議大家跟着我使用第二種方法，也就是手工使用腳本進行部署。

原因有二：

第一次接觸，更精細的部署步驟會讓你對 WordPress 的運作方式有更深的理解，比如使用了哪些軟件，裝了哪些包？
自己搭建了網站，難免以後會碰到各種各樣的服務器問題，儘早的接觸 Linux，熟悉各項配置，對以後的運維工作會有很有幫助。

3. 部署 LNMP

3.1 什麼是 LNMP

LNMP 是 Linux + Nginx + MySQL + PHP 組合的簡寫。

類似的組合還有：

LAMP 的全稱是 Linux + Apache + MySQL + PHP
LNAMP 的全稱是 Linux + Nginx + Apache + MySQL + PHP

其中：

Linux 是類 Unix 計算機操作系統的統稱，是目前最流行的免費操作系統。代表版本有：debian、centos、ubuntu、fedora、gentoo 等。
Nginx 是一個高性能的 HTTP 和反向代理服務器，也是一個 IMAP/POP3/SMTP 代理服務器。
Apache 是世界使用排名第一的Web服務器軟件。它可以運行在幾乎所有廣泛使用的計算機平臺上，由於其跨平臺和安全性被廣泛使用，是最流行的Web服務器端軟件之一。
PHP 是一種在服務器端執行的嵌入 HTML 文檔的腳本語言。
MySQL 是一個關係型數據庫管理系統。

這些軟件一個一個安裝比較費力，特別是數據庫。

因此有人把這些軟件的安裝部署過程集成爲一個 Shell 腳本，而你只要下載並執行它就可以了。簡直不要太方便。

3.2 安裝 LNMP

下載 LNMP 安裝腳本（目前最新版本是 1.7 ，我安裝的是 1.5，更多版本可查看: https://lnmp.org/download.html）

$ wget http://soft.vpser.net/lnmp/lnmp1.5.tar.gz -cO lnmp1.5.tar.gz

解壓並執行它

$ tar zxf lnmp1.5.tar.gz && cd lnmp1.5 && ./install.sh lnmp

接下來會出現大量的選項，如果你不是很懂各個選項間的區別，按默認就行啦

運行腳本後，首先會讓你選擇數據庫的版本：

沒有特殊需要，建議使用默認配置，直接回車或輸入序號再回車。

選好數據庫，會讓你設置數據庫 root 用戶的密碼，此時如果你直接回車，會默認設置爲 lnmp.org#隨機數字，

在輸入密碼的時候，對於新手有一點注意：如果輸入有錯誤需要刪除，需要按住Ctrl再按Backspace鍵進行刪除。

密碼輸好後，回車進入下一步

詢問是否需要啓用 MySQL InnoDB，InnoDB引擎默認爲開啓，一般建議開啓，直接回車或輸入 y 。

如果確定確實不需要該引擎可以輸入 n，(MySQL 5.7+版本無法關閉InnoDB),輸入完成，回車進入下一步：選擇 PHP 版本，建議安裝 PHP 7+的版本

回車進入下一步，選擇是否安裝內存優化：

可以選擇不安裝、Jemalloc或TCmalloc，輸入對應序號回車，直接回車爲默認爲不安裝。

如果是LNMPA或LAMP的話還會提示設置郵箱和選擇Apache：

“Please enter Administrator Email Address:”，需要設置管理員郵箱，該郵箱會在報錯時顯示在錯誤頁面上。再選擇Apache版本：

按提示輸入對應版本前面的數字序號，回車。

提示"Press any key to install...or Press Ctrl+c to cancel"後，按回車鍵確認開始安裝。 LNMP腳本就會自動安裝編譯Nginx、MySQL、PHP、phpMyAdmin等軟件及相關的組件。

安裝時間可能會幾十分鐘到幾個小時不等，主要是機器的配置網速等原因會造成影響。

如果顯示Nginx: OK，MySQL: OK，PHP: OK

表明安裝成功。

最後幾行的輸出

3306 端口是 MySQL 監聽的
80 是 HTTP 端口
22 是 SSH 端口

3.3 配置 Nginx

安裝好後，使用如下指令查看nginx配置文件（如果你的服務器上找不到該文件，那請使用 find / -name nginx.conf 搜索一下）

$ cat /usr/local/nginx/conf/nginx.conf

你會看到如下內容：

上圖表明，安裝好的nginx將網站的根目錄設置爲/home/wwwroot/default，這個可以根據自己的喜好進行修改。

用瀏覽器打開http://ip，可以看到如下內容：

其實這就是一個簡單的網頁demo了，自己隨便修改index.html，就會有不同的內容。

4. 安裝 WordPress

WordPress是使用PHP語言（這也是我們上面爲什麼要安裝 PHP 的原因）開發的博客平臺，也就是一個博客框架。

上一步安裝的 LNMP，只是保證了 WordPress 的基本運行環境。

想要把你的個人網站跑起來，咱還需要安裝 WordPress 。

方法也很簡單，下面跟着操作就行。

第一步：安裝 wordpress 安裝包並解壓到 /home/wwwroot

$ wget https://cn.wordpress.org/latest-zh_CN.zip && unzip latest-zh_CN.zip -d /home/wwwroot

第二步：登錄MySQL（密碼在前面部署LNMP 時你設置過），創建wordpress表，創建完後輸入exit退出。

$ mysql -u root -p
Enter password: 
MySQL > create database wordpress;

第三步：使用 vim 修改 nginx 配置文件（不會vim的自行百度）

$ vim /usr/local/nginx/conf/nginx.conf

找到網站根目錄位置，如下圖所示：

修改成如下內容：

隨後，使用wq保存配置退出即可。

驗證nginx是否有配置錯誤：

$ nginx -t

如果出現ok，successful字樣，說明沒有錯誤。沒有錯誤，重新加載nginx：

$ nginx -s reload

修改wordpress目錄權限：

$ cd /home/wwwroot && chown -R www wordpress/ && chgrp -R www wordpress/

用瀏覽器打開http://ip/wp-admin/setup-config.php，你可以看到如下內容：

現在就開始，進行安裝。填寫信息如下：

其中，*** 改爲你設置的MySQL數據庫密碼。點擊提交，出現如下內容：

在/home/wwwroot/wordpress下，創建並編寫wp-config.php文件：

$ vim wp-config.php

將上圖內容複製進去並wq保存退出，然後點擊現在安裝。最後就是配置用戶信息了，這個是你登錄wordpress用戶後臺的，要記住：

最後點擊安裝WordPress，安裝成功會出現如下界面：

點擊登錄，輸入賬戶密碼，就可以登錄自己的 wordpress 後臺了。

這時候你使用瀏覽器去訪問 http://ip ，就可以看到你搭建的第一個網站了。

此時你看到的這個網站，是 wordpress 默認爲你安裝的免費主題（應該有三個），可能並不是那麼的好看，但沒關係，後面我會教大家如何挑選一個自己合適的主題，把你的網站裝扮得有模有樣。

5. 裝扮你的網站

到這裏，你的網站部署已經全部完成，但是還差最後一步，也是使用 WordPress 最爲核心的一步：讓你的網站看起來更加專業，更加成熟。

爲此我們需要做兩件事：

安裝主題：讓網站變得好看
安裝插件：豐富網站的功能

5.1 安裝主題

同樣都使用的 WordPress 的網站，外觀上卻天差地別。有的很酷炫，有點很簡約，這是因爲選了不同的主題（可以理解爲皮膚）。

在你安裝完 WordPress 後，本身就自帶了幾個免費的主題。

幾乎沒人會使用它們，因爲實在沒什麼亮點（就是醜）。

在 WordPress 的自帶了主題商店，裏面有大量的免費主題，各式各樣的都有，可能有你喜歡的。

在這裏要說明一點，我的主題不是在商店裏安裝的，而是我通過搜索引擎找到了一個比較清爽的主題，很符合我的審美，我裝扮過後的效果如下。

如果你想和我用一樣的主題，我已經將安裝包打包好了（需要的添加我微信領取: stromwbm），直接下載後，按下圖的方式上傳到你的 WordPress 後臺安裝就行。

5.2 安裝插件

目前我安裝的插件比較少，但是基本夠用啦，下面列舉一下，如果你有什麼好插件介紹，可以評論區推薦一下：

1. WP User Avatar

原生 WordPress 默認使用 Gravatar頭像，用戶（包括訪客評論）的頭像調取都是根據所留郵箱匹配的 Gravatar 頭像。

沒有 Gravatar 怎麼辦？

只要裝上 WP User Avatar 這個插件就能可以使用 WordPress 媒體庫中的圖片作爲默認頭像了。

2. WP-PostViews

安裝了 WP-PostViews，就可以統計你文章的瀏覽次數。

需要兩步配置

第一步：設置顯示的文字

第二步：在你要顯示的位置寫入如下代碼

效果如下

3. Post Views Counter

咦，上面已經安裝了一個統計閱讀量的插件，怎麼這邊又推薦一個。

上面那個統計閱讀量的插件，其實做的比較粗糙。

這是什麼意思。

比如同一個 ip 連續連刷10次，WP-PostViews 的閱讀量會 +10，但如果你使用 Post Views Counter，這個規則可以由你來定，可以只顯示一次。

安裝完這個插件後，同樣需要進行一些配置

爲什麼這裏選擇手動呢？

因爲我發現不管在內容之前，還是在內容之後，顯示的位置都比較尷尬（它會換行）。

如果你和我用一樣的主題，想和我有一樣的效果，那麼你選擇手動之後，還要按下圖指示修改下代碼，新增如下一段代碼。

效果如下

4. WP Editor.md

或許這是一個WordPress中最好，最完美的Markdown編輯器。

可以像 md2all 和 mdnice 那樣，即時顯示 Markdown 的渲染效果，喜歡在後臺寫文章的可以安裝（其實我是先本地 Typora 寫好了再複製上去的）。

5. Simple Custom CSS

在修改 WordPress主題時，CSS修改是最經常用到的方法，比如調整字體、調整顏色、邊距之類的都需要用到自定義的CSS代碼。

雖然說 WordPress 本身提供了CSS修改的功能，不過使用起來有很多的弊端，其中最麻煩的一點就是每次更換或者更新主題之前的修改都會消失，需要重複的添加。

使用 Simple Custom CSS 這個插件可以避免這種尷尬，安裝後他會在 外觀 下新增一個 自定義CSS 的選項。

6. LuckyWP Table of Contents

使用我這個主題，在文章頁面是沒有目錄索引的，對於讀者來說，其實挺不方便的。

因此我安裝了 LuckyWP Table of Contents，可以在我的文章中生成一個目錄。目錄默認是隱藏的（當然你也可以設置默認展示），需要的話再點擊展開。

點擊目錄可以直接跳轉到對應位置。

但可能是我這個主題的原因，我的網站無法跳轉，如果有人知道原因，還請留言區評論一下。

7. 百度搜索推送管理

百度搜索推送管理插件是一款針對WP開發的功能非常強大的百度和Bing搜索引擎收錄輔助插件。

利用該插件，站長可以快速實現百度搜索資源平臺和Bing站長平臺URL數據推送及網站百度收錄數據查詢等。

目的在於進一步提升網站的百度和Bing搜索引擎收錄效率，提升網站SEO優化效果；及幫助站長通過該插件瞭解網站百度收錄數據情況，基於數據統計參考進一步對網站內容進行調整與優化。

具體使用方法比較複雜，自己百度一下吧

8. Smart SEO Tool

Smart SEO Tool是一款專門針對WordPress開發的智能SEO優化插件，與衆多WordPress的SEO插件不一樣的是，Smart SEO Tool更加簡單易用，幫助站長快速完成WordPress博客/網站的SEO基礎優化。

6. 優化你的網站

6.1 使用固定鏈接

先在後臺按如下圖示進行設置

但是這樣不夠，要使用固定鏈接，服務器還需要開啓 rewrite 的功能。

如果你和我使用的是 nginx ，那麼只要登陸服務器，在

/usr/local/nginx/conf/nginx.conf 裏的 server 里加上這一段（我放在倒數第二段）

location / {
		if (!-e $request_filename) {
				rewrite (.*) /index.php;
		}
}

然後重啓一下 nginx

$ systemctl restart nginx

6.2 網站添加備案號

如果你的域名已經備案了，最好將你的備案號放到底部（好像會有檢查）。

6.3 美化文章的排版

一個好的排版，能夠極大提升閱讀體驗，因此定製一個好的排版非常有必要。

我網站裏的文章排版樣式，借用的是 mdnice 的主題，個人非常喜歡。

/* 二級標題 */
.view-content h2 {
  margin: 40px 20px auto;
  height: 40px;
  background-color: rgb(251, 251, 251);
  border-bottom: 1px solid rgb(246, 246, 246);
  overflow: hidden;
  box-sizing: border-box;
}

/* 二級標題內容 */
.view-content h2  {
  margin-left: -10px;
  display: inline-block;
  width: auto;
  height: 40px;
  background-color: rgb(33, 33, 34);
  border-bottom-right-radius:100px;
  color: rgb(255, 255, 255);
  padding-right: 30px;
  padding-left: 30px;
  line-height: 40px;
  font-size: 16px;
}

/* 二級標題修飾 請參考有實例的主題 */
.view-content h2:after {
}


/* 三級標題內容 */
.view-content h3 {
  margin-top: 5px;
  padding-top: 20px;
  padding-right: 5px;
	padding-bottom: 5px;
  padding-left: 5px;
  font-size: 17px;
  border-bottom: 2px solid rgb(33, 33, 34);
  line-height: 1.1;
}


/* 引用文字 */
.view-content blockquote p {
    color: #353535;
    font-size: 16px;
    margin: 0 10px;
    display: block;
}

.view-content .blockquote:after {
    content: "”";
    float: right;
    display: block;
    font-size: 2em;
    color: rgb(248, 57, 41);
    font-family: Arial, serif;
    line-height: 1em;
    font-weight: 700;
}

/* 二維碼顯示 */
header .gongzhonghao {
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 30px;
}

header .weixinhao {
    color: #fff;
    font-size: 14px;
    position: absolute;
    bottom: 180px;
}

6.4 部署 HTTPS

關於如何部署 HTTPS ，我在之前的文章裏講過一種。

今天再介紹另外一種：使用寶塔。

註冊並登陸寶塔（https://bt.cn），然後進入控制面板，進行實名認證。

點擊申請證書

選擇免費的就好

填寫你的域名後，支付訂單（其實不要錢）。

然後點擊詳情，需要驗證該域名是歸你所有。

方法它會告訴你，登陸我的阿里雲域名解析，根據如下提示去添加 DNS解析規則

然後靜待一段時間驗證成功了，就可以點擊如下按鈕，下載數據證書。

下載到本地後，你會得到一個 zip 包，解壓一下，就可以看到證書文件及私鑰。

因爲我的博客使用的是 Nginx，因此我該 Nginx 下的兩個文件上傳到我的服務器上的 nginx 目錄下.

具體怎麼上傳呢？你可以使用遠程拷貝軟件，例如 WinSCP，也可以使用 lrzsz （推薦使用）。

傳到哪個目錄下呢？

先使用 find 命令查找一下你的 nginx.conf 路徑

$ find / -name nginx.conf
/usr/local/nginx/conf/nginx.conf

你的證書文件可以和 nginx.conf 放在同一目錄下

/usr/local/nginx/conf

接下來使用 vim 編輯該文件，找到 server，添加如下行（ server 原本的內容我使用 ... 表示，意思是不需要去動。）

server
    {
        listen 443 ssl;
        # 註釋掉該行
				# listen 80 default_server reuseport;

        #證書文件名稱
        ssl_certificate 1_iswbm.com_bundle.pem;
        #私鑰文件名稱
        ssl_certificate_key 0_iswbm.com.key;

				...
    }

最後重啓 nginx

$ systemctl restart nginx

嘗試用 https 訪問一下我的網站 https://iswbm.com，非常順利。

到這裏，事情其實還沒有結束，你還需要做兩件事情：

第一件事：在後臺進行一些配置，不然從網站跳轉的時候還是會使用 http

第二件事：將 http 重定向到你 https，不然有人在瀏覽器輸入 iswbm.com 時，訪問的還是 http。

使用 vim 編輯 /usr/local/nginx/conf/nginx.conf，在原本 server 的前面加入下面這麼一段代碼

server {
        listen 80;
        server_name iswbm.com;
        rewrite ^(.*) https://$server_name$1 permanent;
        }

然後再重啓 nginx

$ systemctl restart nginx

6.5 圖牀開啓HTTPS

由於我之前的 markdown 文章，使用的圖牀都是七牛雲，當時並沒有開啓 https，現在網站開啓了 https 後，自然圖片也要開啓，不然瀏覽器會顯示有部分不安全的資源。

登陸七牛雲，然後進入證書管理上傳證書（注意這個證書得另外申請，不能使用先前申請的 iswbm.com 證書）。

進入對象存儲 -> 域名管理，找到 HTTPS 配置的位置，點擊 修改配置。

將按鈕置爲開啓狀態，選擇我們剛剛上傳的證書。

設置完後，並不能立馬使用

域名的升級需要一定時間，等待即可。

以上就是我搭建網站的全部總結，寫了兩個晚上，直到昨晚才完成。

全文一共 5000 多字，昨晚寫的時候，還出了個小插曲，文章被我誤刪除了，無論怎麼 ctrl + z 都回不來，找了很多方法，都行不通。。

把我嚇得都快哭了，生怕今天發不出來文章

好在最後 Typora 還是給我留了一條生路，它居然支持文件的版本控制，真是有驚無險，差點今天就要哭了。

寫文章不容易（特別是這種長文），如果覺得本文寫得還可以，給明哥轉發下文章，可以嗎