GitHub+Hexo搭建個人博客(包括更改主題)(實踐成功)

大部分借鑑的是這位大佬的博客:https://blog.csdn.net/ainuser/article/details/77609180

1、Git安裝:

官網下載:https://git-scm.com/download/win(到此頁面後,稍微等一下會有下載彈框)

安裝git(按照圖上選擇即可)

至此,安裝git步驟結束。

 

2、下載Node.js

下載:http://nodejs.org/download/

安裝node.js

至此,node.js安裝步驟完畢。

 

3、安裝hexo

首先在本地磁盤中建立一個Hexo文件夾用於存儲本地文件(做本地文件保存以及測試使用)

然後在文件夾中右擊打開git命令框(我第一次直接在桌面右擊,所以命令行無效果)

在git命令框中安裝Hexo(npm install -g hexo)

初始化(hexo init(注:在文件夾裏再建一個空目錄)

輸入npm install 安裝所需要的組件:
在這裏插入圖片描述

 本地運行體驗

hexo g
hexo s

 

 

在這裏插入圖片描述


這裏的http://localhost:4000 就是地址,瀏覽器打開訪問即可看到效果哦:
在這裏插入圖片描述
這就是我們的博客了~

------------------------------------------------------------------------

到這裏本地已做好,接下來與Github相關聯

 

4、github

註冊github

地址: https://github.com/

與github相關聯:

打開git bash,輸入以下代碼進行配置(如果以前沒有配置過的話):

 git config --global user.email "你的郵箱"  回車

 git config --global user.name "你的用戶名"  回車


然後可以輸入 git config --list 來查看配置信息:

生成密鑰

ssh-keygen 指令生成密鑰

ssh-keygen -t rsa -b 4096 -C "你的郵箱@.com"

 

在這裏插入圖片描述

看下生成的文件:
在這裏插入圖片描述
這裏的id_rsa 是私鑰,自己保存好;id_rsa.pub 是公鑰,用來存放在其他服務器上的;

公鑰複製到github上:

複製公鑰:

cat ~/.ssh/id_rsa.pub

 

在這裏插入圖片描述

到github的設置界面:
在這裏插入圖片描述

新增SSH KEY:
在這裏插入圖片描述

在這裏插入圖片描述

在這裏插入圖片描述

 

到這已與Github已相聯。

 

接下來創建項目

在github上面創建項目(借用github服務器),項目名爲:xxx.github.io

 

 


5、修改_config.yml,與個人博客項目相關聯

先複製新建項目倉庫的地址,要注意這裏是“git@gihub”開頭的地址

 

在這裏插入圖片描述

 

附錄:

文件/文件夾    說明
node_modules    hexo所需要的node依賴包
public    存放的是生成的頁面
scaffolds    命令生成文章等的模板
source    用命令創建的各種文章
themes    博客主題
_config.yml    整個博客的配置
db.json    source解析所得到的
package.json    項目所需模塊項目的配置信息

然後,配置Deployment,在其文件夾中,找到文件,修改deploy屬性:

deploy:
  type: git
  repository: 倉庫的ssh地址 
  branch: master

 

 

6、安裝git擴展

在hexo倉庫的文件夾下,右鍵git bash here,安裝擴展:

npm install hexo-deployer-git --save

 

在這裏插入圖片描述

 

測試:新建一篇博客

hexo new post '博客的名字'

 

在這裏插入圖片描述

就在source/_posts 下面生成了一個md文件,我們修改裏面的內容,就是我們的博客內容:
在這裏插入圖片描述

 

生成以及部署

hexo d -g

 

在這裏插入圖片描述
在這裏插入圖片描述

訪問博客

大功告成,訪問剛剛記住的博客網址:https://whoknowsss.github.io/
在這裏插入圖片描述

 

7、使用域名訪問自己的博客

 購買域名 -- 解析

 

然後設置網站解析(讓你輸入的IP是這樣得到的)

鍵盤快捷鍵win+r輸入cmd回車/或者win+x->a->是

得到如下dos窗口後輸入ping ainusers.github.io(ainusers是我的名字,就是上面註冊github項目的名字即你的用戶名)

因爲你剛纔創建的項目已經被放到github服務器上面了,所以你這樣相當於租用了github的服務器

將IP輸入到解析網站的彈框中即可完成解析

還有三個需要設置的地方:

A:按照圖中格式(主機記錄、記錄值)設置

B:在D盤Hexo目錄下的source中建一個CNAME命名的文件(切記沒有後綴)

創建方式,

右鍵新建txt文本->輸入你購買的域名www.ainusers.top->保存關閉

然後快捷鍵F2或者右鍵該文本重命名->將.txt後綴去掉->會提示文件不可用繼續確定即可

內容如下所示

C:綁定域名

域名從.github.io後綴修改成你的域名後綴,纔可以說明你以上步驟正確。

我在網上找了一個例子,比如下圖所示

 

 

 

最後,來更換一下主題(Next主題):

打開git Bash,輸入我們博客在本地存放的位置,定位到我們博客的位置,比方說我的博客在F盤的blog文件夾裏我就需要輸入cd f:/blog。同理,請你cd你的博客位置(直接在博客目錄文件夾右鍵git bash here 也可)
注意:cd和盤符之間有空格
然後我們先得到next主題。
在git中繼續輸入git clone https://github.com/iissnan/hexo-theme-next themes/next
敲下回車。git就會自動幫你克隆最新的next主題到你的博客文件夾裏面。

得到next主題的過程


克隆完成之後,打開你的本地的博客文件夾就可以看到剛剛下載完成的next主題。

 

安裝主題

首先我們要修改博客的配置文件(注意,是整個博客的配置文件,也就是博客最底層目錄下的_config.yml因爲之後還會用到,所以我們在此約定一下,將這個配置文件叫做站點配置文件,這是從next的官方文檔裏學來的名稱),找到theme選項,把主題切換爲next .如下圖,將原來的landscape刪掉,改爲next,然後保存即可。
注意,theme:的“:”之後有空格~

回到git,輸入

hexo s --debug

進行本地測試

本地測試
老規矩,黑底兒白字兒一頓亂滾之後得到下圖就是正解了:

輸入第一個紅框中的地址訪問

輸入第一個紅框的地址本地訪問你的博客,第二個紅框中的操作來停止本地測試。

主題模板切換

打開你的博客地址/themes/next找到裏面的配置文件。

比方說我的就是在 F:\blog\themes\next裏面找到主題配置文件_config.yml(我們再約定一下,這個就叫做主題配置文件),然後ctrl+f搜索 scheme 關鍵字。 你會看到有三行 scheme 的配置,將你需用啓用的 scheme 前面的註釋符號 #刪除掉,把之前沒有#的模板前面加上#。也就是保證要有一個scheme前面沒有#
如下圖,

按照next的官方指導教程,我們順便修改一下站點配置文件裏面的語言(也就是整個博客的語言)將language後面的內容修改爲 zh-Hans。

注意,冒號之後必有空格。

修改語言

最後本地測試,git裏:

hexo s --debug

訪問:

localhost:4000

本地測試成功後:
然後就是更新操作了,也就是將新主題發佈到自己的網站上,操作如下:
還是在git裏
部署:

hexo d -g


字幕滾完,本地新博客也就可以訪問了。

 

附上實踐成果:https://www.wzxyfx123.cn/

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