轉載自：http://www.jianshu.com/p/0417f242c14f

前言

做為一名立志全棧的頁面仔，一直想著要獨立開發一個專案，從前臺到後臺到資料庫，從設計到開發到上線。一般說到這樣的練手專案，通常得到的意見都是寫個部落格系統唄！剛好對之前用hexo部署在GitHub Page上的部落格的傻瓜式及龜速實在忍無可忍，於是乎，就寫個部落格系統唄！先放上鍊接Cloud's Blog

方案

• UI風格：主要參考Randy's Blog的風格，並加入自己的一點想法（主要是為了偷懶）。
• 前端頁面：基於Vue2.0的響應式SPA，啊？你問我為什麼？就如《關於》中的自我介紹：我自認為擅長Vue的SPA開發。
• 後臺：前端工程師通向全棧的捷徑：Node.js。負責寫介面及渲染靜態頁面。
• 資料庫：原計劃是用MongoDB，但為了趕進度，索性資料庫都不用了，第一版就先這樣吧。
• 文章：參考hexo用markdown語法寫好文章再轉成html的做法。也是在本地編輯好md格式的文章，上傳到伺服器，Node.js直接讀取md檔案並轉化為html,返回給前臺，這也是為什麼暫時不需要資料庫的原因。
• 部署：AWS，一年時間免費使用哦！你問我一年後怎麼辦？God knows!也許一年時間已經讓我經歷了從入門到放棄。

揚帆！起航！

1. 頁面佈局：自己看Cloud's Blog，簡單介紹下。第一屏為一張桌布寬高均為100%鋪滿整個可視區域，內容有部落格名稱、小標題及三個關於博主的連結；點擊向下箭頭滾動進入第二屏正題，分為四個Tab模組：【首頁】、【文章】、【作品】、【關於】。預設為【首頁】，即最新一篇文章詳情，【文章】為文章列表，點選可閱讀文章內容，【作品】為作品列表，這部分還沒完成，【關於】為關於博主的一些介紹。PS：首屏的桌布在Google圖片裡找了一上午才找到這張還算滿意的，考慮到手機端桌布是居中鋪滿整個可視區域，要找到一張PC端手機端效果都還行且逼格不能太低的圖片真的不容易，BTW，博主還是選擇困難症患者。

2. 前端開發：從Vue腳手架開始

   # 全域性安裝 vue-cli
   $ npm install --global vue-cli
   # 建立一個基於 webpack 模板的新專案
   $ vue init webpack blog
   # 安裝依賴，走你
   $ cd blog
   $ npm install
   $ npm run dev

   然後安裝Vue-router用於SPA路由及vue-resource或axios用於Ajax。

   $ npm install --save vue-router
   $ npm install --save axios
   # vue官方推薦的ajax庫不再是vue-resource,而是axios
    
   

   然後就可以開始碼靜態頁面了，根據第一步頁面佈局的思路寫出靜態頁面應該不是什麼難事，其中需要呼叫第三步中node.js提供的介面，這裡就不再多說了。完成靜態頁面後編譯

   $ npm run build

3. 後端開發：建立服務端目錄結構並安裝express框架及marked用於將md檔案轉為html

   $ mkdir blog-server && cd blog-server
   $ mkdir public
   $ npm install --save express
   $ npm install --save marked

   寫介面，目前主要有三個介面。

   1. 獲取文章列表介面。fs.readdir方法讀取md檔案所在資料夾，返回所有md檔案的檔名即文章標題、建立時間、文章路徑，並按建立時間排序渲染在【文章】頁。
   2. 文章內容介面。根據第一個介面返回的檔名及路徑，用fs.readFile方法讀取md檔案的內容並用marked轉為html並返回給客戶端，渲染在文章內容頁。
   3. 首頁內容介面。類似介面2，讀取最新一篇文章並返回。記得處理跨域問題。

      app.all('*', function(req, res, next) {
      res.header("Access-Control-Allow-Origin", "*");
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
      res.header("X-Powered-By",' 3.2.1')
      res.header("Content-Type", "application/json;charset=utf-8");
      next();
      });

   渲染靜態頁面，將第二部編譯出來的靜態檔案及md格式的文章檔案拷入public資料夾，並用express內建的中介軟體指定public資料夾為靜態資原始檔的根目錄並快取。因為是單頁應用，所以記得要處理好404錯誤。

   # server.js
   var express = require('express');
   var app = express();
   app.use(express.static('public',{maxAge:60*60*24*30}));
   app.get('/',function(req,res){
    res.sendFile('/index.html',{root: __dirname + '/public/'});
   });
   app.listen(80);

4. 部署

   • 申請AWS（亞馬遜雲主機），一年免費試用，需填信用卡資訊。例項一臺EC2，win或Linux系統,推薦Linux。開放相應埠並安裝node.js。
   • 安裝PM2，並執行第三步的server.js服務,並讓PM2隨系統啟動。

     $ npm install -g PM2
     $ pm2 start server.js
     $ pm2 startup

     此時我們的部落格系統已經執行在EC2上了。
   • 購買域名。我是在騰訊雲上購買的xyz域名，第一年8塊錢。解析到該EC2的公網IP上，即可通過域名訪問。比如通過 http://www.lee-cloud.xyz 可訪問我的部落格。

未來計劃

1. 完成【作品】Tab頁，現在雖然勉強上線了，但缺了這一塊逼死強迫症啊。
2. 後臺管理，功能模組暫定為
   • 文章上傳
   • 作品上傳
   • 【關於我】內容編輯
   • 首頁定製
3. 啟用MongoDB資料庫
4. 介面美化、效能優化
5. 評論功能
6. seo

寫在最後

僅此記錄Cloud's Blog初版上線過程