一.使用git提交文件

參考： 從零開(kāi)始搭建個(gè)人博客（超詳細(xì)） - 知乎 致謝！

第一種：本地沒(méi)有 git 倉(cāng)庫(kù)

• 直接將遠(yuǎn)程倉(cāng)庫(kù) clone 到本地；
• 將文件添加并 commit 到本地倉(cāng)庫(kù)；
• 將本地倉(cāng)庫(kù)的內(nèi)容push到遠(yuǎn)程倉(cāng)庫(kù)。

$ ssh -T git@github.comHi xidianswq! You've successfully authenticated, but GitHub does not provide shell access.
$ git clone git@github.com:xidianswq/switch_homepage.gitCloning into 'switch_homepage'...remote: Enumerating objects: 3, done.remote: Counting objects: 100% (3/3), done.remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)Receiving objects: 100% (3/3), done.
$ cd ./switch_homepage
$ git statusOn branch mainYour branch is up to date with 'origin/main'.Untracked files:(use "git add <file>..." to include in what will be committed)test.txtnothing added to commit but untracked files present (use "git add" to track)
$ git add test.txt
$ git commit -m test.txt "test.txt"[main 4463650] test.txt1 file changed, 0 insertions(+), 0 deletions(-)create mode 100644 test.txt
$ git logcommit 4463650540e1bc66dc16aedc8b132e11b5e469ed (HEAD -> main)Author: xidianswq <3209507800@qq.com>Date:   Thu Feb 6 22:31:41 2025 +0800test.txtcommit 8f09f668066393a7b16b2c8c5df31e0d6a64eaa1 (origin/main, origin/HEAD)Author: xidianswq <94434249+xidianswq@users.noreply.github.com>Date:   Thu Feb 6 21:32:08 2025 +0800Initial commit
$ git push origin mainEnumerating objects: 4, done.Counting objects: 100% (4/4), done.Delta compression using up to 16 threadsCompressing objects: 100% (2/2), done.Writing objects: 100% (3/3), 269 bytes | 269.00 KiB/s, done.Total 3 (delta 0), reused 0 (delta 0), pack-reused 0To github.com:xidianswq/switch_homepage.git8f09f66..4463650  main -> main

---

第二種：本地有 Git 倉(cāng)庫(kù)，并且我們已經(jīng)進(jìn)行了多次 commit 操作

• 建立一個(gè)本地倉(cāng)庫(kù)進(jìn)入，init 初始化；
• 關(guān)聯(lián)遠(yuǎn)程倉(cāng)庫(kù)；
• 同步遠(yuǎn)程倉(cāng)庫(kù)和本地倉(cāng)庫(kù)；
• 將文件添加提交到本地倉(cāng)庫(kù)；
• 將本地倉(cāng)庫(kù)的內(nèi)容 push 到遠(yuǎn)程倉(cāng)庫(kù)。

$ ssh -T git@github.comHi xidianswq! You've successfully authenticated, but GitHub does not provide shell access.
$ cd switch_homepage/public/switch_homepage/
$ git remote add origin git@github.com:xidianswq/switch_homepage.git
$ git add test2.txt
$ git commit -m "test2.txt"
$ git push origin masterEnumerating objects: 3, done.Counting objects: 100% (3/3), done.Writing objects: 100% (3/3), 207 bytes | 207.00 KiB/s, done.Total 3 (delta 0), reused 0 (delta 0), pack-reused 0remote:remote: Create a pull request for 'master' on GitHub by visiting:remote:      https://github.com/xidianswq/switch_homepage/pull/new/masterremote:To github.com:xidianswq/switch_homepage.git* [new branch]      master -> master/

兩種由于創(chuàng)建的主體不同，如果關(guān)聯(lián)同一倉(cāng)庫(kù)即會(huì)產(chǎn)生分支Branches，例如main和master兩個(gè)版本

---

二.Hexo部署個(gè)人博客

參考： 個(gè)人博客第5篇——安裝node.js和Hexo - 知乎 致謝！

1.本地靜態(tài)部署

• 完成git通過(guò)ssh連接github步驟
• node官網(wǎng)下載安裝
• 用 node -v 和 npm -v 命令檢查版本
• 設(shè)置npm在安裝全局模塊時(shí)的路徑和環(huán)境變量(npm install X -g時(shí)的安裝目錄)：

npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

• 設(shè)置環(huán)境變量

npm install webpack -g
github創(chuàng)建XXX.github.io倉(cāng)庫(kù)
npm install -g hexo-cli
hexo init
hexo g
hexo s	#static deploy

解決 bash: hexo: command not found：
參考： 完美解決 bash: hexo: command not found-CSDN博客

---

2.動(dòng)態(tài)部署及后續(xù)更新

• 修改hexo根目錄_config.yml文件

	deploy:type: gitrepository: XXX.github.io.git  #你的倉(cāng)庫(kù)地址branch: master

npm install hexo-deployer-git --save

重新部署網(wǎng)頁(yè)三條指令：

• hexo clean #清除緩存文件 db.json 和已生成的靜態(tài)文件 public（同時(shí)檢查語(yǔ)法）
• hexo g #生成網(wǎng)站靜態(tài)文件到默認(rèn)設(shè)置的 public 文件夾(hexo generate 的縮寫(xiě))
• hexo d #自動(dòng)生成網(wǎng)站靜態(tài)文件，并部署到設(shè)定的倉(cāng)庫(kù)(hexo deploy 的縮寫(xiě))

