Hexo+GitHub Pages搭建簡潔優(yōu)雅的個人博客

大家好纠永,我是 Day腹侣。上周突然意識到個人博客的重要性,不僅是寫技術相關撤奸、興趣相關亦或是簡單的碎碎念吠昭,有一個博客對于給簡歷增加亮點喊括,引發(fā)自己思考甚至是提升表達能力都有很大的作用。大家通常都說網上寫博客有三個階段:

第一階段矢棚,剛接觸 Blog郑什,覺得很新鮮,試著選擇一個免費空間來寫蒲肋。

第二階段蘑拯,發(fā)現免費空間限制太多,就自己購買域名和空間兜粘,搭建獨立博客申窘。

第三階段,覺得獨立博客的管理太麻煩妹沙,最好在保留控制權的前提下偶洋,讓別人來管,自己只負責寫文章距糖。

本文的目標是使用 Hexo 搭建一個自己的博客玄窝,并配上非常優(yōu)雅的 NexT 主題,并把博客托管到 GitHub 上悍引,實現傳說中的第三階段恩脂。


幾個概念

1. 什么是 Hexo,什么是 NexT 主題趣斤?
Hexo 是一個基于 Node.js 的靜態(tài)站點生成框架俩块,快速、簡潔且高效浓领。Hexo 主要使用 Markdown 解析文章玉凯,在幾秒內,即可利用靚麗的主題生成靜態(tài)網頁联贩。NexT 是其一個非常簡潔優(yōu)雅的主題漫仆。

2. 什么是 Markdown?
Markdown 用過一些簡單的標記泪幌,讓你的文字實現精致的排版盲厌,實現易讀易寫,無需考慮美化祸泪,專注文字本身吗浩。

3. 什么是 GitHub ?
GitHub 是基于 Git 技術的社交編程及代碼托管網站。你可以用它對你的項目進行版本控制没隘,也可以瀏覽學習懂扼、參與開發(fā)別人的開源項目,甚至可以交友右蒲。

4. 如何把這些名詞串聯起來阀湿?

  • 安裝必要的軟件后屡限,使用 Hexo 創(chuàng)建你的本地博客,生成靜態(tài)頁面炕倘;
  • 將靜態(tài)頁面托管到 GitHub 上钧大,這樣別人就可以通過公開網址訪問你的博客了;
  • 下載 NexT 主題美化你的博客樣式罩旋。

使用 Hexo 創(chuàng)建本地博客

安裝 Git

  • Windows:下載后一路安裝 git-for-windows(國內下載點).
  • Mac:使用 Homebrew, MacPorts
    $ brew install git
    或下載 安裝程序 安裝啊央。
  • Linux (Ubuntu, Debian):
    $ sudo apt-get install git-core
  • Linux (Fedora, Red Hat, CentOS):
    $ sudo yum install git-core

安裝 Node.js

  • Mac / Linux:使用 curl 或 wget 下載安裝
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

重啟終端并執(zhí)行下列命令: $ nvm install stable

  • Windows:下載后一路安裝 Node.js

安裝 Hexo

先創(chuàng)建自己博客文件夾,比如 D:/hexo涨醋。
$ cd your-hexo-site # 切換到你的本地博客文件夾
(Windows 用戶直接在該文件夾下右鍵打開 Git Bash Here)
$ npm install -g hexo-cli

初始化自己的博客靜態(tài)網站

$ hexo init  # 生成一些必要的初始文件
$ npm install  # 安裝依賴包
$ npm install hexo-deployer-git --save  # 為了可以將網站部署到 GitHub 上
$ hexo g  # 生成靜態(tài)頁面
$ hexo s  # 打開測試服務器

瀏覽器打開網址:http://localhost:4000/瓜饥,這就是最初的樣子。


配置 GitHub

  1. GitHub 官網 注冊一個賬號浴骂,記得注冊郵箱和用戶名乓土,建議用戶名和郵箱的用戶名一樣,建議此時學習一些 Git 和 GitHub 的基本知識溯警。

  2. 本地打開命令行或 Git Bash趣苏,配置本地需要連接的賬號:

$ git config --global user.name "yourname"  # 設置用戶名
$ git config --global user.email "your_email@youremail.com  # 設置郵箱"
  1. 配置 SSH,建立本地與 GitHub 賬號之間的連接密鑰:
