思維導圖總覽:
簡介
Hexo:
Hexo 是一款基于Node.js、快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
官網 https://hexo.io/zh-cn/docs/index.html
NodeJs:
Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎。chrome瀏覽器就基于V8,同時打開20-30個網頁都很流暢。Nodejs標準的web開發框架Express,可以幫助我們迅速建立web站點,比起PHP的開發效率更高,而且學習曲線更低。非常適合小型網站,個性化網站,我們自己的Geek網站??!
JS是腳本語言,腳本語言需要一個解析器才能運行。對于寫在HTML頁面里面的JS,瀏覽器充當了解析器的角色。而對于需要獨立運行的JS,NodeJS就是一個解析器。
每種解析器就是一個運行環境,不但允許JS定義各種數據結構,進行各種計算,還允許JS使用運行環境提供的內置對象和方法做一些事情。例如運行在瀏覽器中的JS的用途是操作DOM,瀏覽器就提供了document之類的內置對象。而運行在NodeJS中的JS的用途是操作磁盤文件或者搭建HTTP服務器,NodeJS就相應提供了fs、http等內置對象.
【規律使我們開闊,但文化使我們更加深刻?!?/p>
弄清楚一樣東西存在的意義還是蠻重要的,因此,我們要上一堂歷史課咯~
話說當年NodeJS的作者啊,在創造NodeJS之初,他想實現一個高性能的Web服務器,這廝首先看重的是事件機制和異步IO模型的優越性,而不是JS。但是呢,他首要做的一件事就是要找一門語言,來實現他偉大的想法,而這門語言不能是自帶IO功能的(為毛線不能自帶???那個立志成為海賊王的男人嘛,發現以前同步IO太TM坑爹咯,要自己實現一個異步IO模型,并且能良好的支持事件機制( ⊙ o ⊙ )啊!)。JS沒有自帶IO功能,天生就用于處理瀏覽器的DOM事件,并且有一大群屌絲程序員,因此就成為了天然的選擇啦。
如他所愿,NodeJS在服務器端活躍起來,出現了大批基于NodeJS的Web服務。而另一方面,NodeJS讓前端的開發人員(說你耶)如獲神器,終于可以在自己的有生之年,讓自己的能力范圍內跳出瀏覽器窗口。自從這春風拂面,大批的開發工具如雨后春筍般涌現,前端開發者的謎之微笑,燦若桃花(閉上眼睛,用心感受)。SO,對于前端而言,雖然不是人人都要拿NodeJS寫一個服務器程序,但其簡單程度可至使用命令交互模式調試JS代碼片段,復雜可至編寫工具提高工作效率??芍^,居家旅行必備的裝逼神器。
NodeJS生態圈正欣欣向榮,畫面太美,不忍直視。
Github
GitHub is the single largest host for Git repositories, and is the central point of collaboration for millions of developers and projects. A large percentage of all Git repositories are hosted on GitHub, and many open-source projects use it for Git hosting, issue tracking, code review, and other things. So while it’s not a direct part of the Git open source project, there’s a good chance that you’ll want or need to interact with GitHub at some point while using Git professionally.
--摘自官方文檔
(⊙o⊙)… 這堆雞腸是神馬意思?好吧,我意譯一下,水平有限,請不吝賜教。
Github是Git倉庫唯一且最大的主機,它是數以萬計的開發者和項目協作的中心點。絕大部分Git倉庫托管在GitHub上,許多的開源項目使用Github的Git倉庫托管服務,問題跟蹤,代碼復查和其他的東西。因此,雖然它不是直接參與Git的開源項目,但這是一個你會想要或者需要在某些時候專業地使用Git與github互動的好機會。
(翻譯得好爛... ... )
Git
是一個開源的分布式版本控制系統,用以有效、高速的處理從很小到非常大的項目版本管理。
Github page:
GitHub Pages本用于介紹托管在GitHub的項目, 不過,由于他的空間免費穩定,用來做搭建一個博客再好不過了。
github Pages可以被認為是用戶編寫的、托管在github上的靜態網頁。
Markdown
Markdown 是一種輕量級標記語言,創始人為約翰·格魯伯(John Gruber)。它允許人們“使用易讀易寫的純文本格式編寫文檔,然后轉換成有效的XHTML(或者HTML)文檔”。[1]這種語言吸收了很多在電子郵件中已有的純文本標記的特性。
優點:
1、簡單,容易上手
2、純文本實現,程序員最愛,容易擴展,方便和其他工具聯動
3、平臺支持廣:以Github為首的各種平臺、各種博客都支持,基本上現在面向程序員的輸入框都可以用Markdown來寫了
4、豐富的工具鏈
5、編輯器:各種支持所見即所得的編輯器
6、和各種其他格式互相轉化的工具。PDF、Mobi、Epub、HTML等等,幾乎你能想到的所有格式它都能轉換。
HOW?
環境配置
node-v4.4.0-x64.msi
Git-1.9.5-preview20150319.exe
安裝Git
就此不截圖了,一直下一步,然后自定義一個安裝路徑,安裝即可。
安裝Node.js
也是一直下一步,選擇一個自定義的安裝路徑。接著要配置環境變量:
D:\software\develop\nodejs\是我的NodeJs的安裝目錄,你配環境變量的時候要配你自己安裝的目錄。配環境變量是為了讓windows的命令行能調用到NodeJS里面的命令。
安裝hexo
第一步:打開cmd。第二步:進入NodeJS的安裝目錄
第三步:開始安裝hexo,利用 npm 命令即可安裝
npm install -g hexo
開始搭建博客
來杯咖啡稍作等待,即可安裝成功。接下來,執行
mkdir blog && cd blog
此處blog便是你的博客目錄,當然其他什么名字也是極好的,看心情了,此時最好將此目錄備份到云盤或者其他地方,以防文件夾丟失后博客就沒有了。
然后執行
hexo init
安裝依賴包
npm install
至此,博客搭建成功!當然,僅僅是本地的了。此時執行
hexo g
即可生成靜態頁面,然后執行
hexo s
訪問http://localhost:4000即可看到你的博客。
如果想讓放到網上該怎么辦呢?那就接著往下看咯。
注意:暫時別關你的cmd窗口。
部署博客到github
1、注冊賬號
The first thing you need to do is set up a free user account. Simply visithttps://github.com, choose a user name that isn’t already taken, provide an email address and a password, and click the big green “Sign up for GitHub” button.
你所要做的第一件事就是創建一個免費的用戶賬號。簡單地訪問https://github.com,選擇一個未被使用過的用戶名,提供一個郵箱地址以及密碼,并點擊寫著“sign up for GitHub”的綠色按鈕。
經過郵箱認證后,該賬號就會被激活的。
2、創建一個倉庫
注:Github Pages的Repository名字是特定的,比如我Github賬號是dantefung,那么我Github Pages Repository名字就是dantefung.github.io。
3、設置github pages
創建成功后,回到主頁面,點擊進入你剛剛創建好的倉庫
接著點擊settings,進入倉庫管理
更新你的站點
選擇主題并發布
至此,你的github pages就發布成功了。試試在瀏覽器的地址欄輸入”你github的用戶名.github.io”吧!
現在回到你的 ,
打開你安裝好的NodeJS的根目錄,然后點擊進入剛剛新建的blog文件夾:
在文件的底部,將配置改成介樣:
其中只需修改一下repository,將其內容修改為剛剛新建的項目的倉庫地址即可。接下來,回到你的cmd窗口,只需執行兩個命令:
npm install hexo-deployer-git --save (這命令是為了解決hexo新版本的部署問題)
hexo g 回車 (這是重新生成blog)
hexo d 回車 (這是將本地blog部署到github的倉庫)
現在,試試在瀏覽器的地址欄輸入:“你的用戶名.github.io”,此時,你應該會看到這樣的界面:
你可能會吐槽這個主題怎么這么難看,好下面我就教你怎么改主題。此時,你的cmd窗口還是先別關。
主題篇
接下來,開始對博客進行一番改造。畢竟博客是自己精神上的一個家園,當然要裝飾打造一番了。
首先嘛,自然是進行主題的選擇了,主題在這里。選擇好一個主題之后,就是進行主題的安裝了。在剛剛那個網站上,點擊右邊的鏈接可以看到主題的Demo,選則一個喜歡的主題然后點擊左邊的鏈接進入github上:
第一步:克隆主題到本地themes目錄下
方式一:
然后命令行進入到你的博客目錄的themes目錄下:
點擊鼠標右鍵,打開github bash執行下面語句:
git clone git://github.com/ppoffice/hexo-theme-alex.git
(這個是剛剛那個頁面的Install下的命令 )
方式二:
然后命令行進入到你的博客目錄目錄下:
執行如下命令:
然后你會在“你的blog目錄/themes”下看到:
其中git clone后面的鏈接為你進入的主題的鏈接地址,themes/alex為你的保存目錄,此處已alex主題為栗子,具體的以你選擇的主題為準。
第二步:配置你將要生成的博客主題為剛剛克隆的主題
然后進入到/blog/_config.yml里面,將theme改為你剛剛下載保存的主題的名字
然后回到cmd,執行:
hexo g 回車 (這是重新生成blog)
hexo d 回車 (這是將本地blog部署到github的倉庫)
好了,試試在瀏覽器的地址欄輸入:“你的github用戶名.github.io”,你將會看到如下主題的blog頁面/:
編寫與發布博客
怎么發布到github的博客?還是老樣子?。?/p>
接著:
FAQ(Frequently Asked Questions)
關于你博客部署失敗的解決辦法:
在用Hexo搭建靜態博客的時候,deploy時出現如下錯誤:
Error: spawn ENOENT
at errnoException (child_process.js:980:11)
at Process.ChildProcess._handle.onexit (child_process.js:771:34)
解決辦法?
添加環境變量:你的安裝目錄\Git\bin;你的安裝目錄\Git\libexec\git-core,這樣就解決了問題了。
可惜,使用這個辦法引入環境變量,按道理說cmd可以引用到git的命令,但是,你的卻居然不行。辣怎么解決呢?也不是沒有辦法。
你會發現每次我們執行完 hexo g 后,public目錄會被更新一次:
而你執行完 hexo d命令后是將.deploy_git文件夾中的內容推送到github的服務器上:
因此,我們可以在執行完hexo g后自己手動的提交:
隨便在某個目錄下:
然后,你刪掉例如我的dantefung.github.io里面的內容,然后:
接著,雙擊進入dantefung.github.io(以我的為例):
然后點OK,等待一會兒,正常情況下都會上傳成功~
現在,試試在瀏覽器地址欄輸入:“你的github用戶名.github.io”,看看你的博客主頁吧~~
我不會Markdown怎么辦?
http://ibruce.info/2013/11/26/markdown/ Markdown簡明語法
參考:
http://www.lxweimin.com/p/a2023a601ceb
本文轉自:
https://www.cnblogs.com/dantefung/p/d8c48ba8030bcab7cfc364d423186fee.html