hexo+github搭建個人博客(2020年最新版、含詳細步驟過程、作者親自搭建)


hexo+github搭建個人博客

一、准備工作

1、申請一個github賬號

2、安裝node.js軟件

版本:node-v12.16.3-x64

網址:https://nodejs.org/en/

3、安裝git

版本:Git 64位_2.20.1.1

網址:https://git-scm.com/download/win

4、驗證是否安裝成功

按win+R快捷鍵,輸入cmd,回車,按如圖所示操作。如果顯示版本號,則表明安裝成功。否則失敗。

二、創建github倉庫##

1、創建倉庫

1、登錄github后,點擊網頁右上角+號,選擇“New repository”

2、新建一個名為你的用戶名.github.io的倉庫。

注意你的gitHub用戶名是啥,這里的用戶名就必須是啥。假設用戶名是blog,那么倉庫名就必須是blog.github.io

3、復制倉庫ssh地址

1)如果出下如圖界面,即黃色背景字樣。表示ssh沒有安裝。

2)那么打開git,輸入命令

$ cd ~/. ssh #檢查本機已存在的ssh密鑰

如圖所示

如果顯示

No such file or directory #說明密鑰沒有安裝。

3)執行如下命令

ssh-keygen -t rsa -C "郵件地址"

如圖所示

出現如圖字樣,說明安裝成功,再連續回車3次即可。安裝成功會顯示密鑰路徑,根據路徑找到文件,打開id_rsa.pub文件,將其內容全部復制。

如圖所示

4)打開github網站,點擊設置,如圖。粘貼上一步復制的內容到Key位置,Title隨便輸入。

如圖所示

5)再復制ssh地址。

如圖所示

4、測試是否連接成功

輸入

$ ssh -T git@github.com

注意:郵箱地址不用改。

出現Hi jiangnan1q! You've successfully authenticated, but GitHub does not provide shell access.
表明成功。

如圖所示

三、安裝hexo

1、安裝npm

命令npm install -g hexo-cli

如圖所示

2、在安裝hexo的文件夾,新建一個文件夾,名字隨便取

3、初始化剛才新建的文件夾

命令hexo init blog

如圖所示

4、重新查看新建的blog文件夾

如圖所示

5、配置文件

注意:這一步是上傳github前的配置操作。

打開blog文件下的_config.yml文件,按照圖片配置就行,其中repository就是此圖中的地址

需要特別注意的地方是,冒號后面必須有一個空格,否則可能會出問題。

如圖所示

配置前

如圖所示

配置后

如圖所示

6、修改主題(此項非必須)

打開網址

https://hexo.io/themes/

輸入以下命令

$ cd /f/blog/

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

修改配置文件_config.yml

如圖所示

將landscape改為yilia

四、發布

在git中依次執行以下命令

$ npm install hexo-deployer-git --save

$ hexo g # 生成

$ hexo s # 啟動服務

hexo s是開啟本地預覽服務,打開瀏覽器訪問 http://localhost:4000 即可看到內容。

如圖所示

配置好所有文件以后

$ hexo d # 上傳

五、新建博客

1、打開git,進入到blog目錄

hexo new 'my-first-blog'

如圖所示

2、打開md文件,就可以寫博客了,使用md語法寫的

3、執行第四章的命令發布

注意:如果沒有馬上看到效果,請等候幾分鍾到半小時。

六、其他

本文中的blog是自己取的名字,自行對應更改,如果取得名字是book,那么將本文中的blog替換為book就行。

出現中文亂碼,該怎么解決

修改blog下的配置文件,_config.yml。將其中的language: en改為language: zh-CNlanguage: zh-Hans

舉例:

打開F:\blog\themes\landscape\languages

如圖所示

可以選擇對應的語言編碼。

插入圖片無法顯示,該怎么解決

請嚴格按照如下步驟配置

第一步:修改配置文件

blog文件夾下的_config.yml文件中將post_asset_folder: false改為true

注意:冒號后必須空一格

第二步:git下執行以下命令安裝

npm install https://github.com/7ym0n/hexo-asset-image --save

第三步:圖片插入方式

{% asset_img 圖片名.jpg This is an 圖片名 image %}

注意:This is an 圖片名 image可以任意文字


免責聲明!

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



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