注：打開(kāi)XXX.github.io網(wǎng)頁(yè)時(shí)使用默認(rèn)分支branch，可在設(shè)置內(nèi)設(shè)置默認(rèn)分支
（參考： github：master提交項(xiàng)目到遠(yuǎn)程倉(cāng)庫(kù)出現(xiàn)“There isn’t anything to compare.”_there isn鈥檛 anything to compare.-CSDN博客 ）。

---

三.安裝及優(yōu)化NexT主題

1.安裝NexT主題

參考目錄：
個(gè)人博客第7篇——設(shè)置next主題 - 知乎 ；
個(gè)人博客第8篇——優(yōu)化主題（持續(xù)更新） - 知乎
致謝！

• 在網(wǎng)頁(yè)根目錄：git clone https://github.com/theme-next/hexo-theme-next themes/next 下載主題
• 打開(kāi)根目錄下的\_config.yml(稱為站點(diǎn)配置文件)，修改主題（注意冒號(hào)后都要有空格）：

# Site
title: XXX  #標(biāo)題
subtitle: ''
description: 選擇有時(shí)候比努力更重要     #簡(jiǎn)介或者格言
keywords:
author: XX     #作者
language: zh-CN     #主題語(yǔ)言
timezone: Asia/Shanghai    #中國(guó)的時(shí)區(qū)# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主題改為next

• 打開(kāi)目錄Blog/themes/next/下的_config.yml（稱為主題配置文件），選擇需要使用的主題，注釋其他的

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini    #這是我選的主題

• 回到根目錄打開(kāi)Git Bash，輸入如下三條命令：

hexo clean & hexo g & hexo d

---

2.優(yōu)化主題

參考：

[1] 個(gè)人博客第8篇——優(yōu)化主題（持續(xù)更新） - 知乎
[2] 在hexo博客中插入圖片的方法_hexo插入圖片-CSDN博客

致謝！

• 下載主題next：

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

• 參考博客中錯(cuò)誤：
  • 第6個(gè)，設(shè)置背景圖片，添加內(nèi)容的時(shí)候，url(/images/…)，斜杠一定不要漏加

其他：

• 新建文章時(shí)，在相同目錄下創(chuàng)建同名文件夾（便于圖片管理）

  • 打開(kāi)站點(diǎn)配置文件_config.yml，搜索post_asset_folder字段，設(shè)置其值為true
  • 安裝hexo-asset-image：npm install hexo-asset-image --save
  • 此時(shí)hexo new "fileName"會(huì)在/source/_posts 目錄下創(chuàng)建同名的文件夾
  • 只需在 md 文件里使用  ，無(wú)需路徑名就可以插入圖片。

  原文鏈接： Hexo框架下用NexT(v7.0+)主題美化博客_next主題魔改教程-CSDN博客

• 其他參考：

  hexo+next添加鼠標(biāo)點(diǎn)擊和打字特效-CSDN博客

  hexo博客工具屏蔽上傳一些私人文章_hexo markdown設(shè)定文章不發(fā)布-CSDN博客

  Hexo本地預(yù)覽與部署樣式不統(tǒng)一的幾種可能的解決思路 | 云上時(shí)記

  Hexo 博客上手入門(mén)指南、性能優(yōu)化、界面美化、擴(kuò)展功能、各種疑難雜癥等解決方案全系列合輯 | 竹山一葉

3.NexT主體顏色更改

• 在網(wǎng)頁(yè)上右鍵想要更改的樣式，點(diǎn)擊檢查（或F12，在網(wǎng)頁(yè)元素 “flex” 中尋找對(duì)應(yīng) html 代碼）
• 在樣式中找到對(duì)應(yīng)規(guī)則，復(fù)制關(guān)鍵字，在vscode中尋找對(duì)應(yīng)段代碼，進(jìn)行相應(yīng)修改
• 一些常用的樣式配置文件：
  • ~\themes\next\source\css\\variables\base.styl
  • ~\themes\next\source\css\\variables\Pisces.styl
  • ~\themes\next\layout\macro\post.swig
  • ~\themes\next\layout\\partials\footer.swig
• themes\next\source\css\_common\outline\header\site-meta.styl

4.側(cè)邊欄“當(dāng)前位置”顯示樣式更改

• vscode搜索.sidebar-nav-active，此為點(diǎn)擊后的顯示效果，可更改顏色與字體

.sidebar-nav-active {border-bottom-color: $sidebar-highlight;color: $sidebar-highlight;font-weight: bold;font-size: 1.05em;font-style: italic;&:hover {color: $sidebar-highlight;}
}

• 同理，更改.active-current > a，如下：

.active-current > a {color: $sidebar-highlight;font-weight: bold;font-size: 1.25em;font-style: italic;&:hover {color: $sidebar-highlight;}}

5.更改字體

（參考： 字體設(shè)置 - Hexo-NexT ）

• 在 Browse Fonts - Google Fonts 網(wǎng)站點(diǎn)擊想使用的字體

  • 點(diǎn)擊 Get font、 Get embed code
  • 復(fù)制Embed code in the <head> of your html內(nèi)的內(nèi)容
  • 復(fù)制字體: CSS class內(nèi)的內(nèi)容

• 修改~\themes\next\layout\_partials\head\head.swig，在{{ next_font() }}下添加之前復(fù)制的內(nèi)容

  <link href="https://fonts.googleapis.com/css?family=Noto+Serif+SC|Roboto&display=swap" rel="stylesheet">

• 在需要修改字體的地方添加或修改font-style，如何搜索修改位置見(jiàn)上NexT主體顏色更改

最后，歡迎參觀我的主頁(yè)！