摘要:你沒有看錯,只需幾小時,低仿的尤大作者博客你帶回家,有的小朋友可能注意到,為啥這里沒說同款和高仿的原因是在還有一些其他的方面,都是簡單的實現,我怕說了高仿之后,遭到板磚這樣就不好了,現在看病也挺貴的。步驟如下首先登錄阿里云控制臺。
前言
就在上周六看到阿里云服務器搞一個活動,6元錢一年的共享虛擬主機。但是之前有使用過,覺得最蛋疼的地方是,它只給你開放一個ftp,而且權限上面也有一些控制。所以一直在考慮是否好入手玩一下。后來想了想6塊錢又不多,我們搞起來吧。
好了,大家注意了。你沒有看錯,只需幾小時,低仿的尤大(Vue.js作者)博客你帶回家,有的小朋友可能注意到,為啥這里沒說同款和高仿的原因是在Markdown還有一些其他的方面,都是簡單的實現,我怕說了高仿之后,遭到板磚這樣就不好了,現在看病也挺貴的?。
先放上尤大的博客Evan You
然后放上低仿鏈接吧BIGTIGER.ME
再就是項目的地址Blog
本文僅僅是提供一種思路想跟大家交流,在實踐的過程中一些地方可能不是最佳。千萬不要用板磚拍我,人家第一次寫文章啊。如果你有更好的方案或者實踐思路,可以分享給我,期待~
聯系方式: liujinyang@bigtiger.me
我們要期望的使用Markdown 進行編輯博客內容
不需要后臺提供接口
不使用數據庫
使用Vue全家桶(你抄人家的博客,再不用人家的東西就有點過分了)
使用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來一鍵發布你的文章了。
總結最后我們實現了一個簡單的博客系統,時間雖然短,項目也很簡單。但是完整的走了一遍實際開發中,從需求定制到產品完成的一套流程。
但畢竟實現的時間有限,有些不足之處,有待完善:
Markdown處理的不夠徹底,比如代碼顯示等等
SEO優化,博客還是以內容為主。
當Markdown文件沒有修改,應該不需要重新上傳,但是現在需要重新上傳。
Loading切換生硬
首頁列表分頁沒做...懶得做了
評論回復...懶得嵌入了
等等等...
最后謝謝大家聽我嗶嗶...
鼓掌?
附錄 FTP連接服務器購買之后,會讓你設置3個密碼,分別是登錄控制臺的密碼(當然這個從阿里云的控制臺也可以)、數據庫的密碼(當然也沒有什么卵用)、最后就是FTP的密碼!
我連接的方式是使用FileZilla的客戶端。Mac和Windows都有,它張這個樣子,大家可以自行下載。
然后我們需要找到我們需要用到的主機地址、用戶名、密碼。
步驟如下:
首先登錄阿里云控制臺。
找到產品與服務 -> 域名與網站 -> 云虛擬主機
在面板上面找到你的剛剛購買的主機,點擊管理
然后在頁面中你就可以找到你要的信息
接下來就是使用客戶端連接,這個沒有什么好說的,我就放一張圖片就可以了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111989.html
摘要:怎么才能把臺式電腦帶回家可以寄嗎最好是自己帶著,麻煩點。如果非要寄就寄順豐,以下幾個建議供參考主機是否能找到原包裝,如果找到原包裝,里面的泡沫塑料是根據機型定制的,效果最好。怎么才能把臺式電腦帶回家?可以寄嗎?最好是自己帶著,麻煩點。如果非要寄就寄順豐,以下幾個建議供參考:主機;1.是否能找到原包裝,如果找到原包裝,里面的泡沫塑料是根據機型定制的,效果最好。2.把機箱打開,顯卡拆下單獨打包,...
閱讀 1743·2021-09-22 15:25
閱讀 1307·2019-08-29 12:34
閱讀 1907·2019-08-26 13:57
閱讀 3188·2019-08-26 10:48
閱讀 1443·2019-08-26 10:45
閱讀 792·2019-08-23 18:23
閱讀 733·2019-08-23 18:01
閱讀 1944·2019-08-23 16:07