利用GitHub+Node.js+Hexo搭建個人博客(一)


本篇是自己在搭建Hexo博客平台時的一個過程記錄。(2019.9.13實測有效)

一、GitHub

1. 賬號注冊

因為此文所搭建的個人博客是基於GitHub平台服務的,所以首先是注冊GitHub,當然已有賬號的跳過此步;

2. 創建Repository

點擊開始后,跳轉至Create a new repository,這邊Repository name命名規則就是username.github.io,其中username就是你注冊時的username。

usename 一定要改成賬號名,不要改成其他的,否則就出現  https://growvv.github.io/rogn.github.io/ 這種尷尬的情況!

3. Settings

點擊創建之后頁面跳轉至project內,這時我們點擊settings

這時我們在該頁面往下拖動網頁,找到GitHub Pages,之后點擊Choose a theme選擇頁面主題,這邊我們就暫時選擇默認的主題(因為后面我會更換為NexT主題的),然后點擊Select theme

4. 開啟GitHub Page

點擊選擇主題后,頁面會跳轉至該Repository的可以說是主頁吧,如下所示。上面有提醒主題更換,也有生成一個 index.md/markdown 文件。這時我們再去剛才的setting設置里去看剛剛的GitHub Pages那邊,會有顯示你的url,這就是你未來博客“搭建”在該網址上。

此時點擊該url訪問到的也就是你未來個人博客將會展示的樣子

二、工具下載

1. NodeJs

傳送門:NodeJs,選擇對應的版本進行下載,安裝的話就點點點,這邊就不在敘述了。

 軟件安裝完成后,打開cmd界面,輸入node -vnpm -v(注意查看環境變量部分是否已經正確),查驗其版本,確認是否安裝成功。

2. Git

傳送門:git,選擇對應版本下載安裝。安裝過程這邊也不敘述了,就點點點。

安裝完成后,可能還要手動添加一下環境變量吧,看下版本git --version

 

 三、部署Hexo

在命令行輸入:

npm install -g hexo-cli

 之后創建一個文件夾(搭建博客的相關文件存放於此),此處我命名為test(可自主命名),在該文件夾路徑下打開cmd(在文件夾下的路徑輸入框中輸入cmd並回車),或者直接在cmd中切換到該文件夾下,輸入:

hexo init

(執行這條命令前,必須確保文件夾為空

如果此命令出錯,請見本文最后一段。

運行后的樣子,其中在下載默認主題landscape時,出現了一些亂碼,不過這些問題不大,最后顯示添加add成功就行:

此時文件夾下多了如下一些內容:

 

1. 本地運行

此時還是在該文件夾 路徑下的cmd里輸入(-p 5000 表示設置端口號為5000;若不寫這個,則默認為4000,但可能會出現端口號被占用的情況,導致網頁無法打開):

hexo server -p 5000

此時瀏覽器上輸入http://localhost:5000/,訪問到博客的默認界面:

 

其他相關的命令如下:

  • hexo clean 刪除public文件夾及其內容(public文件夾的內容即為上傳至GitHub Repositoriy的內容)
  • hexo generate hexo g 生成上傳至GitHub的內容,即public文件夾
  • hexo deploy hexo d 上傳至GitHub(需進行配置)

這時候,博客的基本設置(主題設置留待以后)都已弄好,接下來就是解決將博客內容上傳至GitHub上的問題。

每次修改配置或者添加新的博客,都要依次執行這3條命令。

2. 部署到github

打開Git Bash,配置個人信息,分別輸入如下命令,yourname即GitHub注冊時的用戶名,yourEmail即注冊時的郵箱賬號,以及生成秘鑰:

git config --global user.name "yourname"
git config --global user.email "yourEmail"
ssh-keygen -t rsa -C "yourEmail"

需要帶上雙引號

在秘鑰生成后,會有對應的存放文件地址,去該地址中,找到id_rsa.pub文件,復制里面的內容,粘貼至GitHub中,點擊右上角用戶頭像下的Settings,之后點擊左側的SSH and GPG keys,找到New SSH key點擊,輸入title,並將之前復制的內容粘貼到下面的key中,最后點擊Add SSH key,完成:

 

修改配置文件

去博客總目錄下的_config.yml文件中,找到deploy部分,添加如下(yourname就是GitHub的用戶名):

deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

再依次執行如下3條命令(每次修改配置都要執行這3條命令才生效):

  • hexo clean :刪除public文件夾及其內容(public文件夾的內容即為上傳至GitHub Repositoriy的內容)
  • hexo generate hexo g: 生成上傳至GitHub的內容,即public文件夾
  • hexo deploy hexo d: 上傳至GitHub(需進行配置)

此時就可以直接訪問https://yourname.github.io/

3. 添加博客

首先新建一篇博客:

  1. 在博客根目錄下打開git,輸入hexo new '博客名稱'
  2. 在source文件夾的_posts文件夾中找到剛剛創建的博客,進行編輯即可
  3. 編輯完成保存文件后,可以輸入hexo s命令進行預覽。

如果要更新到github,執行三連:

hexo clean
hexo g
hexo d

遇到的問題

hexo d命令報錯 ERROR Deployer not found: git

解決方法:

這是因為沒安裝hexo-deployer-git插件,在站點目錄下輸入下面的插件安裝就好了:

npm install hexo-deployer-git --save

 

 

參考鏈接:

1. https://asdfv1929.github.io/2017/11/18/hexo-next-blog/

2. https://blog.csdn.net/qq_21808961/article/details/84476504


免責聲明!

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



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