網(wǎng)站建設(shè)

Website development

博客建站建設(shè):用GitHub和Hexo搭建免費(fèi)靜態(tài)Blog

發(fā)布時(shí)間：2015-10-17 09:55:50

TAGS：網(wǎng)站行業(yè),云智網(wǎng)站建設(shè),網(wǎng)站建設(shè)方案,網(wǎng)站建設(shè)

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

前言

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

喜歡寫B(tài)log的人，會經(jīng)歷三個(gè)階段：

第一階段，剛接觸Blog，覺得很新鮮，試著選擇一個(gè)免費(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 是一個(gè)快速、簡潔且高效的博客框架。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)會自動(dòng)配置Path

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

安裝Hexo

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

npm install hexo-cli -g
npm install hexo --save
#如果命令無法運(yùn)行，可以嘗試更換taobao的npm源
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插件

npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

本地查看效果

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

hexo server

Hexo 簡寫命令

hexo n #new
hexo g #generate
hexo s #server

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

注冊設(shè)置GitHub

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

同步內(nèi)容至GitHub

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

https://pages.github.com/

域名和DNS

域名推薦

GoDaddy makes registering Domain Names fast, simple, and affordable.
【推薦理由】兩個(gè)字“靠譜”，支持支付寶，附優(yōu)惠碼鏈接

http://www.godaddy.com/

http://www.gdcodecoupon.com/

DNS推薦

致力于為您提供穩(wěn)定、安全的域名解析服務(wù)
【推薦理由】依然是兩個(gè)字“靠譜”，感謝他們一直以來對于公益的堅(jiān)持

https://www.dnspod.cn/

設(shè)置CNAME

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

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

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://mpian.cn/i,72,6167,0.html

上一篇：沒花一毛錢王思聰就搞定“萬達(dá)”域名wanda.com

下一篇：網(wǎng)站建設(shè)安全加密

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對待我們并不像是對待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺操作的簡單。技術(shù)還會耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問題都會馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍γ總€(gè)項(xiàng)目建了相應(yīng)的討論組，有問題可以再里面提出，人員分工到位，解決問題很及時(shí)。

張經(jīng)理