尤大低仿博客帶回家

前言

就在上週六看到阿里雲服務器搞一個活動，6元錢一年的共享虛擬主機。可是以前有使用過，以爲最蛋疼的地方是，它只給你開放一個ftp，並且權限上面也有一些控制。因此一直在考慮是否好入手玩一下。後來想了想6塊錢又很少，咱們搞起來吧。

好了，你們注意了。你沒有看錯，只需幾小時，低仿的尤大（Vue.js做者）博客你帶回家，有的小朋友可能注意到，爲啥這裏沒說同款和高仿的緣由是在Markdown還有一些其餘的方面，都是簡單的實現，我怕說了高仿以後，遭到板磚這樣就很差了，如今看病也挺貴的?。

先放上尤大的博客Evan You
而後放上低仿連接吧BIGTIGER.ME
再就是項目的地址Blog

聲明

本文僅僅是提供一種思路想跟你們交流，在實踐的過程當中一些地方可能不是最佳。千萬不要用板磚拍我，人家第一次寫文章啊。若是你有更好的方案或者實踐思路，能夠分享給我，期待~

聯繫方式: liujinyang@bigtiger.me

咱們要指望的

1. 使用Markdown 進行編輯博客內容

2. 不須要後臺提供接口

3. 不使用數據庫

4. 使用Vue全家桶（你抄人家的博客，再不用人家的東西就有點過度了）

5. 使用NPM腳本一鍵發佈博客

實踐過程

購買服務器

放一個地址共享虛擬主機普惠版，選擇Linux，其餘的就略過了。

使用FTP鏈接服務器

這個放在最後吧，由於操做有些人已經會了，詳細描述還挺麻煩的。可是爲了讓你們均可以快速的搭建，因此我選擇放在後面，有點像附錄?。

服務器上面的目錄結構

最終咱們須要把你的博客文件放到htdocs目錄下。

使用vue-cli快速構建目錄結構

在執行以後操做前，你確保你的電腦已經安裝過node(>=4.x, 6.x)

$ npm install -g vue-cli

$ vue init webpack 這裏寫你的項目名

$ cd 這裏寫你的項目名

$ npm i

而後下面有幾項能夠配置

具體就不詳細介紹了

將Markdown文件轉換成json

不想聽我囉嗦的能夠直接看這部分的源碼，/build/create-posts-json.js

這裏用到了兩個第三方的庫，第一個是markdown-to-json，第二個是markdown-js

大概思路是，在/build/posts目錄下去寫.md文件，而後經過markdown-to-json去構建一個文章的json列表，而後再分別構建單個文件的json，並將json中的content用markdown.toHTML轉換成HTML，最後將生成的json文件放到/build/static/posts目錄下。

這裏面須要講的是，markdown-to-json須要在文件中添加相應的信息才能構建出列表

轉換成json是

而後將這個js文件分別引入到/build/build.js和/build/dev-server.js中，放在頂部就能夠了。

使用Vue全家桶進行頁面的開發

老樣子放上源碼/build/src

大概的思路就是用，vue-router管理頁面路由，vue-resource去靜態資源中請求對應的json文件，vuex用來切換頁面時開關Loading...

打包和部署

$ npm run build

等待打包結束後，使用FTP把/build/dist文件夾下面的文件扔到服務器上面就能夠了。

這個時候輸入你的域名就能夠看到你的博客了。

你覺得這樣就完了？

答案是並無！

細心的小夥伴們會發現，這樣的話，我豈不是每次發佈文章都須要構建，而後手動上傳到服務器？的確這樣很不便捷和高效。

那咱們接下來就要解決這個問題。

好了，慣例，先放源碼，不愛聽我嗶嗶的能夠去看了/build/release.js

這個使用了兩個node的第三方庫，分別是ftp和async

大致思路是使用node-ftp去鏈接服務器，而後將本地生成的json文件上傳。可是當咱們須要上傳多個json文件的時候，咱們就須要使用async來控制回調。

而後將咱們以前寫的create-posts-json.js引用進來，再在package.json文件中的script中寫下

"release": "node build/release.js",

接下來你就能夠愉快地使用npm run release來一鍵發佈你的文章了。

總結

最後咱們實現了一個簡單的博客系統，時間雖然短，項目也很簡單。可是完整的走了一遍實際開發中，從需求定製到產品完成的一套流程。

但畢竟實現的時間有限，有些不足之處，有待完善：

1. Markdown處理的不夠完全，好比代碼顯示等等

2. SEO優化，博客仍是之內容爲主。

3. 當Markdown文件沒有修改，應該不須要從新上傳，可是如今須要從新上傳。

4. Loading切換生硬

5. 首頁列表分頁沒作...懶得作了

6. 評論回覆...懶得嵌入了

7. 等等等...

最後謝謝你們聽我嗶嗶...

鼓掌?

附錄

FTP鏈接服務器

購買以後，會讓你設置3個密碼，分別是登陸控制檯的密碼（固然這個從阿里雲的控制檯也能夠）、數據庫的密碼（固然也沒有什麼卵用）、最後就是FTP的密碼！

我鏈接的方式是使用FileZilla的客戶端。Mac和Windows都有，它張這個樣子，你們能夠自行下載。

而後咱們須要找到咱們須要用到的主機地址、用戶名、密碼。

步驟以下：

1. 首先登陸阿里雲控制檯。

2. 找到產品與服務 -> 域名與網站 -> 雲虛擬主機
   

3. 在面板上面找到你的剛剛購買的主機，點擊管理
   

4. 而後在頁面中你就能夠找到你要的信息
   

接下來就是使用客戶端鏈接，這個沒有什麼好說的，我就放一張圖片就能夠了。