從0到1搭建和部署我的博客

此教程會教你從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

一、啓動swagger-editor：

在本項目下執行http-server swagger-editor -p8989。在瀏覽器中打開localhost:8989便可打開swagger-editor。

注意：要全局安裝http-server。默認端口號爲8080。

二、編輯swagger-editor：

在editor中編輯代碼，左邊是編輯區，右邊是視覺效果。編輯好後導出json文件。關於文檔的編寫這裏不展開講解，能夠參考這篇文章傳送門，文章寫得很詳細。

三、部署接口文檔：

在項目根目錄下新建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能夠是：

一、本機內網ip地址：如192.168.0.217:3000 (你本機的ip地址),

二、本機本地服務地址：127.0.0.1:3000,

三、本機本地服務簡寫：localhost:3000

服務器部署

再就是服務器部署，我買的服務器是阿里雲服務器，裝的系統是centos7.3。爲了項目正常運行，在服務器上裝了，ftp、git、node、nginx、mongodb。當時安裝部署遇到很多問題，關於每個安裝部署我都有詳細教程，有興趣的能夠去看看。

node項目部署——阿里雲centos部署ftp

node項目部署——阿里雲cento部署node和nginx

node項目部署——阿里雲centos部署git服務

node項目部署——阿里雲centos部署mongodb

重點說明

本項目想正常跑起來步驟：

一、clone 我博客項目前端、後臺管理、後端項目到本地

二、分別安裝各自依賴。

三、本地電腦安裝mongodb，最好註冊爲服務。（推薦Robomongo可視化管理mongodb）（node安裝就不說了）

四、先啓動mongodb服務，再啓動後端項目。（此時在瀏覽器能夠打開接口文檔了）

五、依次啓動後臺管理項目、前端項目。

六、項目都成功啓動了，可是沒有數據，能夠經過後臺管理系統添加文章和分類。（也能夠手動經過robomongo添加文章到mongodb）

七、此時應該能正常看到文章了。

最後附上項目連接地址，歡迎star ^_^

博客前端項目

博客後臺管理頁面

博客接口以及接口文檔

線上部署地址:

線上接口文檔

線上前端頁面

管理項目地址就不放出了，api接口只提供查看文章等讀取功能，不提供註冊、添加文章等寫入功能。

差很少就這些了，撤了。。。。