GitHub + Hexo 搭建個人博客 ———搭建

配置環境

  • mac OS
  • Git
  • Hexo 3.0+
  • Note.js
  • npm
  • GitHub賬號

這裏所有的操作流程都是在mac上做的,但是Windows也可以參考。

你需要知道的

在配置之前我想先把全部流程簡要敘述一下,以免在某個環節懵逼, 同時你幾乎可以按照如下的說明完成部分的準備工作:
1. 創建GitHub賬號,並創建一個項目,項目的名稱格式必須是:你的用戶名.github.io,這將會是你今後訪問博客的域名,不要妄想使用自己喜歡的名字。在創建項目的時候會讓你填寫或勾選一些東西,除項目名稱之外,其他默認就好。
2. 安裝Git -> 安裝Note.js -> 安裝Hexo (注意這裏的順序)。
3. 在本地創建文件夾:你的用戶名.github.io 接下來對博客所有的相關操作都是在這裏完成的,爲了方便描述,在後面我將稱這個文件夾爲博客文件。
4. 進入博客文件,初始化Hexo。
5. 將Hexo部署到你的GitHub。

接下來我們將直接從Hexo的安裝開始,其餘操作都可以輕鬆並準確的在百度得到答案。

開始Hexo的安裝

到了這裏你應該已經成功安裝了Git、Note.js,同時擁有了自己的GitHub賬號,並且按照上面的命名格式創建了一個項目。現在開始正式對Hexo進行配置了。

安裝Hexo

打開終端,進入root模式

su

安裝Hexo

npm install hexo-cli -g

命令執行完畢後執行

npm install --save

至此,Hexo已經安裝完畢。

初始化你的博客文件

進入到你的博客文件,記住,這個文件的名字要跟你GitHub上的項目名稱一樣。(其實這裏我不是太確定是不是要一樣……)

cd yourBlogFilePath

初始化Hexo目錄

hexo init

待命令執行完畢,你會發現你的目錄下多了好多文件。
如:_config.yml 、themes等,他們的主要作用如下:

  • _config.yml ——是博客主要配置文件
  • db.json——是博客數據庫
  • node_modules——是NodeJS依賴模塊
  • source——是博客內容以及其他頁面(page)存在的目錄,這個目錄裏面有個_post目錄就是我們存放博客內容的地方,也就是存放博客內容markdown文檔地方,輸入hexo new “newPage”就會在這個目錄建立一個名爲newPage的子目錄,然後在裏面放入md文檔,並在主題的配置文件裏面添加相應欄目newPage,這樣就會顯示在主頁面的目錄上。(將在後續有所mark)
  • themes——是主題存放文件
    生成靜態頁面:
hexo generate 或 hexo g

現在你的博客已經可以在本地預覽了:

hexo server 或 hexo s

你會看到一個發光的地球,
至此,初始化完畢。

部署到GitHub

現在我們要將博客部署到GitHub上了。
打開我們上面提到的_config.yml,拉到最下面,會看到這樣的字樣:

deploy:
     type:

把他改成如下這樣(示例):

deploy:
     type: git 
     repo: https://github.com/你的GitHub賬號/你的項目名稱.git
     branch: master
  • type:如果你是Hexo3.0以上的版本,就寫git就OK,如果是3.0之前的版本,要寫成github。這是我聽說的。

至此,你的本地博客文件從某種意義上來講已經和Git關聯了,你需要做的就是提交了。

執行命令:

npm install hexo-deployer-git --save

字面上意思貌似又安裝了一個hexo-deployer-git,應該是可以讓Hexo支持提交到git的操作。我也不知道……

待執行完畢,接着執行下面的命令:

hexo deploy

將項目部署到GitHub。
訪問:https://你的GitHub賬號.github.io/ 就可以和那個發光的地球重逢了。
至此,部署完畢。

下一節我們將繼續講解如何管理你的博客,在那裏你可以知道如何更換自己想要的博客主題。

這裏比較重要的命令:

1. hexo clean 或 hexo c
2. hexo generate 或 hexo g
3. hexo deploy 或 d
  1. 清理一下hexo項目。
  2. 生成靜態頁面
  3. 部署Hexo項目

在提交博客或更改主題的時候會用到這些命令。

總結

說來你們可能不信,這破玩意兒我搗鼓了一天……知道爲什麼?因爲我至少看到了N種配置方法,然後我把這N種配置方法融會貫通,取之精華,棄之拖沓。含淚寫了這麼一篇博客。
希望你們看完能少走彎路,希望我不會成爲你們的彎路……

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章