這個博客(https://emadons.github.io/)也是我之前閒無聊的時候然後花了3天時間去搭建的,至於說為什麼想要搭建這個博客,其實是想通過一個網絡平臺來記錄一下自己學習的技術,當然也有一個不可忽視的事實,就是讀計算機專業的人不搞個博客玩玩都不好意思說是讀計算機的了(哈哈..)恩..好了,切換到今天的正題,來說一下如何利用Hexo+Github來免費搭建個人博客。
前排提醒:搭建博客的過程中除了需要hexo和github之外,我們還需要搭建 Node.js 和Git 環境
什麼是hexo?
Hexo是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
什麼是github?
gitHub是一個面向開源及私有軟件項目的託管平臺,因為只支持git 作為唯一的版本庫格式進行託管,故名gitHub。
一、github的註冊與配置
註冊
如果你已有github賬號,那麼請記住你的username,接下來要用到你的username來確定你所使用的域名。當然,如果你沒有github賬戶的話也不用著急,花個兩三分鐘的時間去註冊一個就好了。
github註冊網址:https://github.com/
打開註冊頁面,輸入你的用戶名,註冊郵箱以及密碼即可註冊,但前提記的在你的註冊郵箱中確認註冊驗證,不然無法使用github哦。
配置
註冊成功並進入主頁面後,點擊右上角的“+”號按鈕,選擇New repository,進入代碼庫創建頁面:
在Repository name下填寫yourname.github.io,Description (optional)下填寫一些簡單的描述(不寫也沒有關係),如圖所示:
注意:圖片中的yourname指的是你的username,比如我的username叫emadons,那麼我的Repository name中就填emadons.github.io就可以了,以後通過https://emadons.github.io就可以登錄自己的博客了。
點擊“Create repository”後出現下面界面就可以了。
二、安裝Node.js和Git環境
Node.js的介紹與安裝
Node.js是一個Javascript運行環境(runtime),是一個基於Chrome JavaScript運行時建立的平臺, 用於方便地搭建響應速度快、易於擴展的網絡應用。Node.js 使用事件驅動, 非阻塞I/O 模型而得以輕量和高效,非常適合在分佈式設備上運行數據密集型的實時應用。
Node中文官網:https://nodejs.org/zh-cn/
在官網上下載所需版本進行安裝即可。具體安裝教程可以在網上搜。
Git的介紹與安裝
Git是一款免費、開源的分佈式版本控制系統,用於敏捷高效地處理任何或小或大的項目。
安裝Git用途其實也就是把本地的Hexo內容(既靜態的Web網站)提交到github或者Coding net等其他的代碼託管站點上。
Git官網:https://git-scm.com/downloads
由於國內直接從官網下載比較困難,需要翻牆。所以這裡推薦使用waylau提供的下載地址:https://github.com/waylau/git-for-win
下載安裝完成後,桌面右鍵,打開 Git Bush Here,輸入 git --version,出現版本號則說明 Git 環境配置成功。
在開始菜單裡找到“Git”->“Git Bash”,輸入以下命令
git config --global user.name "yourname"
git config --global user.email "youremail"
注意:yourname和youremail請替換成你github上的用戶名和註冊郵箱
三、安裝配置 Hexo
安裝 Hexo。所有必備的應用程序安裝完成後,即可使用 npm 安裝 Hexo。
在命令行中輸入$ npm install -g hexo-cli
本人使用的是cmder,挺好用的,界面看起來也比較舒服。
這樣我們Hexo也已經安裝成功了。
到了這裡,該安裝的基本都安裝好了。
四、建立Hexo站點
在電腦F盤(自己隨意)目錄下新建文件夾 test,進入test之後,點擊鼠標右鍵,點擊“Cmder Here”(由於本人已安裝了cmder,沒有安裝的點擊“在此處打開命令窗口”),進入到該路徑的命令行窗口界面,輸入:
hexo init blog
稍微等待下,成功提示
INFO Start blogging with Hexo!
恭喜你,你的Hexo站點已經建成完畢。
因為你初始化hexo 之後source目錄下自帶一篇hello world文章, 所以依次執行下方命令:
這時候我們在瀏覽器中打開http://localhost:4000/ ,你將會看到:
五、與github建立聯繫
我們如何讓本地git項目與遠程的github建立聯繫呢?用 SSH keys
生成SSH keys
輸入你自己的郵箱地址
ssh-keygen -t rsa -C "youremail"
在回車中會提示你輸入一個密碼,這個密碼會在你提交項目時使用,如果為空的話提交項目時則不用輸入,我們按回車不設置密碼。一路Enter過來就好,得到信息:
Your public key has been saved in /c/Users/user/.ssh/id_rsa.pub.
添加 SSH Key 到 GitHub
打開 C:\\Users\\\\user.ssh\\id_rsa.pub,此文件裡面內容為剛才生成的密鑰,準確的複製這個文件裡的內容,粘貼到 https://github.com/settings/ssh的 new SSH key 中。
測試是否添加成功
可以輸入下面的命令,看看設置是否成功,[email protected]的部分不要修改:
ssh -T [email protected]
如果出現類似下面的反饋:
The authenticity of host ‘github.com (207.97.227.239)’ can’t be established.RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.Are you sure you want to continue connecting (yes/no)?
不用管,咱們直接輸入yes就可以了,然後會看到:
Hi emadons! You’ve successfully authenticated, but GitHub does not provide shell access.
六、配置博客
前排特別提醒:參數冒號後面記得空一格!
在blog目錄下(即剛才建的Hexo站點目錄下),打開_config.yml文件,修改參數信息
###修改網站相關信息
註解:
title—博客名
subtitle–博客副標題
description–網頁描述
keywords–關鍵字
author–作者
language–語言
timezone–時區
###配置部署(repo注意修改成自己的)
七、發表文章
在cmder中輸入並顯示
$ hexo new “emadons的第一篇博客文章”INFO Created: F:\\test\\blog\\source_posts\\emadons的第一篇博客文章.md
然後在該路徑下找到emadons的第一篇博客文章.md文件,用編輯器打開,使用markdown語法進行編輯,如下圖:
保存,然後依次執行下列步驟:
這時候,通過打開http://localhost:4000,可以發現剛剛的文章已經上傳到本地上了。
八、本地文件提交到GitHub
即使現在我們已經可以在本地上瀏覽到我們的博客了,但別人還不能瀏覽到我們剛剛發的博客,因為我們並還沒有將文件上傳到github上面,所以我們還要進行一步操作。這一步操作只需簡單輸入以下命令即可:
// 刪除舊的 public 文件hexo clean// 生成新的 public 文件hexo generate或者hexo g// 開始部署hexo deploye或者hexo d
如果沒有錯誤產生,此時你本地的代碼就已經上傳到了Github中。
如果在執行 hexo deploy 後,出現 error deployer not found:github的錯誤,執行:
npm install hexo-deployer-git --save
出錯也是正常的,咱們只要動動手指上網查一查就能夠解決我們遇到的問題,所以也不用著急。
九、關聯 Hexo 與 GitHub Pages
代碼庫正確創建之後,並且已經將代碼上傳到了Github中,此時你將會看到如下界面:
接下來開啟Github pages功能,點擊界面右側的Settings,你將會打開這個庫的setting頁面,向下拖動,直到看見GitHub Pages,如圖:
在紅框中選擇已經上傳的master branch代碼。
保存之後,此時直接訪問你之前創建New repository時所填的信息:yourname.github.io,就可以看到你的博客信息了,到了這一步,恭喜你,你的博客已經搭建完畢啦,別人也能夠通過你的域名來直接訪問你的博客,是不是很棒。。
當然,如果你想要讓你的博客外觀看起來更漂亮些,你也可以自己弄個主題或者在網上找個博客主題裝飾一下,那就更棒了。下面是一些博客主題下載地址與教程,喜歡的童鞋可以進去看看。
https://github.com/litten/hexo-theme-yilia
https://github.com/iissnan/hexo-theme-next
閱讀更多 盒子匠 的文章