在Github上面搭建Hexo博客(一):部署到Github


什么是Hexo

Hexo是一個基於Node.js的靜態博客程序,可以方便的生成靜態網頁托管在Github和Heroku上。並且有很多人為其制作了很多優秀的主題(theme),你可以根據自己的喜好進行設置。主題的設置將在后面的章節中介紹。

這個是Hexo官方網站介紹:

Hexo is a fast, simple and powerful blog framework. You write posts in Markdown (or other languages) and Hexo generates static files with a beautiful theme in seconds.

翻譯過來就是:

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。

怎么在Github上搭建一個hexo博客

我用了一天時間研究和搭建了一個Github博客(GitHub Pages site),過程中遇到一些小問題,現在寫一篇教程,方便和我一樣愛折騰但是是新手的人。

注意:

因為題主在搭建時在Windows平台,所以講解為Windows版本,但是各個平台大同小異,所以實踐起來並沒有很大的差別。

以下為教程正文:

安裝Git

前往Git官網下載Windows版本壓縮包,下載完成后解壓安裝。

安裝Node.js

前往Node.js官方下載網站,下載Node.js官方安裝包,下載完成后同樣解壓安裝。

安裝Hexo

到目前為止,安裝Hexo所需要的環境已將安裝完成,下一步只需要安裝Hexo便可以了。
點擊鼠標右鍵,看是否有Git bash Here選項。如果沒有可以前往Git安裝根目錄,啟動git-base.exe也可以。
在命令行中輸入:

$ npm install -g hexo-cli

Hexo 便安裝完成了

創建Hexo文件夾

找到想要放置博客的文件夾,比如(F:\Hexo),在該目錄下鼠標右擊打開Gitbash工具,(右鍵菜單中沒有該選項的可以用cmd命令cd等進入該文件夾)。執行下面的語句,會在F:\Hexo文件夾下創建node_modules文件夾:

$ hexo init

這里init后面可以跟文件目錄,比如我想在F:\Hexo下創建博客文件夾,那么可以用下面的命令:

$ hexo init F:\Hexo

安裝依賴包

Hexo目錄下,執行以下命令,你會發現F:\Hexo\node_modules目錄下多了好多文件夾

$ npm install

本地調試

目前為止,已經搭建好自己的Hexo博客了,但是只能在本機上查看。執行以下兩個命令(在F:\Hexo目錄下),然后在瀏覽器中輸入 localhost:4000 就可以看到自己的博客了

$ hexo generate 
$ hexo server 

但是只能在本地查看,如果想讓別人也能訪問,那么就需要部署到Github 上面,下面,我們就部署上去。

注冊Github賬戶

前往Github網站,注冊一個新用戶。用郵箱注冊的一定前往郵箱去驗證郵件。要不然之后可能會有小問題。

創建一個新的repository

在自己的Github主頁右下角,創建一個新的repository。比如我的Github用戶名為Gitzhaoyang,那么我創建的repository的名字應該是 gitzhaoyang.github.io

添加reponsitories

這里嚴重注意:

一定要以你的Github用戶名.github.io創建。假如我沒有用gitzhaoyang.github.io而是用了mungo.github.io,那么當我瀏覽器訪問博客的時候會出現404錯誤。這里並不是沒有部署成功,而是把它部署在了這里:http://gitzhaoyang.github.io/mungo.github.io。所以,如果想直接gitzhaoyang.github.io訪問,那么就需要和用戶名保持一致。題主在這里吃了不小的苦頭,最后給Github客服發郵件才知道原因。

創建好如下圖:

一定要保持一致

將本地的文件部署(上傳)到Github賬戶中

編輯本地Hexo目錄下文件_comfig.yml,在最后添加如下代碼(在你修改時,把 gitzhaoyang 要替換成你自己的用戶名)

deploy:
	type: git
	repository: http://github.com/Gitzhaoyang/gitzhaoyang.github.io.git
	branch: master

.yml文件對格式規范要求很嚴格,type: repository: branch: 前面有兩個空格,冒號后面都有一個空格。

執行以下指令即可完成部署(如果提示錯誤,可以看下面注意):

$ hexo generate
$ hexo deploy

注意:

  1. 有些用戶沒有設置Github的SSH,會導致上面兩句失敗。SSH的介紹和設置方法可以查看官方教程,配置起來很簡單。如果英文看不明白或者過程中出現小問題,可以查看我寫的SSH設置教程,是對官方教程的解釋和擴展,針對配置過程中的小問題都有解決辦法。

  2. 每次修改本地文件,都需要命令$ hexo generate才能保存。而且每次使用命令都必須在Hexo根目錄下使用。

  3. 如果你在執行$ hexo deloy,如果提示 ERROR Deployer not found: git,那說明你沒有安裝hexo-deployer-git依賴包,進入F:\Hexo\node_modules發現真的沒有hexo-deployer-git,不用擔心,只需要輸入下面命令創建hexo-deployer-git依賴包,然后再執行hexo deploy就能上傳成功了

     $ npm install hexo-deployer-git --save
    
  4. 如果你是windows用戶,那么當你執行$ hexo deploy命令的時候,可能會先后出現提示框讓你輸入你的Github用戶名Github密碼,只要輸入正確,上傳就沒有問題。

好了,現在我們的博客已經在Github上面部署成功了,可以在瀏覽器訪問gitzhaoyang.github.io試試了。

提示:

現在Hexo支持更加簡單的命令格式了,比如:

hexo s == hexo server
hexo g == hexo generate
hexo d == hexo deploy
hexo n == hexo new

后續我會把如何配置博客信息,發表文章,設置博客主題,不同電腦間進行同時更新自己的Blog的方法等更新上來,感興趣的人可以關注


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM