利用hexo完成搭建個人博客(1-搭建)

前言

  最近在學java框架,想利用博客記錄下來學習過程以及學習成果,同時也算爲自己做一個筆記,平時都是使用Xmind思維導圖做筆記,但是在手機上不太方便回顧。本來是打算自己用java寫一個博客系統出來,一來記錄自己的學習路程,二來可以作爲畢業設計,不過考慮到打算重構之前的在線購物系統,以及水平能力有限,便放棄了這個想法。好在無意中接觸了hexo,首先hexo的風格吸引了我,畫面簡潔。其次是功能強大,基本上該有的功能都有。再加上正在學習使用MarkDown書寫工具,以及接觸GitHub,可以說是各種機緣巧合。正好進行一個系統的全面的學習。
​  我分別在不同的電腦上搭建了兩次博客,第一次是筆記本(win10),可以說是磕磕碰碰,最後勉勉強強算搭上了。第二次是在第一次記錄的基礎上,使用騰訊雲服務器(win server 2012)進行搭建,整個過程都非常順利,這個博客便是第二次搭配記錄。跟着這個步驟,最多30分鐘便能搭起一個基礎的博客。不過基礎的博客肯定不能滿足後續的要求。

  在下一篇學習頁面設置和寫/發博客。提前預覽

1.概述

  Hexo官網:A fast, simple & powerful blog framework,即:快速、簡潔且高效的博客框架。基於Node.js 所帶來的超快生成速度,讓上百個頁面在幾秒內瞬間完成渲染,只需一條指令即可部署到 GitHub Pages, Heroku 或其他網站,Hexo 擁有強大的插件系統,安裝插件可以讓 Hexo 支持 Jade, CoffeeScript。
  也就是說,只需要30分鐘左右就可以搭建一個屬於自己的個人博客。同時又有豐富的插件可以使你儘可能的完善自己的博客細節。利用GitHub的git pages,可以託管我們的靜態網頁,而且可以自定義域名(參考中有)。等博客搭建完畢,我們就只需要寫博客內容了。

2.搭建環境

2.1 Node.js

    一個JavaScript運行環境,我們使用它來生成我們博客的靜態頁面。如果不確定自己電腦上是否安裝了Node.js,可以在cmd命令行下運行

npm -v

  運行結果提示爲非命令則需要進行安裝。

  接下來我們需要去官網下載,進行安裝。同時如果版本過低可能會導致部分功能丟失或者配置方法不同,建議6.0以上。

  安裝完成之後我們再運行cmd命令會顯示如下結果
安裝node成功
  如果還是提示非命令,有可能是node沒有加到環境變量中去,在環境變量的path中,加上剛剛的安裝目錄。(如我的安裝目錄:C:\Program Files\nodejs\)有自定義目錄需要修改成自定義目錄。

2.2 Git 環境

  接着我們就是需要安裝Git了,同時我們先查看一下電腦是否安裝了git,在cmd中執行

git --version

  如果顯示爲非命令,則需要我們下載安裝,可以上官網,如果下載較慢的話,也可以上某度雲進行下載,安裝過程基本上選擇默認的就好了。建議版本2.0以上
​ 驗證是否安裝成功同上,不過這次需要加的環境變量則是Git安裝目錄下的cmd,(如我的:C:\Program Files\Git\cmd)

2.3 Git hub

  Git-hub,註冊過程就不多贅述,基本上不會有什麼問題。重要的是需要建立存放代碼的倉庫和添加SSHkey保證本地能正常上傳代碼到github。
  1)建立倉庫:登陸GitHub之後,在點擊右上角的“+”號,選擇 new repository
個人設置
  在 Repository name中填入"用戶名.github.io"。用戶名就是GitHub的用戶名。
新建倉庫
  這裏因爲我之前創建了倉庫,所以提示我已經存在。因此也可以得知,一個用戶只能搭一個這樣的博客。最後點擊create repository 這一步就ok了。
  2)第二步,我們來添加SSHkey,確保我們本地有權限能夠提交代碼到github。首先我們仍然測試看看本地能否存在key(第一次當然是沒有,不過爲了和後面出現對比,我們可以先測試一下)。首先在桌面右擊 -> 選擇Git Bash Here調出git命令臺。輸入下面命令:

ssh -T [email protected]

