Hexo+NexT+GitHub Pages從零開始搭建博客

網(wǎng)上可以進行博文寫作和更新的地方很多,像簡書就是一個非常優(yōu)秀的平臺各薇。但是總覺得,在別人網(wǎng)站上的文章就像是寄宿君躺,假如有一個擁有自己域名的空間來更新博客就像是有了自己的家峭判。但是大部分人都預(yù)算有限,也不愿意為了一時的沖動去花這無所謂的銀子棕叫,所幸GitHubPage可以免費托管自己的網(wǎng)站朝抖,在萬網(wǎng)上注冊一個域名也不算貴(最便宜的4塊錢首年),于是就花了點時間鼓搗了屬于自己的博客空間谍珊。

我使用的Hexo的靜態(tài)博客框架,NexT的主題急侥,本地調(diào)通了后推送到了GitHub砌滞,并且在萬網(wǎng)申請了域名,設(shè)置好域名解析后坏怪,把GitHub的網(wǎng)站地址綁定到了我申請的域名贝润。稍微美化后,具體效果就是這樣的:陌淺軒铝宵。歡迎收藏打掘!

一、環(huán)境配置

配置Hexo環(huán)境需要git和node.js鹏秋,安裝git和node.js需要HomeBrew的環(huán)境尊蚁。

1. HomeBrew

在Mac終端輸入brew,發(fā)現(xiàn)能夠出現(xiàn)一大串提示信息侣夷,說明你的HomeBrew已經(jīng)安裝了横朋,如果沒有,就輸入如下命令進行安裝:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2. git

如果Mac上本來就已經(jīng)安裝了Xcode百拓,那么就不用另外安裝git了琴锭,Xcode已經(jīng)自帶了晰甚。
如果需要安裝,那么輸入以下命令:

brew install git

3. node.js

最方便的方式就是直接從node.js的官網(wǎng)上面去下載安裝包决帖,然后直接進行安裝厕九。請下載LTS版本(目前為v6.10.1 LTS)。

Node.js安裝包

這時候在終端輸入npm可以看到有一串命令提示地回,說明安裝成功扁远,接下來,就可以配置Hexo了落君。

二穿香、Hexo安裝

關(guān)于Hexo的安裝在Hexo官網(wǎng)上有很詳細的步驟。

  1. 安裝,使用以下命令行:
npm install -g hexo-cli
  1. 選取你想要放置Hexo文件的位置绎速,比如我想放在文稿里面皮获,于是我輸入了:cd ~/Documents
  2. 輸入以下命令來在這個目錄下面建立一個Hexo的目錄纹冤。
hexo init <folder>
cd <folder>
npm install

注意這個folder的名字最好使用username.github.io的形式洒宝,其中的username是你GitHub賬號的昵稱。假如我GitHub的昵稱為abc萌京,那么我就輸入hexo init abc.github.io雁歌。這種命名方式涉及到GitHub Pages的命名規(guī)則,在下面再說知残。

  1. 你可以看到abc.github.io文件夾下面出現(xiàn)了如下的文件:


    Hexo文件系統(tǒng)
  2. 輸入hexo s或者hexo server靠瞎,出現(xiàn)如下提示,輸入下面的網(wǎng)址(localhost:4000/)求妹,就能看到博客的雛形了乏盐。

    hexo s命令通常用來測試用,可以在你上傳改動之前制恍,在本地提前看到改動的樣子父能。

其實到了現(xiàn)在,你的博客就已經(jīng)初步搭建完成了净神,只是這個博客你只能自己在本地才能看到而已何吝。如果想要大家能夠訪問到,就應(yīng)該放到Internet環(huán)境里面去鹃唯。因為GitHub Pages可以幫助我們把存進倉庫的Hexo博客轉(zhuǎn)為網(wǎng)頁內(nèi)容爱榕,所以我們下一步就是把剛剛在本地創(chuàng)建的Hexo博客放到GitHub里面去。

三坡慌、上傳到GitHub

1. 創(chuàng)建倉庫

首先呆细,你要有一個GitHub賬號,沒有的自己去申請,我這里就不啰嗦了絮爷。登錄GitHub趴酣。
然后點擊“New repository”創(chuàng)建一個新的倉庫,倉庫名前綴一定要和用戶名一樣坑夯,格式一定要是*****.github.io這樣的岖寞。其他地方不需要修改,直接點“Create repository”柜蜈。

創(chuàng)建Hexo倉庫

原因就是GitHub Pages的域名就是github.io仗谆,如果想使用這個服務(wù)就要用這個域名,不然你的網(wǎng)頁是呈現(xiàn)不出來的淑履。

上圖是四種GitHub Pages站點創(chuàng)建方式隶垮,我使用的是第一種。發(fā)現(xiàn)沒秘噪,不管哪種狸吞,域名都是github.io。分支一般使用master分支指煎,還可以使用gh-pages分支和master分支下的/docs文件夾存放Hexo博客蹋偏,但是我就不舍近取遠了。

2. 關(guān)聯(lián)遠程倉庫

在本地打開根目錄下面的_config.yml文件(可以使用vim至壤,我用的Sublime神器)威始。最下面有個deploy,type設(shè)置為git,branch設(shè)置為master像街,repo設(shè)置為你的HTTPS或者SSH方式的URL:



我使用的SSH黎棠,如下圖:



當(dāng)然,如果怕麻煩镰绎,你們也可以使用HTTPS脓斩,因為使用SSH需要配置本地秘鑰,HTTPS只需要在需要的時候輸入賬號密碼就可以了跟狱。

3. 進行推送

推送一般分三步

  • hexo clean
  • hexo generate (或者hexo g)
  • hexo deploy (或者hexo d)

