成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

尤大低仿博客帶回家

ztyzz / 1435人閱讀

摘要：你沒(méi)有看錯(cuò)，只需幾小時(shí)，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒(méi)說(shuō)同款和高仿的原因是在還有一些其他的方面，都是簡(jiǎn)單的實(shí)現(xiàn)，我怕說(shuō)了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺(tái)。

前言

就在上周六看到阿里云服務(wù)器搞一個(gè)活動(dòng)，6元錢(qián)一年的共享虛擬主機(jī)。但是之前有使用過(guò)，覺(jué)得最蛋疼的地方是，它只給你開(kāi)放一個(gè)ftp，而且權(quán)限上面也有一些控制。所以一直在考慮是否好入手玩一下。后來(lái)想了想6塊錢(qián)又不多，我們搞起來(lái)吧。

好了，大家注意了。你沒(méi)有看錯(cuò)，只需幾小時(shí)，低仿的尤大（Vue.js作者）博客你帶回家，有的小朋友可能注意到，為啥這里沒(méi)說(shuō)同款和高仿的原因是在Markdown還有一些其他的方面，都是簡(jiǎn)單的實(shí)現(xiàn)，我怕說(shuō)了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的?。

先放上尤大的博客Evan You
然后放上低仿鏈接吧BIGTIGER.ME
再就是項(xiàng)目的地址Blog

聲明

本文僅僅是提供一種思路想跟大家交流，在實(shí)踐的過(guò)程中一些地方可能不是最佳。千萬(wàn)不要用板磚拍我，人家第一次寫(xiě)文章啊。如果你有更好的方案或者實(shí)踐思路，可以分享給我，期待~

聯(lián)系方式: [email protected]

我們要期望的

使用Markdown 進(jìn)行編輯博客內(nèi)容

不需要后臺(tái)提供接口

不使用數(shù)據(jù)庫(kù)

使用Vue全家桶（你抄人家的博客，再不用人家的東西就有點(diǎn)過(guò)分了）

使用NPM腳本一鍵發(fā)布博客

實(shí)踐過(guò)程 購(gòu)買(mǎi)服務(wù)器

放一個(gè)地址共享虛擬主機(jī)普惠版，選擇Linux，其他的就略過(guò)了。

使用FTP連接服務(wù)器

這個(gè)放在最后吧，因?yàn)椴僮饔行┤艘呀?jīng)會(huì)了，詳細(xì)描述還挺麻煩的。但是為了讓大家都可以快速的搭建，所以我選擇放在后面，有點(diǎn)像附錄?。

服務(wù)器上面的目錄結(jié)構(gòu)

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

使用vue-cli快速構(gòu)建目錄結(jié)構(gòu)

在執(zhí)行之后操作前，你確保你的電腦已經(jīng)安裝過(guò)node(>=4.x, 6.x)

$ npm install -g vue-cli

$ vue init webpack 這里寫(xiě)你的項(xiàng)目名

$ cd 這里寫(xiě)你的項(xiàng)目名

$ npm i

然后下面有幾項(xiàng)可以配置

具體就不詳細(xì)介紹了

將Markdown文件轉(zhuǎn)換成json

不想聽(tīng)我啰嗦的可以直接看這部分的源碼，/build/create-posts-json.js

這里用到了兩個(gè)第三方的庫(kù)，第一個(gè)是markdown-to-json，第二個(gè)是markdown-js

大概思路是，在/build/posts目錄下去寫(xiě).md文件，然后通過(guò)markdown-to-json去構(gòu)建一個(gè)文章的json列表，然后再分別構(gòu)建單個(gè)文件的json，并將json中的content用markdown.toHTML轉(zhuǎn)換成HTML，最后將生成的json文件放到/build/static/posts目錄下。

這里面需要講的是，markdown-to-json需要在文件中添加相應(yīng)的信息才能構(gòu)建出列表

轉(zhuǎn)換成json是

然后將這個(gè)js文件分別引入到/build/build.js和/build/dev-server.js中，放在頂部就可以了。

