Hexo+github搭建個人博客

思維導圖總覽:

enter image description here

簡介

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上的靜態網頁。


enter image description here

Markdown

Markdown 是一種輕量級標記語言,創始人為約翰·格魯伯(John Gruber)。它允許人們“使用易讀易寫的純文本格式編寫文檔,然后轉換成有效的XHTML(或者HTML)文檔”。[1]這種語言吸收了很多在電子郵件中已有的純文本標記的特性。

優點:

1、簡單,容易上手

2、純文本實現,程序員最愛,容易擴展,方便和其他工具聯動

3、平臺支持廣:以Github為首的各種平臺、各種博客都支持,基本上現在面向程序員的輸入框都可以用Markdown來寫了

4、豐富的工具鏈

5、編輯器:各種支持所見即所得的編輯器

6、和各種其他格式互相轉化的工具。PDF、Mobi、Epub、HTML等等,幾乎你能想到的所有格式它都能轉換。

HOW?

環境配置

enter image description here

node-v4.4.0-x64.msi


enter image description here

Git-1.9.5-preview20150319.exe


enter image description here
markdownpad2-setup.exe(markdown離線編輯器,可選,替代方案是使用在線的馬克飛象工具編輯markdown文件)

安裝Git

enter image description here

enter image description here

enter image description here

enter image description here

就此不截圖了,一直下一步,然后自定義一個安裝路徑,安裝即可。

安裝Node.js

enter image description here

也是一直下一步,選擇一個自定義的安裝路徑。接著要配置環境變量:


enter image description here

enter image description here

enter image description here

enter image description here

D:\software\develop\nodejs\是我的NodeJs的安裝目錄,你配環境變量的時候要配你自己安裝的目錄。配環境變量是為了讓windows的命令行能調用到NodeJS里面的命令。


enter image description here

安裝hexo

第一步:打開cmd。
enter image description here

第二步:進入NodeJS的安裝目錄


enter image description here

第三步:開始安裝hexo,利用 npm 命令即可安裝
npm install -g hexo
enter image description here

開始搭建博客

來杯咖啡稍作等待,即可安裝成功。接下來,執行

 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”的綠色按鈕。

enter image description here

經過郵箱認證后,該賬號就會被激活的。

2、創建一個倉庫

enter image description here
enter image description here

注:Github Pages的Repository名字是特定的,比如我Github賬號是dantefung,那么我Github Pages Repository名字就是dantefung.github.io。

3、設置github pages

創建成功后,回到主頁面,點擊進入你剛剛創建好的倉庫


enter image description here

接著點擊settings,進入倉庫管理


enter image description here

更新你的站點
enter image description here

選擇主題并發布


enter image description here

至此,你的github pages就發布成功了。試試在瀏覽器的地址欄輸入”你github的用戶名.github.io”吧!

現在回到你的 ,

enter image description here

打開你安裝好的NodeJS的根目錄,然后點擊進入剛剛新建的blog文件夾:


enter image description here

在文件的底部,將配置改成介樣:

其中只需修改一下repository,將其內容修改為剛剛新建的項目的倉庫地址即可。
enter image description here

接下來,回到你的cmd窗口,只需執行兩個命令:

npm install hexo-deployer-git --save (這命令是為了解決hexo新版本的部署問題)  
hexo g 回車 (這是重新生成blog) 
hexo d 回車 (這是將本地blog部署到github的倉庫)

現在,試試在瀏覽器的地址欄輸入:“你的用戶名.github.io”,此時,你應該會看到這樣的界面:


enter image description here

你可能會吐槽這個主題怎么這么難看,好下面我就教你怎么改主題。此時,你的cmd窗口還是先別關。

主題篇

接下來,開始對博客進行一番改造。畢竟博客是自己精神上的一個家園,當然要裝飾打造一番了。

首先嘛,自然是進行主題的選擇了,主題在這里。選擇好一個主題之后,就是進行主題的安裝了。在剛剛那個網站上,點擊右邊的鏈接可以看到主題的Demo,選則一個喜歡的主題然后點擊左邊的鏈接進入github上:


enter image description here

enter image description here

第一步:克隆主題到本地themes目錄下

方式一:

然后命令行進入到你的博客目錄的themes目錄下:


enter image description here

點擊鼠標右鍵,打開github bash執行下面語句:

git clone git://github.com/ppoffice/hexo-theme-alex.git
(這個是剛剛那個頁面的Install下的命令 )
enter image description here

enter image description here

enter image description here
方式二:

然后命令行進入到你的博客目錄目錄下:


enter image description here

執行如下命令:


enter image description here

然后你會在“你的blog目錄/themes”下看到:
enter image description here

其中git clone后面的鏈接為你進入的主題的鏈接地址,themes/alex為你的保存目錄,此處已alex主題為栗子,具體的以你選擇的主題為準。

第二步:配置你將要生成的博客主題為剛剛克隆的主題

然后進入到/blog/_config.yml里面,將theme改為你剛剛下載保存的主題的名字


enter image description here

然后回到cmd,執行:

hexo g 回車 (這是重新生成blog)

hexo d 回車 (這是將本地blog部署到github的倉庫)

好了,試試在瀏覽器的地址欄輸入:“你的github用戶名.github.io”,你將會看到如下主題的blog頁面/:


enter image description here

編寫與發布博客

enter image description here

enter image description here

enter image description here

怎么發布到github的博客?還是老樣子?。?/p>

enter image description here

接著:
enter image description here

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目錄會被更新一次:


enter image description here

enter image description here

enter image description here

而你執行完 hexo d命令后是將.deploy_git文件夾中的內容推送到github的服務器上:


enter image description here

因此,我們可以在執行完hexo g后自己手動的提交:

隨便在某個目錄下:


enter image description here

enter image description here

enter image description here

然后,你刪掉例如我的dantefung.github.io里面的內容,然后:


enter image description here

接著,雙擊進入dantefung.github.io(以我的為例):
enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

然后點OK,等待一會兒,正常情況下都會上傳成功~

現在,試試在瀏覽器地址欄輸入:“你的github用戶名.github.io”,看看你的博客主頁吧~~

我不會Markdown怎么辦?

http://ibruce.info/2013/11/26/markdown/ Markdown簡明語法

參考:

http://www.lxweimin.com/p/a2023a601ceb

http://voidy.net/

本文轉自:

https://www.cnblogs.com/dantefung/p/d8c48ba8030bcab7cfc364d423186fee.html

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容