使用Hexo搭建基於Github的個人博客【小白教程】


1 基礎

在開始之前,如果你下面的 技術工具 有所瞭解或比較熟悉,可以加快你的進度:

  • Github
  • 版本控制工具 Git
  • Hexo
  • node
  • 包管理工具 npm/yarn

如果你不太熟悉這些,也沒有很大的關係,至少先搭建起來是沒有問題的。

博主的博客搭建完成,歡迎踩踩~ 小鯉魚

2 創建Github遠程倉庫

註冊GitHub賬號 (Sign up)

只需要一個能夠驗證的郵箱即可,填寫相關信息之後會發郵件驗證。

Github官網
在這裏插入圖片描述

新建倉庫 (Create Repository)

註冊完成之後登錄 (Sign in)
在這裏插入圖片描述
登錄之後選擇右上角的 + 號選擇新建倉庫 (New Repository)
在這裏插入圖片描述
【注意】
倉庫名 (Repository name)必須是 username.github.io 的形式,username 就是GitHub賬號的 username
然後點擊 Create Repository 就可以創建了。
在這裏插入圖片描述
創建之後,點擊 Setting 往下翻,找到 Github Pages 可以看到 your site is published at https://username.github.io 就說明成功了。這個地址就是你的私人博客的地址。
在這裏插入圖片描述
在這裏插入圖片描述
【tips】
之前是直接新建了一個名爲 username.github.io 的倉庫,如果你之前存在其他的倉庫,那你把它重命名成 username.github.io 也是可以達到同樣的效果。

3 使用Hexo創建本地項目

安裝Hexo

需要先全局安裝 hexo,這裏使用的是 npm 安裝方式 (國內使用cnpm更快)

npm install hexo-cli -g

安裝完成之後,在命令行工具輸入 hexo -v 檢查是否安裝成功。
如果你能看到下面的結果就說明成功了。
如果看到 'hexo' 不是內部或外部命令,也不是可運行的程序或批處理文件。 說明環境變量存在一些問題。
在這裏插入圖片描述

hexo常用命令

如果只是搭建博客的話,下面的幾個命令就足夠了:

#初始化一個項目
hexo init

#生成靜態網頁文件,g是generate的縮寫 
hexo g

#運行到服務器端,s是server的縮寫
hexo s

#部署到遠端GitHub
hexo deploy

#清理生成的文件
hexo clean

創建本地項目

新建一個空的文件夾,雙擊打開,右鍵 Git Bash Here ,或者你也可以手動切換到這個目錄下,執行 hexo init
在這裏插入圖片描述
你有可能會卡死在 Install dependencies 的地方,那麼你需要檢查 yarn的安裝與環境配置。
現在在你的本地項目目錄下執行hexo ghexo s 就可以在本地運行了。
默認的運行地址是 http://localhost:4000
hexo g 會幫你生成靜態的網頁文件
在這裏插入圖片描述
hexo s 會幫你部署並運行起來
在這裏插入圖片描述
在這裏插入圖片描述

熟悉目錄結構

node_modules #本地依賴模塊
public #hexo g生成的目錄,包含靜態網頁文件,就是看到的博客
source #源文件,用來存放我們的.md源文件
themes #主題文件夾,裏面存放主題
_config.yml #項目配置文件,用來配置博客具體的顯示內容等
db.json #存儲一些用到的數據
package.json #依賴配置

.deploy_git #hexo s部署到遠端的時候會生成的文件夾,是根據public文件夾生成的,內容是差不多的

在這裏插入圖片描述
【博客文件文件夾】
最基礎的我們要知道 source > _post 文件夾是我們存放博客 .md 文檔的地方,hexo 會根據這裏的文件生成對應的靜態博客網頁。

4 推送到遠端 Github

安裝 deployer 插件

npm install hexo-deployer-git --save

配置_config.yml

打開項目的_config.yml 文件,找到 deploy,這裏使用的是 SSH 的方式。
在這裏插入圖片描述
打開 Github 上面對應的倉庫,選擇 clone or download 複製你的 SSH key,分支默認 master
在這裏插入圖片描述

生成公私鑰

在推送的時候需要用到。

ssh-keygen -t rsa -C "註冊git使用的郵箱"

一路回車,看到下面的結果說明成功。
在這裏插入圖片描述

添加公鑰到 Github

找到生成的 id_rsa.pub 公鑰文件,複製公鑰內容到 GitHub
步驟:Setting -> Deploy keys -> add deploy key -> Add key
在這裏插入圖片描述
在這裏插入圖片描述
記得勾選寫權限,即允許推送 (Allow write access)
在這裏插入圖片描述

開始推送

hexo deploy

推送完成就可以在GitHub上看到剛剛推送的內容,同時在博客地址也可以看到。

5 進階優化

更換主題

Hexo主題官網
選擇自己喜歡的主題,克隆到本地,放在 themes 文件夾下;
修改 _config.yml 文件中的 theme 字段爲 主題的名字就可以了。

其他

還支持添加 評論系統 網站訪問統計 等,有些興趣的小夥伴可以研究。

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