本文將基于 Mac OS 系統為大家介紹如何利用 GitHub+Hexo 搭建一款輕便的獨立博客主頁(yè),現在就開(kāi)始吧!
1.安裝 Node.js——配置安裝 Hexo 的環(huán)境
Node.js 下載地址:
https://link.zhihu.com/?target=https%3A//nodejs.org/en/download/
注意安裝 Node.js 會(huì )包含環(huán)境變量及 npm 的安裝。安裝后,檢測 Node.js 是否安裝成功,在命令行中輸入 node -v ,回車(chē)后出現版本號即安裝成功。
$ node -vv8.11.3檢測 npm 是否安裝成功,在命令行中輸入 npm -v ,回車(chē)后出現版本號即安裝成功。
$ npm -v6.2.0到這里,安裝 Hexo 的環(huán)境已經(jīng)全部搭建完成。
2.安裝 Hexo——Hexo 是我們的個(gè)人博客的本地框架
(1)使用 npm 命令安裝 Hexo 客戶(hù)端,輸入:
$ npm install -g hexo-cli這個(gè)安裝時(shí)間較長(cháng)耐心等待。
(2)安裝完成后需要自行在電腦里創(chuàng )建一個(gè)文件夾,可以命名為 myBlog(下文都以該文件夾名進(jìn)行操作說(shuō)明),Hexo 框架和發(fā)布的網(wǎng)頁(yè)文件都在這個(gè)文件夾中。
(3)由于之后的配置需要在 myBlog 文件夾下進(jìn)行,需要用 cd 命令打開(kāi)你剛創(chuàng )建的文件夾 myBlog。
比如:我創(chuàng )建的 myBlog 文件夾位于:local/user/zoe/myBlog,zoe 是我的本機用戶(hù)名,由于我的終端默認是在 zoe 文件夾下進(jìn)行操作,所以我只要輸入 cd myBlog 進(jìn)行即可進(jìn)入 zoe 下的 myBlog 文件夾。
cd myBlog(4)進(jìn)入 myBlog 文件夾后初始化博客,輸入:
$ hexo init myBlog(5)檢查網(wǎng)站雛形
輸入以下命令:hexo g 用于生成 public 靜態(tài)資源;hexo s 用于啟動(dòng)本地服務(wù)器(注:g=generate; s=server)
$ hexo g$ hexo s執行上述兩條命令后,在瀏覽器輸入 http://localhost:4000 ,即可查看通過(guò) hexo 部署的本地靜態(tài)網(wǎng)頁(yè)效果。
到這里,本地網(wǎng)頁(yè)搭建完成。(文末附有 hexo 的常用命令)
為了讓更多人看到你的網(wǎng)頁(yè),需要通過(guò) GitHub 將你的網(wǎng)頁(yè)發(fā)布到網(wǎng)絡(luò )上。
1.在 GitHub 上創(chuàng )建一個(gè)新倉庫
(1)如果沒(méi)有 GitHub 賬號可以去官網(wǎng)注冊,注冊后創(chuàng )建一個(gè)名為 yourname.github.io的新倉庫,yourname是你的 GitHub 的用戶(hù)名,這個(gè)規則不能變。
(2)通過(guò) SSH 連接到 GitHub
( https://help.github.com/articles/connecting-to-github-with-ssh/ )點(diǎn)此鏈接,查看官方操作說(shuō)明。添加 ssh keys 之后,就可以使用 git 為后綴的倉庫地址,并且本地發(fā)布網(wǎng)頁(yè)時(shí)無(wú)需輸入用戶(hù)名和密碼。
2.關(guān)聯(lián) Hexo 到 GitHub
打開(kāi) myBlog 下的配置文件 _config.yml,拉到文件最后,按下面內容進(jìn)行修改:
deploy: type: git repo: git@github.com:yourname/yourname.github.io.git branch: master注意:
考慮到大家不止一個(gè) GitHub 賬號,“repo”此處如果不這樣處理,而去使用 https 的倉庫地址的話(huà),接下來(lái)部署時(shí)往往會(huì )出現不讓輸入 GitHub 用戶(hù)名和密碼的問(wèn)題!
每個(gè)關(guān)鍵字的后面都有個(gè)空格
到這里,這樣就將 Hexo 關(guān)聯(lián)到了 Github。
3.新建文章并發(fā)布
(1)將發(fā)布到網(wǎng)頁(yè)上的文章以 .md 文件形式存儲在 myBlog/source/_posts 目錄下。.md 文件即 markdown 文件,詳細在網(wǎng)上自行查詢(xún),非常簡(jiǎn)潔好用的文本格式。
(2)輸入以下命令將本地靜態(tài)網(wǎng)頁(yè)發(fā)布到網(wǎng)絡(luò )
hexo d 用于將 public 文件夾的資源推送到倉庫上(注:d=deploy)
$ hexo g$ hexo d執行上述兩條命令后,在瀏覽器輸入 yourname.github.io 即可看見(jiàn)自己的博客頁(yè)面。
注:hexo clean 用于清除緩存 db.json 和 public 文件,在刪改文章后需要先清除緩存。
到這里,你就成功利用 Hexo+GitHub 搭建了你的個(gè)人博客并發(fā)布了第一篇博文。
第三步和第四步是對頁(yè)面主題的更改以及關(guān)聯(lián)個(gè)性化域名(需要花錢(qián)購買(mǎi)),如無(wú)需要,可以不用往后看了。
你現在已經(jīng)可以在網(wǎng)站上發(fā)布你的文章,并給你的朋友甩過(guò)去博客鏈接了,試試吧!
默認的主題不太好看,推薦點(diǎn)贊最高的 next 主題。
1.在博客根目錄 myBlog 下執行:
git clone https://github.com/iissnan/hexo-theme-next themes/next2.執行
cp themes/landscape/source/CNAME themes/next/source把 CNAME 文件拷貝過(guò)來(lái)。然后將博客根目錄下的 _config.yml 下的 theme 的名稱(chēng) landscape 修改為 next 即可。
3.執行
$ hexo clean$ hexo g$ hexo s到這里,就可以看到 next 主題效果了!
1.獲取域名
福利時(shí)刻:GitHub Education 有一個(gè)面向學(xué)生的教育包,擁有學(xué)生郵箱和學(xué)生證即可申請注冊。申請成功后可以在這個(gè)學(xué)生包里面找到 NameCheap 網(wǎng)站提供的以.me結尾的頂級域名,可以免費使用一年?。ㄈ绻麤](méi)有學(xué)生郵箱可以直接在 NameCheap 等域名網(wǎng)站購買(mǎi)域名。)
拿到 GitHub 的免費包之后,打開(kāi)免費包找到 NameCheap 那一項,點(diǎn)擊綁定 NameCheap 和申請教育包的 GitHub 賬號,之后去 NameCheap 用該郵箱注冊然后就可以免費領(lǐng)取你的域名啦!
領(lǐng)取域名過(guò)程中,會(huì )遇到一個(gè)三選一的選項。大致意思是選擇將該域名綁定 GitHub Pages 或者“一個(gè)圖片類(lèi)型網(wǎng)頁(yè)”或者是“Ghost 建立的網(wǎng)站”。我當時(shí)選擇的是 GitHub Pages,這也為后來(lái)將域名綁定到我搭建博客的 GitHub 倉庫埋下了一個(gè)坑。之后細說(shuō)。
2.解析域名
(1)獲取域名后,點(diǎn)擊 MANAGE 進(jìn)行管理,之后點(diǎn)擊 Advanced DNS 解析域名到 yourname.github.io。點(diǎn)擊 ADD NEW RECORD 添加如下三條記錄即可。
如果之前領(lǐng)取域名時(shí)選擇了綁定 GitHub Pages 那么前兩條記錄應該都已經(jīng)有了,添加第三條記錄即可。注意將網(wǎng)址換成你的 yourname.github.io
注:192.30.252.153/192.30.252.154 是 GitHub 的服務(wù)器地址
(2)登錄 GitHub,進(jìn)入之前創(chuàng )建的倉庫,點(diǎn)擊 settings,設置 Custom domain,輸入你的域名(圖中域名為我搭建博客時(shí)參考過(guò)的博客文章地址)。
注:由于之前領(lǐng)取域名時(shí),我選擇了將該域名綁定 GitHub Pages,如果你也是這么選擇的,此時(shí)你的域名已經(jīng)綁定了一個(gè) GitHub Pages 頁(yè)面,所以你需要先登錄用學(xué)生郵箱注冊的 GitHub 賬號,在倉庫中找到一個(gè) CNAME 的文件刪除,之后才能進(jìn)行第二步操作,否則會(huì )提示你已經(jīng)綁定了 GitHub Pages。
(3)進(jìn)入本地博客文件夾 ,在 myBlog/source 目錄下,創(chuàng )建一個(gè)記事本文件,輸入你的域名。
只要寫(xiě)進(jìn)你自己的域名即可。如果帶有 www,那么以后訪(fǎng)問(wèn)的時(shí)候必須帶有 www 完整的域名才可以訪(fǎng)問(wèn),但如果不帶有 www,以后訪(fǎng)問(wèn)的時(shí)候帶不帶 www 都可以訪(fǎng)問(wèn)。
建議不要輸入帶有 www 的域名。
到這里,就完成了綁定域名,去瀏覽器輸入你的域名試試吧?。?/strong>搭建好了歡迎在文末留下你的博客地址哦!)■
開(kāi)智學(xué)堂主編,阿知編輯
未來(lái)已來(lái),只是分布不均
入門(mén)信息分析 打破信息迷局
聯(lián)系客服