博客搭建

之前搭建個(gè)人博客的時(shí)候，是借助github pages和Hexo而建成的惭蟋，在建站過程中看到一篇介紹特別詳細(xì)的博客教程，如果有建立個(gè)人博客的想法的同學(xué)可以參考這篇博客驻襟。

建博客的時(shí)候還踩了點(diǎn)雷真友。一開始想用clover這個(gè)主題的，但是執(zhí)行hexo s就一直報(bào)錯(cuò)挪鹏，后來看到網(wǎng)上也有用clover卻不顯示的见秽，就用vs code看了下，clover的源程序報(bào)錯(cuò)讨盒，然后改用了white解取。

關(guān)于white主題，我剛開始用的樣子返顺，主頁(yè)是簡(jiǎn)潔的幾行字禀苦，博客頁(yè)則是現(xiàn)在white主題主頁(yè)的樣子蔓肯。而在我更新white主題后，一開始有點(diǎn)不適應(yīng)振乏，但越看越喜歡蔗包，相較之前，博客的顯示更直接慧邮。

然后就是封面和圖床调限，封面的設(shè)置在網(wǎng)上找到了個(gè)說是photo，但是沒用误澳，就去問了原作者耻矮，屬性是cover。圖床的話忆谓，希望picgo稍微優(yōu)化下裆装，最后選擇用的是百度到的路過圖床，這個(gè)圖床活得挺久但隔幾年好像就會(huì)換個(gè)網(wǎng)址陪毡。

github在國(guó)內(nèi)總是隨緣登陸米母，但是網(wǎng)易u(yù)u加速器可以免費(fèi)加速github等學(xué)術(shù)資源，一開始使用的時(shí)候毡琉，uu加速器彈出的學(xué)術(shù)資源窗口的熱門榜單第一是github铁瞒，但幾天后就沒了，不過依然可以加速與github的連接桅滋。

但是博客的使用還是有點(diǎn)麻煩慧耍，所以還是用國(guó)內(nèi)的這些平臺(tái)會(huì)舒服點(diǎn)。

更換電腦時(shí)丐谋，轉(zhuǎn)移本地博客方法

換新電腦時(shí)芍碧，會(huì)需要將本地博客文件挪到新電腦上，以下幾行則是之前嘗試出的一個(gè)比較快速的轉(zhuǎn)移本地博客方法：

①下載git号俐、nodejs

②安裝Hexo（npm install -g hexo-cli）

③創(chuàng)建本地博客（hexo init myBlog||cd myBlog||npm install）

④將該新建本地博客theme文件夾泌豆、source文件夾、_config文件替換為舊電腦本地博客的文件（可執(zhí)行hexo s測(cè)試本地博客是否正常運(yùn)行）

⑤配置SSH KEY

⑥在本地博客文件下安裝部署插件（npm install hexo-deployer-git --save）并完成上傳（hexo g -d）

hexo本地圖片

之前建個(gè)人博客的時(shí)候想過是不是可以使用本地吏饿，通過git一起上傳到github踪危，于是嘗試并總結(jié)了點(diǎn)問題

將圖片放入themes/（主題）/source文件夾里，那么在posts文件夾的博客文章里調(diào)用圖片的路徑為/themes/（主題）/source/（圖片名稱.圖片后綴）猪落。這樣在vs code預(yù)覽里沒問題贞远，但是上傳后發(fā)現(xiàn)不顯示圖片，也嘗試了搜索到的一些方法笨忌，也都沒效果蓝仲。

考慮本地圖片是因?yàn)閯?chuàng)業(yè)logo那張圖沒法上傳常用的路過圖床(百度搜索網(wǎng)址，我印象里已經(jīng)用過三個(gè)網(wǎng)址了)，本地圖片也試不起來袱结，就也試了下qq相冊(cè)亮隙，也是顯示不了，所以重新找了幾個(gè)圖床擎勘，但很多速度都不行咱揍，最后用的是速度ok的聚合圖床。

幾天后（2022年5月初）又嘗試了本地圖片棚饵，參考Hexo 引用本地圖片以及引用本地任意位置圖片的一點(diǎn)思路這篇博客煤裙，開啟本地靜態(tài)資源的post_asset_folder: true和給引用的本地圖片添加絕對(duì)路徑的hexo-asset-image與之前一致，然后在這篇博客中提到了兼容懶加載的hqweay/hexo-asset-image噪漾。

在弄好這三步操作后硼砰，在source/_posts下新建文件夾img，并放入番薯夾logo配圖.jpg欣硼，調(diào)用的圖片鏈接則是img/番薯夾logo配圖.jpg题翰，VS Code的預(yù)覽中會(huì)顯示圖片，但是上傳后依舊不顯示诈胜。

按F12查看網(wǎng)頁(yè)的html代碼豹障，data-src中的圖片指向已經(jīng)是絕對(duì)路徑了。

<img data-src="img/番薯夾logo配圖.jpg" class="img-show-post-cover-class" src="img/番薯夾logo配圖.jpg">

再查看報(bào)錯(cuò)的指令焦匈，發(fā)現(xiàn)對(duì)于該圖片的請(qǐng)求路徑path并不是直接指向img血公，而是指向該與博客md文件所處的文件夾中，github代碼庫(kù)中也沒有找到img文件夾缓熟。

