此教程會教你從0到1搭建一個完整的部落格，包括前端展示頁、後臺管理系統、後端介面及介面文件、服務端部署整個完整流程。這個部落格十分簡單，功能遠少於我們所用的部落格。但是學會了整個流程，再在此基礎上擴充套件就會很容易了。
所以此教程適合新手小白，高手請繞道，浪費你的時間。
（關於專案原始碼以及線上地址請參考文章結尾）
概述
搭建自己的部落格，一方面是想了解部落格搭建和部署整個過程，另一方面自己想學習過程中一些東西想沉澱下來，所以就想到寫部落格。寫部落格過程中，我會發現有些知識點其實還沒完全搞清楚，這樣會促使我深入學習。總而言之，寫部落格會形成一個良性迴圈。
其實整個部落格搭建去年就完成了，專案都跑在我的伺服器上，但是我的個人文章還沒有放在上面，等功能完善了再上吧。當時準備寫這篇文章，只不過當時公司專案忙，給忘了。現在想起來就把這篇文章完成了。
再次說明，本人是前端碼農，對於服務端部署，後端介面什麼的基本不懂，所有的東西都是現學現用，跟專業的後端和運維差太遠，只是讓專案能正常跑起來。關於後端以及部署的安全性和穩定性方面都沒有涉及，所以專案僅供參考。
前端專案
當時做前端專案時準備用vue-cli來搭建的，但是瞭解到處都說服務端渲染，而我主要使用vue較多。所以為了嘗試一下vue ssr，就有了現在這個專案。查了一下vue ssr，主要有官方版本和nuxt兩個用的比較多些，看了一下發現nuxt節省了各種配置，上手更快，所以就用nuxt踩了一下坑。
當時剛推出nuxt1.0版本，官方文件也還比較詳細。搭建完成後丟到伺服器執行，發現頁面開啟速度確實比較快，基本是秒開。由於nuxt1.0當時要求node是8.0以上版本，低於8.0會報錯，所以我用nvm來管理node版本，注意clone我的專案後安裝依賴一定要在node 8.0以上版本下安裝。
這個專案很簡單，就只有文章列表頁和文章詳情頁，再就是簡單的相容了下移動端。由於很簡單就不展開說了，關於nuxt使用還是推薦多看官方教程。
後臺管理專案
前端後臺管理專案是基於vue-cli完成的，關於vue-cli的使用網上的教程非常多，不做敘述。ajax請求用的axios庫， ui使用的element-ui。主要頁面有
- 註冊、登入
- 新建文章
- 編輯文章
- 新建分類
- 編輯分類
- 刪除文章
- 刪除分類
- 換膚等功能
該專案搭建時有點早，clone我的專案後安裝依賴後專案能正常跑起來，當時會有一些warning，因為有些npm包被廢棄了，推薦新的包什麼的。
後端介面以及介面文件
後端專案採用的是express和mongolass，後端node專案主要參考cnode社群一個大佬的一步一步學習node的專案。後端專案的介面主要對應前端管理頁面那些介面。
介面文件是用的 swagger來編寫的，使用swagger-editor來編寫配置檔案，將其轉換為json，將配置檔案放入到swagger-ui檔案中，放到伺服器部署就行了。
執行本專案除了clone該專案的程式碼安裝依賴外，還要在本地電腦安裝mongodb，並且成功啟動mongodb服務。本專案才能正常啟動。
介面文件編寫
準備：下載swagger-ui和swagger-edit。(參考我的github readme)
本地執行swagger-editor
1、啟動swagger-editor：
在本專案下執行http-server swagger-editor -p8989。在瀏覽器中開啟localhost:8989即可開啟swagger-editor。
注意：要全域性安裝http-server。預設埠號為8080。
2、編輯swagger-editor：
在editor中編輯程式碼，左邊是編輯區，右邊是視覺效果。編輯好後匯出json檔案。關於文件的編寫這裡不展開講解，可以參考這篇文章傳送門，文章寫得很詳細。
3、部署介面文件：
在專案根目錄下新建swagger資料夾，將下載的swagger-ui檔案中dist目錄下的所有檔案複製到public資料夾下。將2步驟匯出的json檔案也放入swagger資料夾下。修改swagger下index.html檔案中 url = "http://petstore.swagger.io/v2/swagger.json"，將其改為swagger.json。在index.js中加上靜態模組：
app.use('/swagger', express.static('./swagger'));
複製程式碼用node啟動index.js，如果埠號為3000，在瀏覽器中開啟 http://localhost:3000/swagger即可檢視介面文件。
介面文件連線伺服器，實時獲取介面資料：
swagger.json中有個host欄位，要想介面文件能調通地址，需此host地址與瀏覽器中請求的地址一模一樣。本地開服務ip可以是：
1、本機內網ip地址：如192.168.0.217:3000 (你本機的ip地址),
2、本機本地服務地址：127.0.0.1:3000,
3、本機本地服務簡寫：localhost:3000
伺服器部署
再就是伺服器部署，我買的伺服器是阿里雲伺服器，裝的系統是centos7.3。為了專案正常執行，在伺服器上裝了，ftp、git、node、nginx、mongodb。當時安裝部署遇到不少問題，關於每一個安裝部署我都有詳細教程，有興趣的可以去看看。
node專案部署——阿里雲cento部署node和nginx
重點說明
本專案想正常跑起來步驟：
1、clone 我部落格專案前端、後臺管理、後端專案到本地
2、分別安裝各自依賴。
3、本地電腦安裝mongodb，最好註冊為服務。（推薦Robomongo視覺化管理mongodb）（node安裝就不說了）
4、先啟動mongodb服務，再啟動後端專案。（此時在瀏覽器可以開啟介面文件了）
5、依次啟動後臺管理專案、前端專案。
6、專案都成功啟動了，但是沒有資料，可以通過後臺管理系統新增文章和分類。（也可以手動通過robomongo新增文章到mongodb）
7、此時應該能正常看到文章了。
最後附上專案連結地址，歡迎star ^_^
線上部署地址:
管理專案地址就不放出了，api介面只提供檢視文章等讀取功能，不提供註冊、新增文章等寫入功能。
差不多就這些了，撤了。。。。