Hexo+GitHub Pages個人博客(1):搭建

對于喜歡折騰個人博客的人來說蝙搔,一個可玩性強(qiáng)的博客/博客平臺才是最適合自己的种吸±峄希可玩性包括自定義主題/功能毯欣,現(xiàn)有的通用型博客平臺在自定義這一塊上基本沒法滿足可玩性馒过,太專業(yè)的博客系統(tǒng)對于非專業(yè)型人才來說門檻又比較高,并且管理繁雜仪媒。因此這里推薦一種比較簡單的搭建個人博客方式:Hexo+GitHub Pages沉桌。

對于0技術(shù)基礎(chǔ)并且無心折騰的人或者是只專注文字方面的作者來說,本教程一般不適合你算吩,推薦使用通用型的博客平臺-「簡書

Hexo和GitHub Pages以及個人博客搭建的概念

Hexo 是一款快速/簡潔/高效的博客框架留凭,依賴于Node.js,擁有豐富的插件定制偎巢,并且支持一鍵發(fā)布到平臺蔼夜。它使用Markdown(或其他渲染引擎)解析文章,可以快速生成靜態(tài)網(wǎng)頁文件從而形成博客压昼。

GitHub Pages 是GitHub推出面向GitHub用戶的一個脫管靜態(tài)網(wǎng)頁的功能求冷,允許用戶在GitHub的服務(wù)器上上傳自己的靜態(tài)網(wǎng)頁文件并提供訪問瀏覽,以供用戶做說明文檔/博客等使用窍霞。

個人博客搭建匠题,一般可以拆解為三個步驟:你需要去選擇一個合適的博客系統(tǒng),把系統(tǒng)上傳部署到你所購買的服務(wù)器上但金,然后在服務(wù)器上設(shè)置好你購買的域名韭山。

這樣下來包含的時間成本(學(xué)習(xí)博客系統(tǒng)/服務(wù)器)以及金錢成本(購買服務(wù)器/域名)會比較高,而使用Hexo+GitHub Pages的方式去搭建博客冷溃,相當(dāng)于GitHub幫助你購買了域名和服務(wù)器钱磅,省去了這兩塊成本,Hexo的簡單上手性又減少了你學(xué)習(xí)博客系統(tǒng)的時間成本似枕。

環(huán)境與前期準(zhǔn)備

  1. 安裝Node.js
    Node.js官網(wǎng) 下載對應(yīng)平臺的版本盖淡,推薦選擇LTS穩(wěn)定版,安裝凿歼。
  2. 安裝Git
    Git官網(wǎng) 下載對應(yīng)平臺的版本褪迟,安裝冗恨。
  3. 安裝文本編輯器
    下載你喜歡的文本編輯器,方便后面的文本/代碼編輯味赃,代碼編輯器推薦Sublime TextVisual Code 派近,Markdown文本編輯器推薦 Typora ,安裝洁桌。
  4. GitHub帳號與Pages(有帳號以及pages的可跳過)
    注冊/登錄Github帳號渴丸,新建一個「倉庫(Repository)」,命名為「你的GitHub賬戶名.github.io」
  5. Markdown
    Markdown基本語法 入門另凌,學(xué)會md文檔寫作有助于博客發(fā)布

GitHub Pages的部署

  1. 打開Git谱轨,輸入GitHub的郵箱和用戶名:

    git config --global user.email "yourname@gmail.com"
    git config --global user.name "yourname"
    
  2. 生成公鑰:

    ssh-keygen -t rsa -C "yourname@gmail.com"
    
  3. 一路回車即可,公鑰默認(rèn)保存路徑會顯示出來

  4. 復(fù)制公鑰:

    復(fù)制git窗口中「The key fingerprint is:」下面的一行內(nèi)容

    SHA256:m9eyW063av9khxQbYP1dfbxWthzJIRV2wHAiWUragsM yourname@gmail.com
    
  5. 登錄你的GitHub主頁吠谢,添加SSH公鑰:「Settings」-「SSH and GPG keys」-「New SSH key」

  6. 粘貼剛剛復(fù)制的公鑰到「key」一欄中土童,在「title」一欄中填入對這個SSH公鑰的說明,確認(rèn)添加「Add SSH key」

  7. 完成以上步驟后工坊,可在Git窗口輸入以下代碼驗(yàn)證SSH key是否生效:

    ssh -T git@github.com
    

這里的SSH公鑰相當(dāng)于你電腦訪問你GitHub上博客的鑰匙献汗,添加了相應(yīng)的公鑰才能允許你向GitHub上部署/發(fā)布/修改你的博客

Hexo博客的初始化

