Hexo+Github搭建我的博客(一)——開始搭建

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

本文適用於Windows搭建html

正文

什麼是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上註冊本身的帳號,因爲這些東西不是本篇博客要涉及到的主要內容,你能夠谷歌、百度,也能夠參考我下面提供的連接。node

Git安裝

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

Node.js安裝配置

關於Node.js的安裝以及配置,能夠參照菜鳥教程上面關於Node.js安裝配置的教程,上面也有下載的連接,本人就是參照上面安裝的。具網上有些文章說,安裝完成後最好重啓電腦,以避免以後沒法使用hexo的相關命令,我卻是沒有遇到,不過若是你們遇到這種問題就重啓吧。github

Hexo安裝

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

1. 用如下命令安裝Hexo

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

$ npm install -g hexo-cli
複製代碼

若是安裝過程當中遇到一下錯誤:json

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按鈕建立一個新的倉庫。

new repository

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

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 git@github.com
複製代碼

若是成功會有如下提示(個人帳戶名叫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

相關文章
相關標籤/搜索