用hexo搭建github博客詳細(xì)全圖解

在交流中發(fā)現(xiàn)身邊大佬們都有自己的博客主頁，還有一位大佬買了自己的域名，看著就很高大上啊，趕緊注冊了個(gè)GitHub帳號(hào)跟著大佬們一起玩兒更博，從折騰了差不多大半天，已經(jīng)能成功更博到https://tidy1993.github.io/啦，美滋滋！廢話不多說趕緊開始！
在配置過程中出現(xiàn)過幾個(gè)錯(cuò)誤，綜合了幾個(gè)大神的帖子進(jìn)行安裝配置，如果我的某些敘述不清楚的話，大家可以看看這幾個(gè)大佬的，寫的都很詳細(xì)哦！感謝分享！
參考博客如下：
https://blog.csdn.net/gdutxiaoxu/article/details/53576018
https://shirley5li.me/2017/08/06/hello-world/
https://blog.csdn.net/weixin_39879178/article/details/80319392
http://m.itdecent.cn/p/b06222fbc135

1.node.js下載安裝

http://nodejs.cn/download/
建議：官網(wǎng)下載最新版本，如果不是最新版本后面可能會(huì)提示版本太低


一路默認(rèn)，默認(rèn)安裝在C盤，安裝完成之后cmd中輸入
node -v查看是否安裝成功和相應(yīng)版本

2.git下載安裝

https://git-scm.com/downloads
建議：官網(wǎng)下載最新版本，如果不是最新版本后面可能會(huì)報(bào)錯(cuò)
同上默認(rèn)安裝


按照下圖進(jìn)行選擇，將會(huì)使得Git安裝程序在系統(tǒng)PATH中加入Git的相關(guān)路徑，使得你可以在CMD界面下調(diào)用Git，不用打開Git Bash了。

檢查一下Git是不是安裝正確了，打開命令行，輸入：

3.github賬戶的注冊和配置

  • 注冊很簡單，就用戶名+郵箱+密碼，然后郵箱驗(yàn)證哈，注意的是給自己取一個(gè)方便記住的用戶名！
  • 配置：

3.1創(chuàng)建代碼庫

選擇New repository


在Repository name下填寫yourname.github.io，Description (optional)下填寫一些簡單的描述（不寫也沒有關(guān)系），如圖所示：

3.2 代碼庫設(shè)置

正確創(chuàng)建之后，你將會(huì)看到如下界面：


點(diǎn)擊界面右側(cè)的Settings，你將會(huì)打開這個(gè)庫的setting頁面，向下拖動(dòng)，直到看見GitHub Pages，如圖：
這里我們需要點(diǎn)擊Choose a theme任意選擇一個(gè)選擇主題，然后界面會(huì)跳轉(zhuǎn)到倉庫，我們看到有兩個(gè)文件如下：


此時(shí)若再查看setting，我們會(huì)看到開啟GitHub Pages之后得到的域名如下：

我們就可以使用https://UserName.github.io，訪問自己的博客網(wǎng)站了

4.安裝和配置Hexo

4.1安裝

在E盤或者其他盤的根目錄下新建一個(gè)名為hexo的文件夾


右鍵單擊，單擊Git Bash Here,打開git命令窗口中輸入以下命令：
npm install hexo-cli -g

至此出現(xiàn)第1個(gè)問題：

npm WARN engine hexo-fs@0.2.3: wanted:{"node ":">=6.9.0"}(current:{"node":"4.2.3","npm":"2.14.7"})

提示node的版本不夠，所以前面提示大家要安裝比較新的版本！重新去官網(wǎng)下載然后安裝！


現(xiàn)在再來查看版本已經(jīng)是v10.2.0

,然后再次
npm install hexo-cli -g
19.png

至此出現(xiàn)第2個(gè)問題：
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

很多人也貌似出現(xiàn)了這個(gè)問題，參考了好幾個(gè)帖子：
https://segmentfault.com/q/1010000008223855
https://www.imooc.com/qadetail/177063
我參照改了源,也不確定這個(gè)是否有用
npm config set registry https://registry.npm.taobao.org
然后輸入
npm install hexo --save
hexo -v
然后看到如圖，并不和其他帖子的hexo -v之后顯示一樣有hexo:版本，如果你的有這行，證明你安裝對了，如果你的也沒有，在接下來配置會(huì)嘗試用一種方法解決！

別人的圖.png

我的圖.png

4.2配置

初始化hexo init

目錄是剛剛創(chuàng)建的hexo目錄下！即/e/hexo

21.png

再次查看，仍舊沒有hexo:(如果你的有，請略過下面新建文件夾的步驟)
err2.png

于是，在E盤重新建了一個(gè)文件夾HexoBlog,這個(gè)文件夾用來寫后面需要發(fā)布的markdown文件，前面的hexo文件夾就當(dāng)做安裝目錄吧！
切換到cd /e/HexoBlog

然后接下來

初始化hexo init

安裝插件npm install

