windows平臺利用hexo框架與github搭建個人部落格
總體搭建步驟
- 1.安裝Node.js
- 2.註冊GitHub賬號及安裝git
- 3.安裝hexo
- 4.hexo初始化及GitHub建立個人倉庫
- 5.將hexo部署到GitHub上
- 6.更改主題
- 7.釋出文章
1.安裝Node.js
Hexo是基於Node.js編寫的,所以需要安裝一下Node.js和裡面的npm工具。
npm是隨同Node.js一起安裝的包管理工具,能解決Node.js程式碼部署上的很多問題。
由於新版的nodejs已經集成了npm,所以之前npm也一併安裝好了。
百度搜索Node.js,在它的官網裡下載,選下面這個,一步一步預設安裝即可,安裝位置可自行更改。
安裝完之後win+R輸入cmd開啟命令視窗:
檢測node安裝是否成功:
node-v (返回版本號)
npm-v (返回版本號)
2.註冊GitHub賬號及安裝git
在GitHub官網上建立一個賬號,可以先了解一下基本知識:https://blog.csdn.net/weixin_41413511/article/details/105073305
git安裝:https://www.cnblogs.com/xueweisuoyong/p/11914045.html
git配置:https://zhuanlan.zhihu.com/p/114068278
注意在配置的最後一步,驗證git與GitHub連線的時候,在git bash中輸入
ssh -T [email protected]
如果是第一次連線,它會顯示如下,輸入yes就好了,就會提示You've successfully authenticated,這樣就算配置好了:
3.安裝hexo
首先需要用npm來安裝一下cnpm(類似於npm的包管理工具),用淘寶的映象源(如果錯誤就重來,因為連線可能不穩定,不要害怕多試幾次就可以了)。
npm install -g cnpm --registry=https://registry.npm.taobao.org
git bash中檢測 cnpm
(返回cnpm的資訊)
cnpm -v
(返回cnpm的版本資訊)
安裝hexo(如果失敗重新來過就可以了)
cnpm install -g hexo-cli
git bash中檢測 hexo-v
(返回hexo的版本資訊)
4.hexo初始化及GitHub建立個人倉庫
在本地任選一位置建立blog資料夾,建議不要在C盤(如果在以後的操作過程中出現問題無法解決就把這個資料夾刪掉直接重新來過就可以了)
在此資料夾下右鍵開啟git bash
hexo進行初始化
hexo init
啟動 hexo
hexo g
hexo s
這樣就可以在本地4000埠檢視自己的網站了
5.將hexo部署到GitHub上
首先在github中按照 自己的暱稱+.github.io建立一個倉庫(repository)(例:MangoRed.github.io)
注意:如果命名不正確的話,後面網站頁面可能會出現404。
接下來在Blog目錄下安裝一個hexo部署外掛,同樣在blog資料夾的git bash裡輸入
cnpm install --save hexo-deployer-git
再找到Blog檔案中的 _config.yml 檔案,使用編譯器或記事本開啟,找到如下
找到這部分程式碼,(原始的是沒有repo,和branch的,而且type後面也沒有東西)
對這段程式碼進行更改
type一個名字,建議寫成git方便識別
reporepository倉庫地址 將剛剛新建的github倉庫地址複製到這裡就可以了
branch分支這裡設定管理員 master
注意:在你建立好倉庫後,選擇SSH,將後面的地址複製作為repo 的東西。
更改以後記得進行儲存
然後在Git bash裡面輸入
hexo g //生成靜態文章
hexo d //部署文章
將本地檔案部署到github新建的倉庫中。
這樣通過訪問 https://+自己的倉庫名就可以訪問部署到github上的blog了。(例:https://MangoRed.github.io)
6.更改主題
主題可以在hexo官網裡themes選項找到,根據自己喜好選擇
這裡選擇fluid主題,點選進入它的GitHub介面後,如下根據提示下載最新版本
在Blog資料夾的theme裡解壓,把解壓後的檔案改名為fluid
必須如下修改Blog目錄下的_config.yml,這裡原來是預設主題landscape,要改為fluid。
然後在Blog目錄的git bash裡進行主題更新:
hexo clean //清除資料庫之類
hexo g //生成靜態網站
hexo d //將現在的檔案部署到github中
然後我們重新開啟部落格網址,會發現主題已經更改了: