Hexo+Github/Coding免費搭建個人博客網站
體驗更優排版請移步原文:http://vblog.win/blogs/other/hexo-github-build-blog.html
很早之前就想搭建一個屬於自己的博客網站,一方面是給自己做筆記,把平時遇到的問題和解決問題的方式方法記錄下來,順便提升自己的表達能力、總結能力;另一方面,個人博客就像是自己在網絡世界中的一個小家,一個完全屬於自己的空間,你可以在這裏盡情發揮,別人可以通過它來了解你。前段時間偶然間發現了Hexo,看了兩天官方文檔,參考網上教程,搭建了自己的個人網站:http://vblog.win/ 歡迎訪問!搭建完畢在此記錄一下搭建過程。
1. 環境準備
1.1 node.js安裝和準備
在node.js官網 http://nodejs.cn/download/ 下載對應安裝文件,保持默認設置,一路next,安裝結束。
打開命令提示符,輸入node -v
,npm -v
輸出當前版本號說明node環境搭建完成。
1.2 git安裝和準備
在Git官網 https://git-scm.com/downloads (如未FQ下載過慢可參考地址)下載對應安裝文件,保持默認設置一路next也沒毛病,這裏一點提醒,Git出於安全考慮,只能在Git Bash
中進行Git有關的命令操作,如果想要在命令提示符中使用Git命令,在安裝過程中調整PATH環境一步需勾選第二項,這樣Git安裝程序會在系統PATH中設置Git路徑,以便於我們在命令提示符中直接使用Git命令(盡管可以這樣設置,但還是建議都在Git
Bash中輸入命令)。
打開命令提示符,輸入git --version
輸出當前版本號說明Git環境搭建完成。
2. Github賬戶配置
2.1 創建倉庫
相信很多coder都有自己的GitHub賬號(沒有的話去註冊一下),利用GitHub建立自己的博客首先需要創建一個username.github.io
的倉庫,這裏的username
必須是你的用戶名(不是昵稱),之後你的個人博客地址就是 http://username.github.io 了。
2.2 代碼庫設置
接下來,在新建立好的倉庫主頁點擊菜單欄Settings,找到下方GitHub Pages開啟該功能,選擇一個主題並提交更改,幾分鐘後打開 http://username.github.io 你就可以訪問自己的博客主頁了。
2.3 配置SSH key
因為我們的博客內容托管於GitHub,因此提交代碼需要提供權限給本地,這裏使用SSH key相對來說要安全一些,輸入命令:
1 | ssh-keygen -t rsa -C "註冊郵箱" |
之後會提示輸入一個密碼,這個密碼在提交代碼時使用,這裏也可以直接回車,密碼置空。最終會在用戶目錄下生成.ssh
文件夾,進入文件夾找到id_rsa.pub
文件並打開,復制內容並打開 https://github.com/settings/keys 新建SSH key,title自己命名,把剛剛復制的內容粘貼到key處保存,設置完畢。
測試配置是否成功:
1 | ssh -T [email protected] |
Hi wangqingkai! You’ve successfully authenticated, but GitHub does not provide shell access.
看到如上信息則說明SSH key配置成功。
2.4 配置Git個人信息
1 2 | git config --global user.name "username" // github用戶名,不是昵稱 git config --global user.email "[email protected]" // github註冊郵箱 |
3. Hexo安裝與配置
Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。還是推薦花時間看下官方文檔:https://hexo.io/zh-cn/docs/
3.1 Hexo安裝
新建一個用於存放個人博客源文件的文件夾,進入文件夾開始安裝Hexo,由於npm下載一些包在國內會非常慢,這裏推薦使用淘寶鏡像,右擊Git Bash
輸入以下命令等待安裝:
1 | npm install -g cnpm --registry=https://registry.npm.taobao.org |
安裝完成之後基本所有命令中的npm
都可以用cnpm
替代。輸入命令:
1 | cnpm install -g hexo |
Hexo安裝完成之後緊接著開始初始化,輸入命令:
1 2 | hexo init // hexo初始化 hexo g // 生成網站源文件 |
生成之後的目錄結構應該是這樣的,
1 | hexo s // 啟動本地測試服務 |
服務啟好之後瀏覽器打開 http://localhost:4000 ,如果可以正常訪問,說明我們本地博客已經搭建起來了。Ctrl+C關閉測試服務。
3.2 Hexo配置
3.2.1 Hexo主題配置
因為默認主題達不到我們的要求,首先對Hexo主題進行配置,這裏是Hexo官方主題。我們用比較受大眾喜愛的yilia
主題為例,在博客根目錄輸入命令:
1 | git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia |
之後修改博客根目錄下_config.yml
文件中主題配置為:theme: yilia
。
1 2 | hexo clean // clean刪除public文件夾 hexo s -g // 生成網站源文件並啟動測試服務(合並命令) |
刷新 http://localhost:4000 是不是發現高端大氣上檔次了一些!至於頭像、title、菜單等的配置,仔細讀一下官方文檔,研究一下配置文件(主要有兩個_config.yml
,一個在博客根目錄下,另一個在themes下對應的主題文件夾下),相信這些都難不倒你。
3.2.2 Deployment配置
這個很關鍵,因為博客搭建好了,你不可能讓它一直在本地運行,需要把它托管到GitHub或者Coding上,別人才可以訪問,因此需要配置Deployment。全局配置文件_config.yml
中找到Deployment,配置如下代碼:
1 2 3 4 5 | deploy: type: git repo: github: [email protected]:username/username.github.io.git,master coding: [email protected]:username/username.git,master |
我這裏同時托管到GitHub和Coding,單獨托管到GitHub也可以,把另外一條配置去掉就好。不過這樣配置提交的時候一般會報錯ERROR Deployer not found: git
,不要慌,安裝一個插件:
1 | cnpm install hexo-deployer-git --save |
3.2.3 Hexo部署到Git
1 2 | hexo clean hexo d -g // 生成網站源文件並部署到Git(合並命令) |
現在到瀏覽器裏訪問一下 http://vueker.github.io 驚不驚喜,意不意外!這裏是我的測試博客,歡迎訪問 http://vblog.win/ 查看效果,與我交流。
4. 如何寫博客
4.1 使用命令創建博客
cd到博客根目錄,輸入命令:
1 | hexo new ‘hello-first-blog‘ |
這樣,Hexo會幫我們在\source\_posts
下新建md文件,打開該文件即可使用Markdown語法開始寫博客。
4.2 手動新建md文件
當然,我們也可以在\source\_posts
目錄下新建md文件直接進行編輯,需要註意的是md文件的命名一般采用英文,文件內title名為中文即可。推薦作業部落在線編輯器。
5. 後記
Hexo + Github搭建靜態博客的確很方便,上手也不難,而且靜態博客訪問速度快,易於維護,很重要的一點它是完全免費的。目前還可以采用很多第三方系統進行擴展服務,只要你想,幾乎都可以做到。在此記錄下自己搭建博客的點滴,希望可以和廣大coder一起交流,共同進步,歡迎訪問主頁。
Hexo+Github/Coding免費搭建個人博客網站