path: /2022/04/24/%E4%B8%AA%E4%BA%BA%E8%87%AA%E5%AA%92%E4%BD%93/img/%E7%95%AA%E8%96%AF%E5%A4%B9logo%E9%85%8D%E5%9B%BE.jpg
referer: https://islandfsj.github.io/2022/04/24/%E4%B8%AA%E4%BA%BA%E8%87%AA%E5%AA%92%E4%BD%93/

所以還是得給每個(gè)博客建立同名文件夾累魔，重新上傳后，在github代碼庫(kù)中看到了islandfsj.github.io/2022/04/24/個(gè)人自媒體/番薯夾logo配圖.jpg够滑，但是依然存在圖片上傳至github后無法顯示圖片垦写，在首頁(yè)的報(bào)錯(cuò)內(nèi)容則是無法加載圖片，但是在該博客頁(yè)面內(nèi)的顯示并無問題彰触。

Failed to load resource

值得一提的是梯投，我之前在public文件夾下放入logo.png，用于網(wǎng)頁(yè)况毅，在github代碼庫(kù)中則是islandfsj.github.io/logo.png晚伙，在white/_config.yml里則是icon: logo.png，并無顯示問題俭茧，但是這次我注意到，在博客中對(duì)logo.png的請(qǐng)求沒有響應(yīng)漓帚。

因此重新查看首頁(yè)里對(duì)番薯夾logo配圖.jpg的請(qǐng)求路徑母债。

path: /%E7%95%AA%E8%96%AF%E5%A4%B9logo%E9%85%8D%E5%9B%BE.jpg
referer: https://islandfsj.github.io/

因此在/public/img下放置logo和博客封面，在source/_posts/博客同名文件夾/img下放置logo、博客封面毡们、博客配圖迅皇，然后調(diào)用寫img/圖片名即可。PS.在博客編輯中衙熔，寫img/圖片在編輯器中并不會(huì)顯示圖片登颓，為了在編輯中顯示圖片，博客封面以外的圖片（也就是博客配圖）則可以寫成博客同名文件夾/img/圖片名红氯。

由于電腦里同時(shí)有02-16（初期暫為hexo）和islandfsj的hexo博客框咙，所以在弄清除這些本地圖片加載的事情后，將islandfsj這邊的logo.png更名為番薯夾logo.png,02-16那邊的logo.png更名為02-16 logo.png痢甘。PS.如果之前注意到這兩個(gè)用的都是logo.png喇嘱，肯定之前就更名了。

但在markdown調(diào)用圖片或鏈接的語句中塞栅，圖片名不能有空格（如果想輸入文件原本的中文名而不是那一串很長(zhǎng)的編碼）者铜，本地編輯預(yù)覽中就會(huì)不顯示鏈接，但是封面的調(diào)用并不會(huì)出錯(cuò)放椰，因此還是建議圖片名都避免空格作烟。（例如02-16 logo.png=>02-16logo.png）

本地圖片調(diào)用解決時(shí)，由于圖片版權(quán)的更改也基本完成砾医，所以將再次將博客中的圖片更改為本地文件拿撩，部分會(huì)是從圖床下載回電腦，部分會(huì)是將本地圖片文件放入博客（在2022年5月底大量地改為本地圖片時(shí)藻烤，從效率上考慮绷雏，更多還是從圖床上下載回電腦）。

在整體調(diào)整為本地圖片并上傳后怖亭，發(fā)現(xiàn)了另一個(gè)問題涎显，就是在博客首頁(yè)第二頁(yè)的時(shí)候，圖片的獲取又出現(xiàn)了報(bào)錯(cuò)兴猩，查看請(qǐng)求路徑：

:path: /page/2/img/MY%E9%98%BF%E6%A3%AE%E7%BA%B3%E5%8D%9A%E5%AE%A2%E5%B0%81%E9%9D%A2%EF%BC%88%E4%B8%8D%E5%8F%AF%E5%95%86%E7%94%A8%EF%BC%89.jpg

所以在public下額外建page文件夾期吓，page文件夾下再建2文件夾，2文件夾下再建img文件夾（查看了下本地文件倾芝，page文件夾和2文件夾都已經(jīng)自動(dòng)生成了）讨勤，然后放入首頁(yè)博客的logo和第二頁(yè)的博客文章封面。

改為本地圖片后晨另，上傳到github潭千，博客的訪問速度會(huì)比較慢，所以想著同時(shí)上傳到gitee借尿，同時(shí)考慮分別使用不同的子域名刨晴，但最后選擇根據(jù)訪問域名時(shí)的IP來源設(shè)置不同的跳轉(zhuǎn)屉来，例如國(guó)內(nèi)IP跳轉(zhuǎn)至Gitee，國(guó)外IP跳轉(zhuǎn)至Github狈癞，在本地博客的_config.yml中修改為以下格式的語句即可茄靠。

deploy:
- type: git
  repo:
    github: https://github.com/XXXX/XXXX.git
  branch: master
- type: git
  repo:
    gitee: https://gitee.com/XXXX/XXXX.git
  branch: master

都設(shè)置好后，同步至github和gitee后蝶桶，gitee那邊顯示部分博客有問題慨绳，可能是內(nèi)置的鏈接，但博客里用的都是些百度百科真竖、博客的鏈接脐雪，所以就放棄在Gitee上部署博客了，如果訪問本地圖片慢疼邀，或許只能降低圖片的分辨率喂江，但我自己不太愿意在展示圖片時(shí)降低圖片的分辨率，所以慢就慢點(diǎn)吧旁振。