Hexo+Github搭建個人博客(一)——開始搭建

hexo_github.jpg
title-picture


  前段時間本人利用業餘時間,在網上查詢各種資料,使用Hexo+Github的方式搭建起了我個人的博客——BrightLoong。相信網上已經有無數前輩寫了類似的文章來記錄如何搭建博客的過程和步驟,我也不譁衆取寵或者班門弄斧了,把我在搭建博客中使用 資料做一個收集,同時也將我在搭建博客過程中遇到的坑列舉出來,以及對應的解決方法,也是對搭建博客過程的一個記錄,畢竟好記性不如爛筆頭。那話不多說,接下來就是一個簡單的介紹以及如何搭建的步驟(本文基本也是安照官方的步驟在介紹,我只是在有些地方記了下自己踩過的坑,強烈建議大家跟着Hexo官方文檔操作)。

本文適用於Windows搭建

正文

什麼是Hexo

  在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是一個快速,簡單和強大的博客框架。你可以使用Markdown(或其他語言)寫博客,之後Hexo能在幾秒鐘生成具有美觀主題的靜態文件。)如果你想了解更多關於Hexo的東西,請移步Hexo官網
  Hexo是一款基於Node.js的靜態博客框架,可以deploy到Github上,所以首先要在電腦上安裝git和node.js,並在Github上註冊自己的賬號,由於這些東西不是本篇博客要涉及到的主要內容,你可以谷歌、百度,也可以參考我下面提供的鏈接。

Git安裝

  你可以去官網下載Git,因爲國外資源可能很慢,你也可以下載我在網盤上提供的Git鏡像。具體如何使用,請參照廖雪峯老師關於Git的教程,如果你僅僅是想安裝git那看看Git安裝的那個章節

Node.js安裝配置

  關於Node.js的安裝以及配置,可以參照菜鳥教程上面關於Node.js安裝配置的教程,上面也有下載的鏈接,本人就是參照上面安裝的。具網上有些文章說,安裝完成後最好重啓電腦,以免之後無法使用hexo的相關命令,我倒是沒有遇到,不過如果大家遇到這種問題就重啓吧。

Hexo安裝

  必須要在你安裝了上述的Git以及Node.js之後才能進行Hexo的安裝。

1. 用以下命令安裝Hexo

  在任意地方點擊右鍵,選擇Git Bash Here

$ npm install -g hexo-cli

  如果安裝過程中遇到一下錯誤:

ERROR Deployer not found : github

  運行

$ npm install hexo-deployer-git --save

2. 創建博客存放目錄,並進行初始化,安裝依賴包(最好不要使用帶中文的路徑,以免後面出現不必要的麻煩)

  打開一個目錄,在這個地方點擊右鍵選擇Git Bash Here,執行以下命令

$ hexo init <folder> #創建目錄並執行初始化
$ cd <folder>
$ npm install #安裝依賴包

<folder>改爲你想要的目錄。
  當然你也可以自己新建一個目錄,比如我在F盤中創建了myblog目錄,進入目錄中點擊右鍵選擇Git Bash Here,直接執行以下命令

$ hexo init 
$ npm install

  不管你用哪種方式,執行完畢後你會發現以下目錄結構

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

3. 啓動服務

  執行以下命令來啓動服務

$hexo g #hexo generate,生成靜態文件
$ hexo s #hexo server,啓動本地服務器

  如果啓動過程中沒有報錯,此時你用瀏覽器訪問http://localhost:4000/,是不是看到了一個Hello World的博客頁面,hexo3.0使用的默認主題是landscape(之後我會講如何更換主題,以及集成第三方的工具),而且此時的服務是本地啓動的,別人並不能看到(繼續我接下來的操作就好了)。
  這個時候如果在瀏覽器沒看到漂亮的博客頁面怎麼辦,別急,先確認你在啓動過程中是不是報錯了,如過有的話估計是上面的操作有誤,如果沒有並且發現頁面一直在加載中,估計是端口被佔用了,我就遇到了這個問題。怎麼辦?把4000端口給殺死,還有更簡單的——在hexo s命令後面加上啓動參數,修改默認端口:hexo s -p <port>,比如我用的 hexo s -p 8000,現在重新訪問http://localhost:8000/記得把地址的8000改成你自己對應的端口號,是不是看到了美麗的界面。

4. 註冊Github賬號,並創建倉庫。

  想要別人也訪問到你的頁面,跟着繼續吧。首先在Github官網上註冊一個賬號,有賬號的跳過註冊,直接登錄。登錄後找到new repository按鈕創建一個新的倉庫。

repository.jpg
new repository

  然後填寫repository name就行了,要注意的是:這個名字的格式必須爲youname.github.io,並且必須和你的賬戶名相同,比如我的賬戶名是BrightLoong,我的地址就是brightloong.github.io(最開始我就是將name隨意填寫,雖然是這個格式但是根本訪問不了,會報404的錯誤)。

creat_repository.jpg
creat repository
5. 將本地文件推送到github

  最後,剩下的就是將本地文件推送到github上了,首先打開站點配置文件_config.yml,比如我的路徑是:F:\myblog_bonfig.yml。找到最後的deploy屬性,如果沒有就自己添加,將配置修改爲:

deploy:
  type: git #推送方式
  repository: https://github.com/BrightLoong/BrightLoong.github.io.git #你的推送地址
  branch: master #你要推送的分支

這個地方要注意的是屬性後面的冒號必須要有一個空格,否則會報錯

  配置好之後使用以下命令將服務部署到github上。

$ hexo clean
$ hexo g
$ hexo d

  使用hexo d命令,第一次會要求你輸入用戶名和密碼,用戶名和密碼就是你註冊github時候使用的用戶名和密碼。如果遇到以下錯誤:

ERROR Deployer not found : github

  運行

$ npm install hexo-deployer-git --save

  再執行上面的命令。

$ npm install hexo-deployer-git --save

  如果你沒有配置Github的SSH,那麼可能需要配置一下,你可以用以下命令查看一下

ssh -T [email protected]

  如果成功會有以下提示(我的賬戶名叫BrightLoong)

Hi BrightLoong! You've successfully authenticated, but GitHub does not provide shell access.

  如果沒有,可以參考博客git添加ssh-key查看config

  如果沒有報錯誤,那麼博客就已經搭建起來,併發布到Github上了,在瀏覽器輸入youname.github.io就能看到自己的博客了,如果中途報錯說未識別的用戶名,那麼如果你確定你填寫是正確的,重複使用hexo d命令,我當時就遇到過這種情況,我估計是網絡不好引起的。

結尾

  博客已經搭建起來了,是不是正如Hexo所說——fast, simple and powerful,這篇文章就說這麼多。之後我介紹如何發佈文章,更換主題,站點配置文件,以及如何集成第三方應用(多說評論、百度分享等)。希望對大家有幫助。

版權聲明:本文爲博主原創文章,轉載請註明出處 BrightLoong’s Blog

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