測試ssh

如果提示< Are you sure you want to continue connecting (yes/no)?>,輸入yes

  這就是本地沒有權限連接的,需要我們創建SSHkey。我們繼續輸入以下命令

ssh-keygen -t rsa -C "註冊github的郵箱"

  三次回車之後,會出項下面的結果:
生成ssh
  然後git會自動在c盤用戶下面的當前用戶文件夾新建一個.ssh文件,裏面有一個 id_rsa.pub 文件。使用記事本打開之後,複製裏面的內容。
ssh文件
  我們在本地生成好key之後,需要添加到github上。在GitHub網頁進入個人設置選擇SSH and GPG keys,新建一個ssh key:
設置
ssh
  把複製過來的內容粘貼在key框,上面的title可以寫,也可以不寫,不寫會默認使用郵箱。如果爲了區分多臺客戶端,可以填寫區分一下。
添加ssh
  保存之後,輸入密碼確認,跳轉到sshkey頁面,你會發現剛剛添加的key已經在裏面了。到這裏我們就已經添加成功了,於是我們再測試一下連接,出現以下結果就是正確的。
連接成功

  然後再運行以下命令,來讓git記錄我們的身份

git config --global user.name "GitHub賬號"
git config --global user.email "註冊郵箱"

  到這裏我們的準備工作就已經結束了。下面就開始搭建博客,如果到這裏就放棄,那就前功盡棄了(加油)。

3.搭建博客

3.1 安裝hexo

​ git bash 執行以下代碼:

npm install -g hexo

安裝hexo
  可能會要一點時間,如果沒有報錯(ERR),說明安裝問題。

3.2搭建博客

  新建一個文件夾,用來存放我們的博客文件。右鍵 ->git bash,依次運行以下代碼。‘#’後面是註釋

hexo init  #初始化hexo環境
hexo g  #生成靜態頁面
hexo s  #開啓本地服務

打開本地服務
  執行完最後一條命令,會出現如上結果。從圖中我們也得知,在瀏覽器輸入< http://localhost:4000/ > 就可以瀏覽我們的博客了,然後按ctrl + c 結束本地服務。生成的靜態文件就在public文件夾中。
在這裏插入圖片描述
  至此我們就快大功告成,把代碼同步到github讓它幫我們管理代碼。同時,我們也可以輸入之前我們定義的倉庫名,進行外網訪問。不過,我們還要進行最後一步配置。

3.3配置並同步代碼

  用文本文件打開剛剛存放博客文件的目錄中的 _config.yml 文件,然後拉到最後找到deploy:
在這裏插入圖片描述
  按照如下進行配置,冒號後面一定要跟空格:

deploy:
  type: git
  repository: [email protected]:GitHub用戶名/GitHub用戶名.github.io.git
  branch: master

  GitHub用戶名就是剛剛新建倉庫的名稱。保存之後,再依次運行以下命令:

npm install hexo-deployer-git --save   #安裝插件
hexo d  #上傳代碼

在這裏插入圖片描述
  上傳成功之後,然後我們可以到我們GitHub的倉庫下看看,是不是把本地的文件上傳過去了。然後我們利用其它的瀏覽器,或者客戶端輸入 剛剛定義的倉庫名稱 < https://licqing.github.io/ >就可以訪問你的博客了。
在這裏插入圖片描述

  搭建博客的結束,正是入門博客的開始。hexo文檔。後續將配置博客樣式和書寫博客。

4.途中遇見的問題

  這裏分享一下第一次搭配遇到的問題和最後怎麼解決的吧。

  • hexo init 命令 : 錯誤 conmand not found 。應該是hexo未配置進環境變量,我們找到node_modules文件夾,這時我們發現裏面有很多文件夾,找到hexo文件夾,這裏我們可以看到一個bin文件夾,進到bin。然後把這個目錄加到環境變量path中去。
  • hexo init 命令 : 錯誤 FATAL not empty。存放博客的地方一定是需要空文件夾。注意檢查空文件夾。
  • hexo g 命令 : 錯誤 FATAL bad indentation of a mapping entry at line 82, column 13。 _config.yml文件冒號後面沒有跟空格

5.參考(可配置域名)

https://www.jianshu.com/p/05289a4bc8b2
https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
https://hexo.io/zh-cn/docs/writing

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