使用Vue全家桶進(jìn)行頁(yè)面的開(kāi)發(fā)

老樣子放上源碼/build/src

大概的思路就是用，vue-router管理頁(yè)面路由，vue-resource去靜態(tài)資源中請(qǐng)求對(duì)應(yīng)的json文件，vuex用來(lái)切換頁(yè)面時(shí)開(kāi)關(guān)Loading...

打包和部署 
$ npm run build

等待打包結(jié)束后，使用FTP把/build/dist文件夾下面的文件扔到服務(wù)器上面就可以了。

這個(gè)時(shí)候輸入你的域名就可以看到你的博客了。

你以為這樣就完了？

答案是并沒(méi)有！

細(xì)心的小伙伴們會(huì)發(fā)現(xiàn)，這樣的話，我豈不是每次發(fā)布文章都需要構(gòu)建，然后手動(dòng)上傳到服務(wù)器？的確這樣很不便捷和高效。

那我們接下來(lái)就要解決這個(gè)問(wèn)題。

好了，慣例，先放源碼，不愛(ài)聽(tīng)我嗶嗶的可以去看了/build/release.js

這個(gè)使用了兩個(gè)node的第三方庫(kù)，分別是ftp和async

大體思路是使用node-ftp去連接服務(wù)器，然后將本地生成的json文件上傳。但是當(dāng)我們需要上傳多個(gè)json文件的時(shí)候，我們就需要使用async來(lái)控制回調(diào)。

然后將我們之前寫(xiě)的create-posts-json.js引用進(jìn)來(lái)，再在package.json文件中的script中寫(xiě)下

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

接下來(lái)你就可以愉快地使用npm run release來(lái)一鍵發(fā)布你的文章了。

總結(jié)

最后我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的博客系統(tǒng)，時(shí)間雖然短，項(xiàng)目也很簡(jiǎn)單。但是完整的走了一遍實(shí)際開(kāi)發(fā)中，從需求定制到產(chǎn)品完成的一套流程。

但畢竟實(shí)現(xiàn)的時(shí)間有限，有些不足之處，有待完善：

Markdown處理的不夠徹底，比如代碼顯示等等

SEO優(yōu)化，博客還是以內(nèi)容為主。

當(dāng)Markdown文件沒(méi)有修改，應(yīng)該不需要重新上傳，但是現(xiàn)在需要重新上傳。

Loading切換生硬

首頁(yè)列表分頁(yè)沒(méi)做...懶得做了

評(píng)論回復(fù)...懶得嵌入了

等等等...

最后謝謝大家聽(tīng)我嗶嗶...

鼓掌?

附錄 FTP連接服務(wù)器

購(gòu)買(mǎi)之后，會(huì)讓你設(shè)置3個(gè)密碼，分別是登錄控制臺(tái)的密碼（當(dāng)然這個(gè)從阿里云的控制臺(tái)也可以）、數(shù)據(jù)庫(kù)的密碼（當(dāng)然也沒(méi)有什么卵用）、最后就是FTP的密碼！

我連接的方式是使用FileZilla的客戶端。Mac和Windows都有，它張這個(gè)樣子，大家可以自行下載。

然后我們需要找到我們需要用到的主機(jī)地址、用戶名、密碼。

步驟如下：

首先登錄阿里云控制臺(tái)。

找到產(chǎn)品與服務(wù) -> 域名與網(wǎng)站 -> 云虛擬主機(jī)

在面板上面找到你的剛剛購(gòu)買(mǎi)的主機(jī)，點(diǎn)擊管理

然后在頁(yè)面中你就可以找到你要的信息

接下來(lái)就是使用客戶端連接，這個(gè)沒(méi)有什么好說(shuō)的，我就放一張圖片就可以了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91708.html