$ ssh-keygen -t rsa -C your_email@youremail.com`
  1. 網頁登錄GitHub梯轻,點擊頭像 - Settings - SSH and GPG keys - New SSH key 上食磕。p.s. Mac / Linux 下密鑰在 ~/.ssh/id_rsa.pub;Windows下密鑰在 C:\Users\用戶名.ssh\id_rsa.pub

  2. 驗證是否成功:
    $ ssh -T git@github.com

  3. GitHub 上新建倉庫喳挑,命名為 {your_name}.github.io彬伦,其中{your_name} 必須與你的用戶名一樣,這是 GitHub Pages 的特殊命名規(guī)范伊诵。倉庫的 Settings 里单绑,下拉到 GitHub Pages 里,點擊 source 中 None 曹宴,修改其為 master 分支搂橙,也就是作為部署 GitHub Pages 的分支,然后點擊 save浙炼。


配置份氧、美化本地博客

安裝 NexT 主題

  $ cd your-hexo-site # 切換到你的本地博客文件夾
  $ git clone https://github.com/iissnan/hexo-theme-next themes/next

配置站點_config.yml文件

以 D:/hexo 為例唯袄,【站點_config.yml】 即為 D:/hexo/_config.yml弯屈,如果你的 Windows 電腦里沒有代碼文本編輯器的話,這個后綴的文本應該是打不開的恋拷,我使用的是 Atom 編輯器资厉,你也可以使用 notepad++,VS code等蔬顾,其他操作系統(tǒng)默認都有 vi 之類的編輯器可以打開宴偿。

  • 找到 language 字段:可修改值為 zh-CN
  • 找到 theme 字段湘捎,修改其值為 next
  • 找到最后 deploy 字段,修改如下:
type: git
repository: https://github.com/{your_name}/{your_name}.github.io
branch: master

部署到 GitHub

$ hexo clean  # 刪除原來的靜態(tài)頁面
$ hexo g  # generate 生成新的靜態(tài)頁面
$ hexo d  # deploy 將頁面部署到 GitHub 上

訪問 https://{your_name}.github.io 就可以看到你的博客網站了窄刘!
一般部署之后需要等待一段時間博客網站才會刷新窥妇,如果你想一邊配置一邊看效果,可以再打開一個 Git Bash娩践,輸入$ hexo s # 打開本地測試服務器活翩,瀏覽器打開localhost:4000 即時查看變化。


自定義配置、寫文章

  1. 可根據 Hexo 文檔NexT 文檔,自由配置创淡,主要要注意兩個文件不皆,站點配置文件 (D:/hexo/_config.yml) 和主題配置文件(D:/hexo/thems/next/_config.ym) 。

  2. 寫文章的一般流程:
    $ hexo new post <title> # 在source_posts下生成 post 布局的<title>.md 文檔
    使用支持 Markdown 的編輯器打開寫文章
    文章寫完后代赁,執(zhí)行

$ hexo clean
$ hexo g
$ hexo d

發(fā)布更新到 GitHub Pages。

推薦閱讀我的下一篇文章:Hexo+NexT優(yōu)化部署、個性化配置旦事、美化全攻略

卓別林睡覺.jpg
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市急灭,隨后出現的幾起案子族檬,更是在濱河造成了極大的恐慌,老刑警劉巖化戳,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件单料,死亡現場離奇詭異,居然都是意外死亡点楼,警方通過查閱死者的電腦和手機扫尖,發(fā)現死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來掠廓,“玉大人换怖,你說我怎么就攤上這事◇扒疲” “怎么了沉颂?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長悦污。 經常有香客問我铸屉,道長,這世上最難降的妖魔是什么切端? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任彻坛,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘昌屉。我一直安慰自己钙蒙,他們只是感情好,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布间驮。 她就那樣靜靜地躺著躬厌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪竞帽。 梳的紋絲不亂的頭發(fā)上烤咧,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機與錄音抢呆,去河邊找鬼煮嫌。 笑死,一個胖子當著我的面吹牛抱虐,可吹牛的內容都是我干的昌阿。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼恳邀,長吁一口氣:“原來是場噩夢啊……” “哼懦冰!你這毒婦竟也來了?” 一聲冷哼從身側響起谣沸,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤刷钢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后乳附,有當地人在樹林里發(fā)現了一具尸體内地,經...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年赋除,在試婚紗的時候發(fā)現自己被綠了阱缓。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡举农,死狀恐怖荆针,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情颁糟,我是刑警寧澤航背,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站棱貌,受9級特大地震影響玖媚,放射性物質發(fā)生泄漏。R本人自食惡果不足惜键畴,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一最盅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧起惕,春花似錦涡贱、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至嘀粱,卻和暖如春激挪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背锋叨。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工垄分, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人娃磺。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓薄湿,卻偏偏與公主長得像,于是被迫代替她去往敵國和親偷卧。 傳聞我的和親對象是個殘疾皇子豺瘤,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內容