GitHub Pages + Hexo 搭建個人博客超詳細教程


工具

  • Git Account
  • Hexo
  • Typora

搭建框架

  • GitHub Pages

    GitHub Pages是什么:簡單來說,GitHub Page是為GitHub Repository服務的,是為了更簡明易懂的展示你在Github上所作的projects的網(wǎng)頁,就如GitHub Pages官網(wǎng)所說--“Websites for you and your projects.”

    可能很多人還是不理解為什么要有GitHub Pages這樣的一個東西...舉個例子來說,你是一個新手,當你瀏覽Github上某一個大牛的代碼時,你看到的是一大堆源碼,你肯定沒有心情深入的看下去(反正我最開始就是這樣??),那么GitHub Pages就可以允許用戶自定義項目首頁,用來替換默認的源碼列表~因此小白你就可以看的更明白啦~

    一句話來說就是,GitHub Pages可以被認為是用戶編寫的、托管在Github上的靜態(tài)網(wǎng)頁。

  • Hexo

    為什么我們可以用Hexo?因為Github允許通過Github提供的模版站內(nèi)生成網(wǎng)頁,但是也允許用戶自己編寫網(wǎng)頁然后上傳,但這種上傳并不一定是簡單的上傳,也可以通過Hexo、Jekyll等靜態(tài)站點生成器的再處理

  • 此框架的優(yōu)缺點:

    優(yōu)點:

    1. 免費+無限流量

    2. 享受git的版本管理功能

    3. 你只要用自己喜歡的編輯器寫作即可,其他事情都一概由Github處理

    缺點:

    1. 有一定技術(shù)門檻,你必須懂git和網(wǎng)頁開發(fā)
    2. 它生成的是靜態(tài)網(wǎng)站,添加動態(tài)功能必須使用外部服務
    3. 不適合大型網(wǎng)站,因為沒有用到數(shù)據(jù)庫

    --綜合來看,它不失為搭建中小型Blog或項目主頁的最佳選項之一

    ?
    <u>總結(jié):你接下去要搭建的個人博客將是一個基于Hexo,托管在GitHub,寫作用MarkDown的超高效率工具??</u>

    ?

搭建步驟

  1. 使用GitHub Pages建站

    請按照官網(wǎng)首頁的教程來進行設置,只需操作官網(wǎng)教程的前兩步,也就是創(chuàng)建倉庫和克隆倉庫到本地

    • 創(chuàng)建倉庫:新建的倉庫的username.github.iousername一定與自己account的username一致
    • 克隆倉庫:目的是為了讓自己未來的博客和代碼處在git管理之下,所以我們要把剛剛在Github上博客項目拉到本地,代碼如下
    $ git clone https://github.com/username/username.github.io
    

    請自行替換你的username)

  2. 安裝Hexo

    安裝Hexo的步驟:

    1. 安裝Git

    2. 安裝Node.js,需要先安裝nvm(Node.js版本管理器)

      官網(wǎng)教程在這里,但是官網(wǎng)通過curl安裝nvm的命令已經(jīng)失效,下面我介紹一下用Homebrew進行安裝的方式:

      # 通過Homebrew安裝nvm
      $ brew install nvm
      
      # 創(chuàng)建nvm的工作目錄,為了可以讓你直接在shell使用nvm指令
      $ mkdir ~/.nvm
      
      $ vi ~/.bash_profile
      # 在.bash_profile文件里添加以下兩行
      # export NVM_DIR=~/.nvm
      # . $(brew --prefix nvm)/nvm.sh
      
      # source .bash_profile
      $ . ~/.bash_profile
      
      # 驗證nvm是否已經(jīng)安裝
      $ nvm help
      
      # 因為我們是通過homebrew安裝的,所以不需要像官網(wǎng)說的要重啟terminal,執(zhí)行以下命令來安裝Node.js
      $ nvm install stable
      
    3. 安裝Hexo

      $ npm install -g hexo-cli
      
  3. 編寫博客,發(fā)布

    1. 創(chuàng)建博客

      $ hexo init username.github.io
      # 在從git克隆到本地的倉庫的目錄下初始化hexo,在我的電腦里就是cd ~
      
    2. 更改配置

      $ cd username.github.io
      $ git clone https://github.com/iissnan/hexo-theme-next themes/next
      

      這里安裝的是主題Next(官方文檔在這更多主題

      1. 進入username.github.io/_config.yml修改基礎配置:(請確保每個字段都縮進一個空格,因為YAML依靠縮進來確定元素間的從屬關系)
      title: Luke's Blog    //你博客的名字
      author: Luke  //你的名字
      language: zh-Hans    //語言 中文
      theme: next   //剛剛安裝的主題名稱
      deploy:
       type: git    //使用Git發(fā)布
       repo: git@github.com:username/username.github.io.git      
      

//剛剛在git創(chuàng)建的倉庫,這里使用ssh不需要輸入賬戶密碼(前提是配置好了Github的ssh),使用https需要輸入賬戶密碼,我已經(jīng)配置過了ssh,所以這里使用ssh
branch: master
```

   2. (optional)進入username.github.io/themes/next/`_config.yml`中修改主題配置文件(參見[官方文檔](http://theme-next.iissnan.com/getting-started.html#theme-settings))

3. Markdown寫文章

  將你寫的文章存到username.github.io/source/_posts的目錄下就OK了,Markdown編輯器推薦[Typora](https://typora.io/) - "Live Preview"

4. 在本地環(huán)境進行測試

   ```
   $ hexo s
   # 測試服務啟動,在瀏覽器中輸入http://localhost:4000進行訪問
   ```

5. 安裝[hexo-deployer-git](https://github.com/hexojs/hexo-deployer-git)自動部署發(fā)布工具

   ```
   $ npm install hexo-deployer-git --save
   ```

6. 發(fā)布

   ```
   $ hexo clean && hexo g && hexo d
   # hexo clean命令是為了清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)。

在某些情況(尤其是更換主題后),如果發(fā)現(xiàn)您對站點的更改無論如何也不生效,您可能需要運行該命令。

hexo g是為了生成靜態(tài)文件,hexo d用于部署網(wǎng)站。

   ```

   <u>***以后每次寫博客,只要重新進行三四五六步的操作就OK啦~***</u>
  1. 在瀏覽器中輸入https://username.github.io,驗收你的博客!

  2. 更多配置與插件,敬請期待??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

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