結合hexo在GitHub上搭建個人博客——全過程


 

剛花了幾個小時在GitHub上搭建了自己的博客,出了雛形,因為也是新手,所以想記錄下自己搭建的過程,也可以給新手小白們當個參考。如果有錯誤的地方,歡迎指出!

首先,放出雛形圖~~~~~,有點丑,還沒來得及完善!

  

 

啦啦啦,回歸正題,想搭建一個這樣的博客,需要哪些步驟呢?

  1.  首先,得在GitHub上有個自己的倉庫。

  莫嫌我啰嗦,先簡單說一下,GitHub是一個什么樣的網站。說到GitHub得先說一下git,git是Linux的作者Linus和他的一群以代碼會友的小伙伴在創作Linux期間,為了更方便的進行創作而編寫的一個分布式(不需要中央服務器,可離線進行)版本控制系統,這其中的故事挺有趣的,有興趣的小伙伴可以去谷歌一下(大牛們的idea和實現真的都是秒秒鍾的事,我什么時候才能有他們十分之一的功力)。git呢,可以幫我們管理記錄程序開發過程中的每個版本,打個比方,寫畢業論文,昨天寫了一段,今天進行了一些修改,只要進行提交,每次修改過后的版本,它都會幫我們保管,並且當我們發現我剛剛的修改不合適,我想回到昨晚提交時的樣子時,發現做了好多細節的修改,記不清了,這個時候,git可以幫你秒秒鍾回溯到昨晚的那個版本!可穿越到過去,也可以從過去穿越到現在。就是這么神奇!棒呆了有木有

  GitHub 是基於 Git 的一個代碼托管網站。開發者可以將代碼在 GitHub 上開源,可以瀏覽其它項目的代碼,fork 到自己名下做修改,clone 回本地(沒有訪問權限的 private repo 除外)使用,也可以發起 pull request 向上游提交自己的修改。

  來到GitHub官網,注冊自己的賬號,填好用戶名,密碼,郵箱,並完成郵箱驗證就可以啦!

  

  注冊完之后,就可以在GitHub上新建一個倉庫,這個倉庫里可以存放你自己的代碼和項目(GitHub免費幫你保存喲),可以和其他人分享,向我們這種小菜鳥可以去學習大牛們的項目,包括一些優秀的框架源碼。(如果想要有自己的私人庫,每月7刀的費用!)

  

 

  

   注意,庫的名字要和賬戶名一致!

  

  默認的域名是http;//username.github.io/,如果想要一個特別的域名,可以買一個域名,並在setting里面綁定就可以了。

  以上完成了第一步,我們有自己的代碼倉庫了,接下來我們要配置本機環境了!

 

2. 環境搭建

  2.1 首先,我們需要下載node.jsgit.安裝基本上就是默認安裝即可。

  安裝,完成之后,打開命令窗口(Win+R,輸入CMD,回車),分別輸入node -v,  npm -v, git -version,  如果都能像下圖一樣返回版本號就說明安裝好了。

  

  如果在這里不可以操作git,說明在安裝時沒有更改路徑,設置為windows環境下也可以操作,不過沒有關系,只需要將git的安裝路徑添加到環境變量中就可以在windows下操作,或者我們可以運行git bash,在這里查看git的版本號(安裝git之后一定會生成git bash),

  

  注意,在git bash中應該輸入 git version。(環境號版本號不同沒有關系)

   2.2 SSH授權

  打開git bash,輸入ssh-keygen -t rsa, 接着回車三下

  

  這樣就會在C盤用戶目錄下生成id_rsa和id_rsa.pub這兩個文件,前者是密鑰,后者是公鑰,用記事本打開id_rsa.pub,復制其中的全部內容,添加到GitHub上,這樣本地的id_rsa密鑰就可以和GitHub上的id_rsa.pub公鑰進行配對,授權成功。

 

  

 

   SSH key添加之后,就可以在本機git bash中進行測試,輸入ssh -T git@github.com進行測試,

  

  返回Hi username !You've successfully ......說明你已經成功啦!

  (如果碰到什么問題,可以給我留言喲!嘻嘻)

3. 設置本地博客的配置

  3.1 安裝hexo

  在任意一個地方新建一個文件夾,在git bash中進入這個文件夾,比如cd /d/Files/hexo/(之后安裝的內容會保存在這個文件夾內),輸入npm install -g hexo安裝hexo即可,如下圖(我已經安裝過了,就不再安裝了)

  

  注意,在回車之后,可能會出現一行WARN的警告語句,不用管它,什么都不要按,等着。。。過一段時間如果出現hexo版本號之類的語句就代表差不多了。

  然后輸入npm install hexo --save這個時候你會看到命令行出現了一堆白字,緊接着輸入hexo v查看是否安裝成功

  

  喏,安裝好了。。。。

  別着急,就快成功了,再堅持一小小下,嘿嘿。

  3.2 初始化hexo

  繼續輸入hexo init實現初始化,

  

  

  下載好了,再輸入hexo s

  

  這時候我們就可以打開瀏覽器了,在地址欄中輸入http://localhost:400/,我們就可以看到如下圖的界面,,我們的博客建成功啦!!!開不開心?高不高興?是不是很有成就感?

    

  我們可以去看一下我們的源碼的位置,就在之前新建的那個文件夾里,在source->_posts文件夾下,有一篇helloworld的初始化文章,如果想要添加新的文章,可以在命令行輸入hexo new 'filename',就會生成一個新的.md文件,對它編輯就可以了。

  

(上圖中有個錯誤,public才是源碼文件夾)

 

  3.3 上傳項目

  先打開配置文檔_config.yml,對它做如下修改,repository后面的內容是 git@gitbub.com:username/庫地址 的形式

  注意:type、repository、branch冒號的后面都有一個空格

    

  部署好之后,我們就可以上傳我們的代碼咯

  回到命令行窗口,輸入npm install hexo-deployer-git --save,

  再輸入hexo g,然后再hexo d,就可以將我們public里面的代碼上傳咯,在GitHub上可以看到我們上傳的代碼。這樣別人也可以通過域名訪問我們博客了。在地址欄輸入http://域名就可以訪問。

 

4. 更改主題

  在hexo官網上下載自己喜歡的theme,點擊圖片可以預覽主題,點擊圖片下面的文字就可以打開下載鏈接,

  

 

 

   

  復制源碼的url,在git hash 命令窗口下載主題,輸入git clone url,注意得手動粘貼,Ctrl+v無效,

  

  

   接着,將配置文件中的theme改為新的主題的名字,記住一定要將下載下來的文件夾放到themes文件夾里!

  

  差不過就這么多啦,接着就可以根據主題的使用文檔進行博客的修改,改成自己喜歡的樣子!

  ps: 整理這么些內容比搭博客還累,如果覺得對你有幫助的話,麻煩給個贊贊喲!謝謝!


免責聲明!

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



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