??Step1：安裝Node.js和Git

• node.js安裝，在安裝時(shí)會(huì)自動(dòng)安裝npm。
• Git安裝，點(diǎn)擊此處訪問官網(wǎng)，按需下載對應(yīng)版本，默認(rèn)安裝即可。
• 檢驗(yàn)安裝是否成功：

  • Win + R 打開運(yùn)行窗口，輸入cmd，輸入如下命令，有相應(yīng)版本信息顯示則安裝成功。
    

  • 若不正確可以卸載軟件重新安裝，此外若安裝成功，在桌面右鍵鼠標(biāo)，可以看到菜單里多了 Git GUI Here 和 Git Bash Here兩個(gè)選項(xiàng)，第一個(gè)是圖形界面的Git操作，另一個(gè)是命令行。
    

??Step2：安裝并初始化配置Hexo

• 在期望的位置新建一個(gè)文件夾，博客相關(guān)的內(nèi)容都存在這個(gè)文件夾里。我這里直接在桌面新建了my_blog文件夾。

• 在該文件夾下右鍵鼠標(biāo)，點(diǎn)擊Git Bash Here，輸入以下npm命令：

   $ npm install hexo-cli -g  
   $ npm install hexo-deployer-git --save  
  

• 在剛才新建的文件夾下再次新建一個(gè)Hexo文件夾，進(jìn)入該Hexo文件夾右鍵，點(diǎn)擊Git Bash Here，輸入以下命令：hexo init，如下圖：
  

??Step3：本地查看效果

• 執(zhí)行以下命令：hexo generate和hexo server
  
  

• 而后可登錄http://localhost:4000/，查看效果
  

??Step4：將博客部署到Github Pages上

??創(chuàng)建項(xiàng)目代碼庫

• 點(diǎn)擊New repository創(chuàng)建代碼項(xiàng)目庫。
• 注意?。№?xiàng)目名必須是：你的用戶名.github.io?。?！否則后續(xù)會(huì)連接不上以致404，誰試誰知道o(╥﹏╥)o
  

??配置SSH密鑰

• 在你第一次新建的文件夾里面（my_blog） Git Bash Here輸入以下命令：ssh-keygen -t rsa -C "your email@example.com"
• 而后會(huì)出現(xiàn)Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):，這里直接回車將密鑰按默認(rèn)文件進(jìn)行存儲(chǔ)。
• 而后會(huì)出現(xiàn)Enter passphrase (empty for no passphrase): ，這里是讓輸入密碼，確實(shí)沒必要設(shè)置??！本人設(shè)置了123，后續(xù)還得動(dòng)不動(dòng)輸入密碼，且用下述方法刪除了o(╥﹏╥)o。
  

• 完整運(yùn)行結(jié)果如下：
  

• 運(yùn)行以下命令，將公鑰內(nèi)容復(fù)制到系統(tǒng)粘貼板上： $ clip < ~/.ssh/id_rsa.pub
  

??在Github賬戶中添加公鑰

• 進(jìn)入Settings

  

• 找到SSH and GPG Keys

  

• 選擇New SSH key

  

• 粘貼密鑰

  

??測試

• 輸入以下命令： $ ssh -T git@github.com，最后出現(xiàn)successfully即可。
  

??配置Git個(gè)人信息

 $ git config --global user.name "此處填你的用戶名"  
 $ git config --global user.email  "此處填你的郵箱"

??將本地的Hexo文件更新到Github的庫中

• 粘貼SSH地址

  

• 修改Hexo文件夾下的_config.yml文件

  

• 在Hexo文件夾下的Git Bash Here下，先運(yùn)行 npm install hexo-deployer-git --save
  

• 然后輸入hexo g -d，每次更新都要跑一下這個(gè)上傳，第一次輸入時(shí)，我這邊是彈出了連接提示
  

  

• 最后成功上傳最后會(huì)顯示如下提示：
  

??訪問博客

• 上述都完成后，檢驗(yàn)是否成功的方法是：從你的博客地址（https://你的用戶名.github.io）訪問，若出現(xiàn)如下畫面即為連接成功。
  

??Step5：發(fā)表文章

• 首先安裝好圖片插件，否則會(huì)出現(xiàn)圖片不顯示的問題。

• 再次打開Hexo文件夾下的_config_yml，修改post_asset_folder: false為post_asset_folder: true。
  

• 然后在Hexo文件夾下的Git Bash Here下，輸入如下命令安裝圖片上傳插件包npm install https://github.com/CodeFalling/hexo-asset-image --save
  

• 而后，輸入hexo n "文件名"，即可創(chuàng)建對應(yīng)的md文件和用來放圖片的文件夾（可在Hexo\source\posts里查看）。
  

  

• 后續(xù)即編輯md內(nèi)容（我默認(rèn)用的typora編輯器），涉及到圖片的地方，就用![](./Build-my-first-blog/1.png標(biāo)準(zhǔn)md圖片引入語法。

• 編輯好后，記得git跑一下hexo g -d上傳更新。

• 再次訪問主頁連接，即可看到最新更新的博客啦~

??Step6：博客美化

• 選用對應(yīng)的模板主題，根據(jù)主題說明文檔修改配置，詳見主題商店。

• 我選用的是keep主題，先在根目錄下下載主題，而后在Hexo文件夾下的_config.yml里將主題theme改為keep，下載的是什么主題就改成什么。
  
  

• 在使用模板時(shí)，做對應(yīng)配置修改后，可先在Hexo根目錄下用hexo g+hexo s運(yùn)行后在本地localhost:4000查看效果，滿意后再hexo g -d 上傳到github。
  
  
  

• 模板具體顯示的細(xì)節(jié)修改，在theme文件夾下的_config.yml里修改對應(yīng)配置。文章來源地址http://www.zghlxwxcb.cn/news/detail-859823.html

• 至此，一個(gè)初步搭建的個(gè)人博客就完成啦~
• 戳此直達(dá)我的個(gè)人博客查看詳情(σ???)σ…:*☆

• 參考博客
  • 使用 Github Pages 和 Hexo 搭建自己的獨(dú)立博客
  • 解決hexo博文圖片不顯示的方法

到了這里，關(guān)于雜貨鋪 | 使用 Github Pages 和 Hexo 搭建自己的獨(dú)立博客的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！