以上各種環(huán)境以及前期了解準(zhǔn)備后,我們終于可以著手搭建博客啦:

  1. 選擇你想存放你的博客的電腦文件位置王污,在該文件夾右鍵罢吃,選擇「Git Bash Here」

  2. 安裝Hexo:
    在Git窗口中輸入以下代碼安裝Hexo:

    npm install -g hexo
    
  3. 初始化Hexo:
    在Git窗口中輸入以下代碼初始化Hexo:

    hexo init
    
  4. 生成博客靜態(tài)頁面:
    在Git窗口中輸入以下代碼生成靜態(tài)頁面:

    hexo server(或者h(yuǎn)exo s)
    
  5. 在瀏覽器輸入http://locahost:4000 即可訪問剛剛生成的博客,此時可以看到Hexo本身自動幫你生成的Hello World 文章

Hexo博客的上線部署

以上步驟完成后昭齐,你已經(jīng)得到了一個本地部署的博客尿招,那么接下來是如何將它發(fā)布到線上:

  1. 登錄你的GitHub主頁,點(diǎn)擊你之前以賬戶名新建的「yourname.github.io」阱驾,點(diǎn)擊「Clone or download」就谜,復(fù)制該項(xiàng)目的SSH key

  2. 打開你存放博客的文件位置,找到「_config.yml」文件里覆,使用文本/代碼編輯器打開編輯

  3. 找到deploy 參數(shù)丧荐,將剛剛復(fù)制的SSH key粘貼到repo后面,其余參數(shù)按以下設(shè)置喧枷,保存:

    deploy:  
    type: git 
    repo: ssh:git@github.com:Yourname/yourname.github.io.git
    branch: master
    
  4. 在博客文件位置右鍵虹统,選擇「Git Bash Here」,輸入「hexo deploy」或者「hexo d」

  5. 等上述步驟執(zhí)行完畢后割去,在瀏覽器輸入https://yourname.github.io 即可訪問剛剛部署上線的博客窟却,注意此處的yourname為你的github賬戶名稱

Hexo博客的文章發(fā)布

我們已經(jīng)將博客部署到GitHub線上了昼丑,不過顯示的文章只有內(nèi)置的一篇「Hello World」呻逆,如何才能換成我們自己的文章發(fā)布呢?

使用Git客戶端新建和發(fā)布:
  1. 打開Git客戶端菩帝,輸入:

    hexo new  "articleName"
    

    articleName為你新建文章的標(biāo)題

  2. 打開你的博客存放目錄咖城,新建的markdown格式的文章會放在「Source」-「_posts」下面

  3. 使用文本編輯器編輯剛剛你新建的文章

  4. 在Git窗口輸入hexo g 生成靜態(tài)文件茬腿,再輸入hexo d 發(fā)布到線上

使用文本編輯器新建再用Git發(fā)布:
  1. 使用文本編輯器新建以及編輯markdown格式的文章
  2. 將寫好的markdown格式的文章放到博客存放目錄下的「Source」-「_posts」下面
  3. 在Git窗口輸入hexo g 生成靜態(tài)文件,再輸入hexo d 發(fā)布到線上

完成文章發(fā)布之后宜雀,只需要瀏覽器打開你的博客地址切平,就可以看到剛剛發(fā)布的文章了

博客存放目錄下的「Source」-「_posts」下面存放的都是博客文章,你也可以直接在這里刪除你不需要的文章辐董,例如系統(tǒng)自動生成的「Hello World」文章

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末悴品,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子简烘,更是在濱河造成了極大的恐慌苔严,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件孤澎,死亡現(xiàn)場離奇詭異届氢,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)覆旭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門退子,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人型将,你說我怎么就攤上這事寂祥。” “怎么了七兜?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵壤靶,是天一觀的道長。 經(jīng)常有香客問我惊搏,道長贮乳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任恬惯,我火速辦了婚禮向拆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘酪耳。我一直安慰自己浓恳,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布碗暗。 她就那樣靜靜地躺著颈将,像睡著了一般。 火紅的嫁衣襯著肌膚如雪言疗。 梳的紋絲不亂的頭發(fā)上晴圾,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天,我揣著相機(jī)與錄音噪奄,去河邊找鬼死姚。 笑死人乓,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的都毒。 我是一名探鬼主播色罚,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼账劲!你這毒婦竟也來了戳护?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤瀑焦,失蹤者是張志新(化名)和其女友劉穎姑尺,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蝠猬,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡切蟋,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了榆芦。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片柄粹。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖匆绣,靈堂內(nèi)的尸體忽然破棺而出驻右,到底是詐尸還是另有隱情,我是刑警寧澤崎淳,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布堪夭,位于F島的核電站,受9級特大地震影響拣凹,放射性物質(zhì)發(fā)生泄漏森爽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一嚣镜、第九天 我趴在偏房一處隱蔽的房頂上張望爬迟。 院中可真熱鬧,春花似錦菊匿、人聲如沸付呕。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽徽职。三九已至,卻和暖如春佩厚,著一層夾襖步出監(jiān)牢的瞬間姆钉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留育韩,地道東北人。 一個月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓闺鲸,卻偏偏與公主長得像筋讨,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子摸恍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容