建站教程:使用GitHub和Hexo搭建免費(fèi)靜態(tài)Blog

2015-10-16 10:59:00 來源:hellodog 作者:佚名 人氣: 次閱讀 162 條評論

GitHub給我們提供了一個無限的空間,我們需要珍惜使用,而Hexo的出現(xiàn)從某種意義上來說代替了Jekyll,讓我們可以更專注于寫作本身。本文主要介紹自己的實(shí)踐心得并不斷完善內(nèi)...

建站教程 靜態(tài)博客<a href=/pc/system/ target=_blank class=infotextkey>系統(tǒng)</a> Hexo教程 Hexogithub Hexo主題

前言

習(xí)慣自己寫B(tài)log的朋友一定不會陌生wordpress,或許也曾在新浪博客和QQ空間留過腳印,但靜心認(rèn)真思考一下,似乎我們又總是向往更加簡單自由的寫作方式。GitHub給我們提供了一個無限的空間,我們需要珍惜使用,而Hexo的出現(xiàn)從某種意義上來說代替了Jekyll,讓我們可以更專注于寫作本身。本文主要介紹自己的實(shí)踐心得并不斷完善內(nèi)容,衍生知識和原理推薦大家認(rèn)真閱讀官網(wǎng)的手冊,其它推薦參考內(nèi)容鏈接在文中也會標(biāo)注出來。

喜歡寫B(tài)log的人,會經(jīng)歷三個階段:

第一階段,剛接觸Blog,覺得很新鮮,試著選擇一個免費(fèi)空間來寫。

第二階段,發(fā)現(xiàn)免費(fèi)空間限制太多,就自己購買域名和空間,搭建獨(dú)立博客。

第三階段,覺得獨(dú)立博客的管理太麻煩,最好在保留控制權(quán)的前提下,讓別人來管,自己只負(fù)責(zé)寫文章。

更新歷史

2015年09月03日 - 完善Windows 10安裝Hexo中的細(xì)節(jié)

2015年03月22日 - 更新Windows下Hexo 3.0安裝和升級,感謝@機(jī)智的阿卡林醬

2015年03月10日 - 增加Hexo 3.0降級 2.8

2014年12月19日 - 完善內(nèi)容

2014年12月09日 - 更新Hexo配置修改部分

2014年06月19日 - 更新全部基礎(chǔ)架構(gòu),待完善配置修改部分

2014年06月17日 - 更新部分Hexo建站過程,待完善

2014年05月29日 - 撰寫初稿

擴(kuò)展閱讀

Hexo Docs - http://hexo.io/docs/

HelloDog Index - http://wsgzao.github.io/index/#Hexo

準(zhǔn)備工作

注意 本文主要針對Windows平臺和Hexo 3.x

了解Hexo

A fast, simple & powerful blog framework

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內(nèi),即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。

hexo.io

安裝GIT

GitHub Windows

簡單可依賴,安裝完成后依據(jù)提示操作即可,So Easy

安裝Node.JS

Node.JS

注意 安裝完成后添加Path環(huán)境變量,使npm命令生效。新版已經(jīng)會自動配置Path

  1. ;C:/Program Files/nodejs/node_modules/npm

安裝Hexo

配置好GitHub家目錄后,雙擊桌面上的Git Shell,輸入npm命令即可安裝

  1. npm install hexo-cli -g
  2. npm install hexo --save
  3. #如果命令無法運(yùn)行,可以嘗試更換taobao的npm源
  4. npm install -g cnpm --registry=https://registry.npm.taobao.org

Hexo初始化配置

創(chuàng)建Hexo文件夾

安裝完成后,根據(jù)自己喜好建立目錄(如E:/kuaipan/GitHub/hexo),進(jìn)入Git Shell切換到該路徑下E:/kuaipan/GitHub/hexo執(zhí)行以下指令

  • hexo init
  • #安裝 Hexo 完成后,請執(zhí)行下列命令,Hexo 將會在指定文件夾中新建所需要的文件。
  • $ hexo init
  • $ cd
  • $ npm install
  • #新建完成后,指定文件夾的目錄如下
  • .
  • ├── _config.yml
  • ├── package.json
  • ├── scaffolds
  • ├── scripts
  • ├── source
  • | ├── _drafts
  • | └── _posts
  • └── themes

安裝Hexo插件

  1. npm install hexo-generator-index --save
  2. npm install hexo-generator-archive --save
  3. npm install hexo-generator-category --save
  4. npm install hexo-generator-tag --save
  5. npm install hexo-server --save
  6. npm install hexo-deployer-git --save
  7. npm install hexo-deployer-heroku --save
  8. npm install hexo-deployer-rsync --save
  9. npm install hexo-deployer-openshift --save
  10. npm install hexo-renderer-marked@0.2 --save
  11. npm install hexo-renderer-stylus@0.2 --save
  12. npm install hexo-generator-feed@1 --save
  13. npm install hexo-generator-sitemap@1 --save

本地查看效果

繼續(xù)執(zhí)行以下命令,成功后可登錄localhost:4000查看效果

  1. hexo server

Hexo 簡寫命令

  1. hexo n #new
  2. hexo g #generate
  3. hexo s #server

部署靜態(tài)網(wǎng)頁到GitHub

注冊設(shè)置GitHub

  1. 登錄GitHub,注冊自定義用戶名如wsgzao
  2. 在主頁右下角創(chuàng)建New repository,name必須和用戶名一致如wsgzao.github.io
  3. 首次創(chuàng)建耐心等待10分鐘左右審核,之后即可訪問靜態(tài)主頁如http://wsgzao.github.io

同步內(nèi)容至GitHub

  1. 下載GitHub Windows
  2. 設(shè)置Local path如E:/快盤/GitHub/
  3. 運(yùn)行Git Shell切換到如E:/快盤/GitHub/hexo路徑下
  4. 執(zhí)行hexo g命令生成public文件夾
  5. 把生成的內(nèi)容全部拷貝到Local path或其子目錄
  6. 運(yùn)行GitHub確認(rèn)修改信息后執(zhí)行右上角的Sync同步
  7. 最后訪問主頁觀察效果

https://pages.github.com/

域名和DNS

域名推薦

GoDaddy makes registering Domain Names fast, simple, and affordable.

【推薦理由】兩個字“靠譜”,支持支付寶,附優(yōu)惠碼鏈接

http://www.godaddy.com/

http://www.gdcodecoupon.com/

DNS推薦

致力于為您提供最穩(wěn)定、最安全的域名解析服務(wù)

【推薦理由】依然是兩個字“靠譜”,感謝他們一直以來對于公益的堅(jiān)持

https://www.dnspod.cn/

設(shè)置CNAME

  1. 在Github的網(wǎng)站目錄下創(chuàng)建CNAME文件
  2. 填寫自己的域名如hellodog.com,保存結(jié)束
  3. 登錄DNSPod,先添加域名,然后添加記錄,設(shè)置如下

建站教程 靜態(tài)博客系統(tǒng) Hexo教程 Hexogithub Hexo主題