如果npm install不能完全安裝好，就參照下面的圖，一個(gè)個(gè)自己安裝吧！
在此，引用一下一位仙女的筆記
https://shirley5li.me/2017/08/06/hello-world/


提前安裝好應(yīng)有的插件！不然可能后面會(huì)報(bào)錯(cuò)！

生成hexo g

-###運(yùn)行serverhexo s
如果正確的話將會(huì)看到如下提示信息
INFO Hexo is running at [http://0.0.0.0:4000/](http://0.0.0.0:4000/). Press Ctrl+C to stop.


在瀏覽器中打開http://localhost:4000/，你將會(huì)看到：


到目前為止，Hexo在本地的配置結(jié)束。

5.將Hexo與github page 聯(lián)系起來

5.1配置git

繼續(xù)在/e/HexoBlog目錄下，輸入

git config –-global user.name “Tidy1993”  //(“”的賬號(hào)是剛才Github里面自己注冊的賬號(hào))   
git config –-global user.email “354122535@qq.com” //(""的郵箱是你自己注冊的郵箱)

5.2配置和測試SSH

然后，切換到

cd ~/.ssh   
ssh-keygen -t rsa -C “354122535@qq.com” //打自己的郵箱

按照下圖，回車，然后輸入自己登陸github的密碼兩次，直到生成圖示


去到C盤找到.ssh文件夾，打開id rsa.pub文件，復(fù)制里面代碼




把剛剛粘貼的密碼粘貼到上面key中，點(diǎn)擊Add SSH key
測試ssh設(shè)置是否成功
ssh -T git@github.com
image.png

5.3 配置Deployment

手動(dòng)找到/e/HexoBlog目錄下的_config.yml文件，然后右鍵點(diǎn)擊，打開文件


在文件最后deploy：這里加上下面代碼

deploy:
  type: git
  repo: git@github.com:Tidy1993/Tidy1993.github.io.git
  branch: master

我的用戶名是Tidy1993上面的yourname改成你自己的

6.寫第一篇博客，同步到github

繼續(xù)在/e/HexoBlog目錄下輸入
hexo new post "article title"


然后在對應(yīng)的目錄下，會(huì)生成對應(yīng)的.md后綴的文件

我還沒用markdown的編輯器，暫時(shí)用notepad打開文件，然后前面---之間的內(nèi)容不能刪，title就是一會(huì)兒顯示在github上的title,后期可以改，然后在第二個(gè)---之后鍵入內(nèi)容，要用markdown語法！完了之后保存！

回到git命令行中，輸入

hexo g   // 生成
hexo s   // server


在瀏覽器輸入：localhost:4000在本地查看剛剛新建的md文件，在此可以看到已經(jīng)在本地了
38.png

回到git命令行中，輸入

hexo d  // develop部署
  • 如果這里運(yùn)行 hexo d之后出現(xiàn)錯(cuò)誤
    ERROR Deployer not found: git
    安裝這個(gè)插件！
    npm install --save hexo-deployer-git
    正確運(yùn)行的話會(huì)提示輸入github密碼

    正確之后會(huì)顯示如下，表示成功同步到github帳號(hào)

    在瀏覽器輸入：https://tidy1993.github.io對應(yīng)的github域名，就可以看到效果啦！

    至此，終于有自己的github帳號(hào)并且有博啦！開心！雖然過程挺痛苦的！

總結(jié)一下出現(xiàn)的問題：

  • 問題1：

npm WARN engine hexo-fs@0.2.3: wanted:{"node ":">=6.9.0"}(current:{"node":"4.2.3","npm":"2.14.7"})
提示node的版本不夠，所以前面提示大家要安裝比較新的版本！重新去官網(wǎng)下載然后安裝！

  • 問題2：

npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

很多人也貌似出現(xiàn)了這個(gè)問題，參考了好幾個(gè)帖子：
https://segmentfault.com/q/1010000008223855
https://www.imooc.com/qadetail/177063

  • 問題3：

如果輸入hexo -v沒能出現(xiàn)對應(yīng)版本提示，新建個(gè)文件夾，記得在對應(yīng)的目錄下

npm install hexo-cli -g
npm install hexo --save
hexo -v
hexo init
npm install
hexo g
hexo s

  • 問題4：

配置完git,記得配置SSH，在ssh配置時(shí)輸入的密碼是你登錄github的密碼，不要自己又重新設(shè)一個(gè)密碼！

  • 問題5：

配置development的時(shí)候，在自己建立的hexo文件夾下面找_config.yml文件，因?yàn)槲蚁群蠼⒘藘纱挝募A，所以我就改了兩次，講道理，應(yīng)該只有hexo一個(gè)文件夾，下面需要改

  • 問題6：

新建一個(gè)博客，必須在命令行中取名字，不能寫好.md文件放在目錄下而不執(zhí)行
hexo new "article title"
完了之后必須
hexo g
hexo d
hexo s不是必須的，只是為了在同步上去github之前在本地瀏覽一下是否合適，如果覺得沒問題，可以忽略這一步，直接g和d.

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容