1. 程式人生 > >瞭解githubPages+hexo搭建部落格的原理

瞭解githubPages+hexo搭建部落格的原理

之前用githubPages+hexo搭建了一個自己的部落格:sunshine940326.github.io(就是你現在看到的部落格),當時還不知道怎麼使用git和github,所以只是跟著網上的教程在一步一步操作,現在瞭解了git知道怎麼使用之後才慢慢明白其中的原理。

什麼是github pages

  1. 什麼是github pages
    github是專案託管網站,列出了專案的原始檔,所以github 有一個pages功能,可以自定義主頁,用來代替預設的列出源列表的這個頁面

    所以,github Pages可以被認為是使用者編寫的、託管在github上的靜態網頁。

    • 個人或組織主頁 - 頁面內容位於 master 下
    • 專案主頁 - 頁面內容位於每個專案的master下

    我們建立的部落格屬於個人頁面(也可以建立為專案主頁,不過預設的域名不一樣,個人理解)

怎麼使用github pages

  1. 使用個人或組織頁面
    使用個人或組織頁面,需要先建立一個和你的賬號同名的倉庫,比我我的github賬號是sunshine940326,那麼我需要建立一個名為sunshine940326.github.io的repo,然後在master上提交你的專案程式碼,這樣就可以通過網址:http://sunshine940326.github.io來訪問我的個人部落格。
  2. 使用專案主頁的方法如下

    • 設定的方法很簡單,只需要在你專案的右上角點選setting
      這裡寫圖片描述
    • 找到下方的pages,將預設的none改成master分支這裡寫圖片描述
    • 點選儲存,之後就可以在github pages後面看到你的專案連結了,你可以直接通過這個連結檢視你master分支中程式碼的html內容這裡寫圖片描述

user pages只有一個, project pages可以有多個, 對於個人部落格而言, 兩種方式都可以.如果使用者申請了自己的域名, 還可以使用CNAME檔案自定義domain name, 這樣訪問你的域名就自動訪問到github上的頁面. 使用者也可以自定義404頁面.

什麼是hexo以及安裝hexo

說完了githubpages,繼續來說一下什麼是hexo
1. 什麼是Hexo
google的第一條結果的解釋是這樣的
這裡寫圖片描述


點開這個連結就是中文版的官網了,強烈建議大家多看看官方教程,比看其他的教程有用多了

hexo是基於node環境,所以你需要先安裝node,進行一些操作需要用到命令列,所以建議大家直接裝一個git bash
這是git for windows自帶的一組程式,提供了Linux風格的shell,在該環境下,您可以直接用上面提到的命令來安裝Node.js。開啟它的方法很簡單,在任意位置單擊右鍵,選擇“GitBash Here”即可。由於Hexo的很多操作都涉及到命令列,您可以考慮始終使用Git Bash來進行操作。
2. 安裝 Git
- Windows:下載並安裝 git.百度雲git下載地址
- 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
3. 安裝node
安裝node的方式有很多種,我建議直接使用安裝程式安裝node安裝程式

對於windows使用者來說,建議使用安裝程式進行安裝。安裝時,請勾選Add to PATH選項。
安裝node是需要配置環境變數的

安裝完成之後開啟命令列,輸入 node -v,如果有返回版本號,即說明安裝成功
4. 安裝Hexo
當你安裝好了git和node之後,就可以安裝hexo了,好激動有沒有,先不要激動的太早,這才剛開始= =
只需要輸入下面的程式碼就可以安裝hexo
在任意位置新建一個資料夾名為hexo
$ cd d:/hexo
$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo g # 或者hexo generate
$ hexo s # 或者hexo server可以在http://localhost:4000/ 檢視

至此,你可以在瀏覽器輸入http://localhost:4000/,預覽你的部落格了,通常都是一篇hello world= =
然後我們就需要將我們的專案部署到github上

首先需要明白所謂部署到github的原理。
之前步驟中在Github上建立的那個個人專案的repo(sunshine940326.github.io)一個最大的特點就是其master中的html靜態檔案,可以通過連結http:// .github.io來直接訪問。
Hexo -g 會生成一個靜態網站(第一次會生成一個public目錄),這個靜態檔案可以直接訪問。
需要將hexo生成的靜態網站,提交(git commit)到github上。
然後我們需要配置_config.yml配置檔案
目前我安裝所用的本地環境如下:(可以通過hexo -v檢視)$ hexo -v
hexo: 3.2.2
hexo-cli: 1.0.2
os: Windows_NT 6.3.9600 win32 x64
http_parser: 2.7.0
node: 4.5.0
v8: 4.5.103.37
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 56.1
modules: 46
openssl: 1.0.2h

要想部署到github,我們需要作如下配置(貌似不同版本的hexo配置不同,主要是hexo2.0和hexo3.0,所以你需要先檢視自己安裝的hexo版本)
注意type:後面有一個空格
將repository後面的連結換成你的部落格名字# Deployment
Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: https://github.com/sunshine940326/sunshine940326.github.io.git

然後在執行
$ hexo clean
$ hexo g
$ hexo s
$ hexo d

5. 命令解釋:

  • hexo clean:清除public,當 source資料夾中的部分資源更改過之後,特別是對檔案進行了刪除或者路徑的改變之後,需要執行這個命令,然後重新編譯。
  • hexo generate (hexo g): 編譯,一般部署上去的時候都需要編譯一下,編譯後,會出現一個 public 資料夾,將所有的md檔案編譯成html檔案 開啟本地服務,
  • hexo server (hexo s) 啟動本地web服務,用於部落格的預覽
  • hexo deploy (hexo d) 部署播客到遠端(比如github, heroku等平臺):部署部落格到github上,如果一切順利,你就通過訪問usename.github.io訪問你的部落格了!
  • 是的,現在你擁有了自己的部落格!
    然後你就可以輸入http://sunshine940326.github.io來檢視你的部落格啦~
    注意需要提前安裝一個擴充套件:$ npm install hexo-deployer-git --save

裝飾你的個人部落格

至此,已經完成了github pages+hexo搭建部落格的步驟,現在需要裝飾你的部落格
1. Hexo 主題配置
就和當時我們用的qq空間一樣,我們可以直接用寫好的主題,然後我們就只需要寫文章就好
這裡以主題NexT為例進行說明。
2. 安裝主題 $ hexo clean
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

3. 啟用主題

修改Hexo目錄下的_config.yml配置檔案中的theme屬性,將其設定為next。
4. 更新主題
$ cd themes/next
$ git pull
$ hexo g # 生成
$ hexo s # 啟動本地web伺服器