hexo+github搭建靜態部落格之初體驗

LIJING0906發表於2018-07-23
原文網址 : https://juejin.im/post/5b55a3bc6fb9a04fa8672ed4
HexoGithub

此文首發於lijing0906.github.io
終於把hexo靜態部落格搭好了，但這還只是第一步，革命尚未成功，妹子仍需努力呀！
第一篇部落格那當然要寫寫我是怎麼搭建這個部落格的，為了篇幅小一些，這篇只講簡單的搭建和部署到gitHub上。
下面進入正題：
看看移動端效果吧，下圖是我修改了主題、寫了兩篇測試文章之後的效果：

移動端首頁效果

準備工作

想必看到這篇文章的你一定也是程式碼的搬運工，準備工作以及一些命令或術語就不多贅述

github & gitbash

  • 要用github搭建靜態部落格，當然首先得官網註冊一個github賬號，然後建立一個遠端庫，命名規則：YOUR_gitHub_NAME.github.io
  • 接著去官網下載對應系統的gitbash客戶端，用於上傳程式碼等

node

因為需要通過npm安裝hexo的安裝包、依賴包及外掛等，所以需要去官網下載對應系統的node安裝包，這個安裝包包含了npm包管理工具，然後就可以使用npm命令下載相關包或外掛

開工搭建

現在開工，做部落格。以下的所有命令，可以在DOS視窗下敲，也可以用gitbash。

安裝hexo

    $ npm install -g hexo #全域性安裝hexo安裝包
複製程式碼

初始化hexo專案

    $ hexo init *FLOD_NAME*  #FLOD_NAME是你初始化hexo的專案名字
複製程式碼

先進入非中文目錄（像我是進入E盤的hexoStudy資料夾下）再執行這句命令，初始化一個名為“BLOG”的專案。

初始化

安裝依賴包

    $ cd BLOG #進入專案目錄
    $ npm install #安裝依賴包(npm i也可以，你懂的)
複製程式碼

hexo+github搭建靜態部落格之初體驗

生成檔案&啟動服務

    $ hexo generate #編譯,生成靜態檔案,也就是public資料夾的東西(hexo g也可以)
    $ hexo sever #開啟本地服務(hexo s也可以)
    #以上兩行命令可以合併成一行：hexo s -g
複製程式碼

hexo+github搭建靜態部落格之初體驗

本地訪問

hexo+github搭建靜態部落格之初體驗

部署到gitHub，讓所有人看到

前面的步驟只是實現了本地訪問，想要讓所有人都看到還需要把部落格部署到gitHub上。

安裝hexo關於git的管理元件

    $ npm install hexo-deployer-git --save #回到專案根目錄安裝
複製程式碼

hexo+github搭建靜態部落格之初體驗

修改配置檔案

修改專案根目錄下的_config.yml檔案的deploy屬性

hexo+github搭建靜態部落格之初體驗

部署到gitHub，網址訪問部落格

    $ hexo deploy #部署到gitHub(hexo d也可以)
複製程式碼

hexo+github搭建靜態部落格之初體驗
看到“Deploy done: git”就說明完成了，不確定可以再去gitHub上的倉庫看看 位址列輸入：YOUR_gitHub_NAME.github.io就可以訪問了，炒雞簡單有木有

最後的最後

  • gitHub上只能部署靜態部落格(大家都懂的)
  • 仔細看gitHub上我們的這個專案的檔案是和本地不一樣的，如果想在多臺電腦上編輯管理這個專案，有兩種方法可以借鑑：
    1. 再建一個倉庫上傳原生程式碼，在別的電腦上拉取程式碼(個人傾向這種方法)
    2. 遠端倉庫拉個分支(請自行百度)
  • 初體驗到此就結束了，後面再講更換主題和寫文章
    hexo+github搭建靜態部落格之初體驗

相關文章