資訊專欄INFORMATION COLUMN
摘要：你沒有看錯，只需幾小時，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒說同款和高仿的原因是在還有一些其他的方面，都是簡單的實現(xiàn)，我怕說了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺。
前言
就在上周六看到阿里云服務(wù)器搞一個活動，6元錢一年的共享虛擬主機(jī)。但是之前有使用過，覺得最蛋疼的地方是，它只給你開放一個ftp，而且權(quán)限上面也有一些控制。所以一直在考慮是否好入手玩一下。后來想了想6塊錢又不多，我們搞起來吧。
好了，大家注意了。你沒有看錯，只需幾小時，低仿的尤大（Vue.js作者）博客你帶回家，有的小朋友可能注意到，為啥這里沒說同款和高仿的原因是在Markdown還有一些其他的方面，都是簡單的實現(xiàn)，我怕說了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的?。
先放上尤大的博客Evan You
然后放上低仿鏈接吧BIGTIGER.ME
再就是項目的地址Blog
本文僅僅是提供一種思路想跟大家交流，在實踐的過程中一些地方可能不是最佳。千萬不要用板磚拍我，人家第一次寫文章啊。如果你有更好的方案或者實踐思路，可以分享給我，期待~
聯(lián)系方式: liujinyang@bigtiger.me
我們要期望的使用Markdown 進(jìn)行編輯博客內(nèi)容
不需要后臺提供接口
不使用數(shù)據(jù)庫
使用Vue全家桶（你抄人家的博客，再不用人家的東西就有點過分了）
使用NPM腳本一鍵發(fā)布博客
實踐過程 購買服務(wù)器放一個地址共享虛擬主機(jī)普惠版，選擇Linux，其他的就略過了。
使用FTP連接服務(wù)器這個放在最后吧，因為操作有些人已經(jīng)會了，詳細(xì)描述還挺麻煩的。但是為了讓大家都可以快速的搭建，所以我選擇放在后面，有點像附錄?。
服務(wù)器上面的目錄結(jié)構(gòu)最終我們需要把你的博客文件放到htdocs目錄下。
使用vue-cli快速構(gòu)建目錄結(jié)構(gòu)在執(zhí)行之后操作前，你確保你的電腦已經(jīng)安裝過node(>=4.x, 6.x)
$ npm install -g vue-cli $ vue init webpack 這里寫你的項目名 $ cd 這里寫你的項目名 $ npm i
然后下面有幾項可以配置
具體就不詳細(xì)介紹了
將Markdown文件轉(zhuǎn)換成json不想聽我啰嗦的可以直接看這部分的源碼，/build/create-posts-json.js
這里用到了兩個第三方的庫，第一個是markdown-to-json，第二個是markdown-js
大概思路是，在/build/posts目錄下去寫.md文件，然后通過markdown-to-json去構(gòu)建一個文章的json列表，然后再分別構(gòu)建單個文件的json，并將json中的content用markdown.toHTML轉(zhuǎn)換成HTML，最后將生成的json文件放到/build/static/posts目錄下。
這里面需要講的是，markdown-to-json需要在文件中添加相應(yīng)的信息才能構(gòu)建出列表
轉(zhuǎn)換成json是
然后將這個js文件分別引入到/build/build.js和/build/dev-server.js中，放在頂部就可以了。
使用Vue全家桶進(jìn)行頁面的開發(fā)老樣子放上源碼/build/src
大概的思路就是用，vue-router管理頁面路由，vue-resource去靜態(tài)資源中請求對應(yīng)的json文件，vuex用來切換頁面時開關(guān)Loading...
打包和部署$ npm run build
等待打包結(jié)束后，使用FTP把/build/dist文件夾下面的文件扔到服務(wù)器上面就可以了。
這個時候輸入你的域名就可以看到你的博客了。
你以為這樣就完了？答案是并沒有！
細(xì)心的小伙伴們會發(fā)現(xiàn)，這樣的話，我豈不是每次發(fā)布文章都需要構(gòu)建，然后手動上傳到服務(wù)器？的確這樣很不便捷和高效。
那我們接下來就要解決這個問題。
好了，慣例，先放源碼，不愛聽我嗶嗶的可以去看了/build/release.js
這個使用了兩個node的第三方庫，分別是ftp和async
大體思路是使用node-ftp去連接服務(wù)器，然后將本地生成的json文件上傳。但是當(dāng)我們需要上傳多個json文件的時候，我們就需要使用async來控制回調(diào)。
然后將我們之前寫的create-posts-json.js引用進(jìn)來，再在package.json文件中的script中寫下
"release": "node build/release.js",
接下來你就可以愉快地使用npm run release來一鍵發(fā)布你的文章了。
總結(jié)最后我們實現(xiàn)了一個簡單的博客系統(tǒng)，時間雖然短，項目也很簡單。但是完整的走了一遍實際開發(fā)中，從需求定制到產(chǎn)品完成的一套流程。
但畢竟實現(xiàn)的時間有限，有些不足之處，有待完善：
Markdown處理的不夠徹底，比如代碼顯示等等
SEO優(yōu)化，博客還是以內(nèi)容為主。
當(dāng)Markdown文件沒有修改，應(yīng)該不需要重新上傳，但是現(xiàn)在需要重新上傳。
Loading切換生硬
首頁列表分頁沒做...懶得做了
評論回復(fù)...懶得嵌入了
等等等...
最后謝謝大家聽我嗶嗶...
鼓掌?
附錄 FTP連接服務(wù)器購買之后，會讓你設(shè)置3個密碼，分別是登錄控制臺的密碼（當(dāng)然這個從阿里云的控制臺也可以）、數(shù)據(jù)庫的密碼（當(dāng)然也沒有什么卵用）、最后就是FTP的密碼！
我連接的方式是使用FileZilla的客戶端。Mac和Windows都有，它張這個樣子，大家可以自行下載。
然后我們需要找到我們需要用到的主機(jī)地址、用戶名、密碼。
步驟如下：
首先登錄阿里云控制臺。
找到產(chǎn)品與服務(wù) -> 域名與網(wǎng)站 -> 云虛擬主機(jī)
在面板上面找到你的剛剛購買的主機(jī)，點擊管理
然后在頁面中你就可以找到你要的信息
接下來就是使用客戶端連接，這個沒有什么好說的，我就放一張圖片就可以了。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91708.html
摘要：你沒有看錯，只需幾小時，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒說同款和高仿的原因是在還有一些其他的方面，都是簡單的實現(xiàn)，我怕說了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺。 前言 就在上周六看到阿里云服務(wù)器搞一個活動，6元錢一年的共享虛擬主機(jī)。但是之前有使用過，覺得最蛋疼的地方是，它只給你開放一個ftp，而且權(quán)限上面也有一些控制...
摘要：怎么才能把臺式電腦帶回家可以寄嗎最好是自己帶著，麻煩點。如果非要寄就寄順豐，以下幾個建議供參考主機(jī)是否能找到原包裝，如果找到原包裝，里面的泡沫塑料是根據(jù)機(jī)型定制的，效果最好。怎么才能把臺式電腦帶回家？可以寄嗎？最好是自己帶著，麻煩點。如果非要寄就寄順豐，以下幾個建議供參考:主機(jī);1.是否能找到原包裝，如果找到原包裝，里面的泡沫塑料是根據(jù)機(jī)型定制的，效果最好。2.把機(jī)箱打開，顯卡拆下單獨打包，...
閱讀 2134·2021-10-14 09:43
閱讀 2197·2019-08-30 15:55
閱讀 725·2019-08-30 14:23
閱讀 2019·2019-08-30 13:21
閱讀 1234·2019-08-30 12:50
閱讀 2198·2019-08-29 18:46
閱讀 2279·2019-08-29 17:28
閱讀 2359·2019-08-29 17:21