相關(guān)文章

  • 尤大低仿博客帶回家

    摘要：你沒(méi)有看錯(cuò)，只需幾小時(shí)，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒(méi)說(shuō)同款和高仿的原因是在還有一些其他的方面，都是簡(jiǎn)單的實(shí)現(xiàn)，我怕說(shuō)了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺(tái)。 前言 就在上周六看到阿里云服務(wù)器搞一個(gè)活動(dòng)，6元錢(qián)一年的共享虛擬主機(jī)。但是之前有使用過(guò)，覺(jué)得最蛋疼的地方是，它只給你開(kāi)放一個(gè)ftp，而且權(quán)限上面也有一些控制...

    chanjarster 評(píng)論0 收藏0

  • 尤大低仿博客帶回家

    摘要：你沒(méi)有看錯(cuò)，只需幾小時(shí)，低仿的尤大作者博客你帶回家，有的小朋友可能注意到，為啥這里沒(méi)說(shuō)同款和高仿的原因是在還有一些其他的方面，都是簡(jiǎn)單的實(shí)現(xiàn)，我怕說(shuō)了高仿之后，遭到板磚這樣就不好了，現(xiàn)在看病也挺貴的。步驟如下首先登錄阿里云控制臺(tái)。 前言 就在上周六看到阿里云服務(wù)器搞一個(gè)活動(dòng)，6元錢(qián)一年的共享虛擬主機(jī)。但是之前有使用過(guò)，覺(jué)得最蛋疼的地方是，它只給你開(kāi)放一個(gè)ftp，而且權(quán)限上面也有一些控制...

    missonce 評(píng)論0 收藏0

  • 國(guó)慶怎么把主機(jī)帶回家-怎么把臺(tái)式電腦帶回家？

    摘要：怎么才能把臺(tái)式電腦帶回家可以寄嗎最好是自己帶著，麻煩點(diǎn)。如果非要寄就寄順豐，以下幾個(gè)建議供參考主機(jī)是否能找到原包裝，如果找到原包裝，里面的泡沫塑料是根據(jù)機(jī)型定制的，效果最好。怎么才能把臺(tái)式電腦帶回家？可以寄嗎？最好是自己帶著，麻煩點(diǎn)。如果非要寄就寄順豐，以下幾個(gè)建議供參考:主機(jī);1.是否能找到原包裝，如果找到原包裝，里面的泡沫塑料是根據(jù)機(jī)型定制的，效果最好。2.把機(jī)箱打開(kāi)，顯卡拆下單獨(dú)打包，...

    Rango 評(píng)論0 收藏0

  • Java IO初探

    Java IO對(duì)大多數(shù)Java程序員來(lái)說(shuō)是熟悉又陌生，熟悉的是感覺(jué)到處都有它的身影，小到簡(jiǎn)單的讀取文件，大到各種服務(wù)器的應(yīng)用，陌生的是Java IO背后到底是一個(gè)怎樣的機(jī)制，今天就讓我們?nèi)チ私庖幌逻@位老朋友吧。本文不講解Java IO如何具體使用，有這方面需求的同學(xué)可以自己查下。 IO模型 要說(shuō)IO，就不得不說(shuō)IO模型，IO模型大家都有所了解，同步異步，阻塞非阻塞什么的，總的來(lái)說(shuō)IO模型可分為以下...

    edgardeng 評(píng)論0 收藏0

  • 深入理解js

    摘要：詳解十大常用設(shè)計(jì)模式力薦深度好文深入理解大設(shè)計(jì)模式收集各種疑難雜癥的問(wèn)題集錦關(guān)于，工作和學(xué)習(xí)過(guò)程中遇到過(guò)許多問(wèn)題，也解答過(guò)許多別人的問(wèn)題。介紹了的內(nèi)存管理。 延遲加載 (Lazyload) 三種實(shí)現(xiàn)方式 延遲加載也稱為惰性加載，即在長(zhǎng)網(wǎng)頁(yè)中延遲加載圖像。用戶滾動(dòng)到它們之前，視口外的圖像不會(huì)加載。本文詳細(xì)介紹了三種延遲加載的實(shí)現(xiàn)方式。 詳解 Javascript十大常用設(shè)計(jì)模式 力薦~ ...

    caikeal 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<