第二步和第三步可以精簡為hexo d -g或者hexo g -d
這時候户魏,在瀏覽器輸入*.github.io驶臊,應(yīng)該能看到之前你在本地測試的時候看到的網(wǎng)頁了。

四叼丑、添加NexT主題

NexT主題作為一款“精于心关翎,簡于形”的主題,很受Hexo用戶的喜愛鸠信,相關(guān)的文檔可以參考官方文檔纵寝。上面說的很清楚,自我感覺講的沒官方的清除星立,就不多浪費你們的眼球了爽茴。注意_config.yml文件是站點配置文件葬凳,還是主題配置文件的區(qū)別就好了。

Next主題的最新版本的GitHub庫位置已經(jīng)更換室奏,Next官網(wǎng)上是舊的https://github.com/iissnan/hexo-theme-next 火焰,最新的Next主題請轉(zhuǎn)到https://github.com/theme-next/hexo-theme-next .

到這里,你只需要把文件進行推送就可以看到你的嶄新的NexT主題的博客頁面了(別忘了先clean再推送)胧沫。

五昌简、綁定個人域名

雖然別人能通過*.github.io訪問到你的博客,但是使用這個域名畢竟有些不爽绒怨,要是能使用自己的個性域名多好按渴辍!

1. 擁有一個域名

我是在萬網(wǎng)申請的個人域名南蹂。打開萬網(wǎng)犬金,登錄阿里云(如果沒有就注冊一個)。首先檢查自己想要注冊的域名有沒有被占用碎紊。


點擊“查域名”后佑附,你看到一個域名的列表,可以看到有沒有被注冊仗考,以及價格等音同。你可以選擇合適的域名進行購買。我購買的.win的域名很便宜秃嗜,首年4塊錢权均,以后每年7塊。如果稍微資金充裕些锅锨,建議配套上云解析熱銷版叽赊,不到20塊錢,增加一些安全服務(wù)必搞,加快解析速度必指,也是很劃算的。
購買后恕洲,這個域名就是屬于你的了塔橡,一定要實名認證,不然無法進行綁定霜第。

2. 配置解析

  • 進入萬網(wǎng)控制臺葛家,進入域名服務(wù),可以看到自己剛剛購買的域名泌类,如果沒有實名認證癞谒,是不會顯示“正常”的。


  • 點擊右側(cè)的“解析”弹砚,進入云解析界面双仍。點擊添加解析(不要進入新手引導(dǎo)),添加如下的三個解析:

    主機記錄分別是*迅栅,@殊校,www,記錄值是(你的用戶名).github.io. 读存,一定不要丟掉最后那個點为流。
  • 其中就是所有的你注冊的域名的子域名都指向咱們的博客,@的是前面沒有www之類的字段的域名让簿,最后的www作為常用的敬察,可以也單獨設(shè)置一下,不過你們也看到了尔当,我最后一個是暫停狀態(tài)莲祸,不過也不影響我使用啊~因為就包括www了。
  • 最后一步椭迎,在本地根目錄下的source文件夾下面建立一個CNAME文件锐帜,一定要全部大寫!一定不要后綴名畜号!然后在里面輸入你的域名缴阎。比如我輸入的是lifan666.win。這個是有重定向功能的简软,你的所有其他子域名(比如www.lifan666.win)會被重定向到這個域名(比如lifan666.win)蛮拔。我更希望使用的是www.lifan666.win,所有我在這個文件里面最后改成了www.lifan666.win痹升。所有你們可以試試建炫,網(wǎng)址輸入lifan666.win,最后是不是顯示的是www.lifan666.win啦~
  • 最最后一步疼蛾,hexo clean然后hexo d -g肛跌,然后等待DNS生效后,就能定向成功了察郁!

到這里衍慎,你的博客就基本搭建成功啦,剩下的工作绳锅,就是對博客進行各種細節(jié)優(yōu)化啦西饵,添加各種效果啦酝掩,盡力去完善吧鳞芙!O(∩_∩)O

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子原朝,更是在濱河造成了極大的恐慌驯嘱,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件喳坠,死亡現(xiàn)場離奇詭異鞠评,居然都是意外死亡,警方通過查閱死者的電腦和手機壕鹉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門剃幌,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人晾浴,你說我怎么就攤上這事负乡。” “怎么了脊凰?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵抖棘,是天一觀的道長。 經(jīng)常有香客問我狸涌,道長切省,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任帕胆,我火速辦了婚禮朝捆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘惶楼。我一直安慰自己右蹦,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布歼捐。 她就那樣靜靜地躺著何陆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪豹储。 梳的紋絲不亂的頭發(fā)上贷盲,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機與錄音剥扣,去河邊找鬼巩剖。 笑死,一個胖子當(dāng)著我的面吹牛钠怯,可吹牛的內(nèi)容都是我干的佳魔。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼晦炊,長吁一口氣:“原來是場噩夢啊……” “哼鞠鲜!你這毒婦竟也來了宁脊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤贤姆,失蹤者是張志新(化名)和其女友劉穎榆苞,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體霞捡,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡坐漏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了碧信。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赊琳。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖砰碴,靈堂內(nèi)的尸體忽然破棺而出慨畸,到底是詐尸還是另有隱情,我是刑警寧澤衣式,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布寸士,位于F島的核電站,受9級特大地震影響碴卧,放射性物質(zhì)發(fā)生泄漏弱卡。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一住册、第九天 我趴在偏房一處隱蔽的房頂上張望婶博。 院中可真熱鬧,春花似錦荧飞、人聲如沸凡人。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽挠轴。三九已至,卻和暖如春耳幢,著一層夾襖步出監(jiān)牢的瞬間岸晦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工睛藻, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留启上,地道東北人。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓店印,卻偏偏與公主長得像冈在,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子按摘,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,611評論 2 353

推薦閱讀更多精彩內(nèi)容