1. 程式人生 > 程式設計 >手把手教你使用Hexo+GitHub搭建自己的個人部落格網站

手把手教你使用Hexo+GitHub搭建自己的個人部落格網站

安裝nodejs環境

這個直接搜尋安裝即可,安裝完成之後,通過如下命令檢測環境變數是否安裝成功:

λ node -v
# 輸出版本號
v12.13.1
複製程式碼

正確輸入版本號即可。

安裝cnpm

cnpm是淘寶映象,可以加快依賴的安裝速度

npm install cnpm -g --registry=https://registry.npm.taobao.org

# 輸出
C:\Users\xxxxx\AppData\Roaming\npm\cnpm -> C:\Users\xxxxx\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ [email protected]
added 680 packages from 933 contributors in 24.882s
複製程式碼

其他

Git、GitHub就不多說了

安裝 Hexo

cnpm install -g hexo-cli
複製程式碼

可以通過如下命令檢查是否安裝成功

λ hexo -v

"node"  "C:\Users\xxxxxx\AppData\Roaming\npm\\node_modules\hexo-cli\bin\hexo" -v
hexo-cli: 3.1.0
os: Windows_NT 10.0.18362 win32 x64
node: 12.13.1
v8: 7.7.299.13-node.16
uv: 1.33.1
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 72
nghttp2: 1.39.2
napi: 5
llhttp: 1.1.4
http_parser: 2.8.0
openssl: 1.1.1d
cldr: 35.1
icu: 64.2
tz: 2019c
unicode: 12.1
複製程式碼

建立本地部落格

hexo init gitpage
複製程式碼

出現下面提示表示初始化成功了

執行完之後目錄內容

image

進入gitpage目錄,執行如下命令

cd gitpage
cnpm install
複製程式碼

這樣,hexo就安裝完成了。

Hexo 基本用法

啟動

hexo server 
# or
hexo s
複製程式碼

通過瀏覽器訪問http://localhost:4000即可檢視效果:

新建部落格

hexo new "My First Post"
複製程式碼

在source_posts 路徑下,會有一個 My-First-Post.md 的檔案。 編輯這個檔案,然後儲存。

回到命令列,輸入

hexo g

複製程式碼

建立靜態檔案

啟動伺服器,檢視效果

hexo server

複製程式碼

啟動之後,即可看到自己新建立的這篇文章。

部署到GitHub

首先在GitHub建立一個倉庫,倉庫名叫"<username>.github.io"。複製倉庫地址。開啟gitpage目錄下的_config.yml 檔案, 找到 #Deployment,填入以下內容:

deploy:  
	  type: git  
	  repository: https://github.com/Happy4Java/happy4java.github.io.git
	  branch: master

複製程式碼

儲存,然後在命令列執行如下語句:

cnpm install hexo-deployer-git --save

複製程式碼

執行完之後,即可執行部署命令:

hexo d

複製程式碼

可能需要輸入github的賬號密碼,輸入之後即可部署完成。

檢視效果

訪問https://happy4java.github.io即可檢視到效果。

使用 Next 主題

進入gitpage資料夾下的themes資料夾,執行

git clone https://github.com/theme-next/hexo-theme-next.git

複製程式碼

這樣,該主題的檔案就全部克隆到 gitpage\themes\next 下面。

修改部落格配置檔案

  • 開啟 _config.yml配置檔案
  • 找到 theme:
  • 把 Hexo 預設的 lanscape 修改成 hexo-theme-next 。
  • 找到 # Site,新增部落格名稱,作者名字等。
  • language 後面填入 en 或者 zh-CN,選擇英文或者中文。
  • 找到 # URL,填入 url。比如 url: https://happy4java.github.io

重新生成部署

hexo g
hexo d

複製程式碼

訪問https://happy4java.github.io即可檢視效果

原創宣告

本文為【Happyjava】的原創,歡迎轉載,但需註明出處