網(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)。
這時候在終端輸入
npm
可以看到有一串命令提示地回,說明安裝成功扁远,接下來,就可以配置Hexo了落君。
二穿香、Hexo安裝
關(guān)于Hexo的安裝在Hexo官網(wǎng)上有很詳細的步驟。
- 安裝,使用以下命令行:
npm install -g hexo-cli
- 選取你想要放置Hexo文件的位置绎速,比如我想放在文稿里面皮获,于是我輸入了:
cd ~/Documents
。 - 輸入以下命令來在這個目錄下面建立一個Hexo的目錄纹冤。
hexo init <folder>
cd <folder>
npm install
注意這個folder的名字最好使用username.github.io的形式洒宝,其中的username是你GitHub賬號的昵稱。假如我GitHub的昵稱為abc萌京,那么我就輸入hexo init abc.github.io
雁歌。這種命名方式涉及到GitHub Pages的命名規(guī)則,在下面再說知残。
-
你可以看到abc.github.io文件夾下面出現(xiàn)了如下的文件:
- 輸入
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”柜蜈。
原因就是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