手把手教你搭建Hexo博客
導(dǎo)讀|很多開發(fā)者搭建自己的博客,會(huì)選擇現(xiàn)有的博客系統(tǒng)方案,比如:Wordpress、Hexo和Halo等。其中Hexo博客作為全靜態(tài)博客,沒有數(shù)據(jù)庫、對(duì)服務(wù)器資源消耗也極低,而且可定制化程度極高。本文將帶領(lǐng)各位開發(fā)者基于Lighthouse輕量服務(wù)器快速搭建Hexo博客。
Hexo博客是一個(gè)基于Nodejs開發(fā)的一套博客系統(tǒng)。借助Hexo,開發(fā)者可以把自己的Hexo配置和Markdown文章,編譯為HTML、JavaScript、CSS的存靜態(tài)資源。exo對(duì)每片文章都有生成.html文件和真實(shí)DOM元素,而不是Vue在非預(yù)渲染和非SSR模式下的Hash或History路由模式。
舉個(gè)例子,這是Hexo的配置文件:
. ├── _config.fluid.yml # 主題配置文件 ├── _config.yml # Hexo配置文件 ├── node_modules ├── package-lock.jso ├── package.json ├── scaffolds ├── source # 用戶核心文件 └── themes # 主題文件開發(fā)者使用Hexo命令,可以生成public文件夾。內(nèi)部就是可以發(fā)布的靜態(tài)文件了:
. ├── _config.fluid.yml ├── _config.yml ├── db.json ├── node_modules ├── package-lock.json ├── package.json ├── public # 我們Hexo構(gòu)建的靜態(tài) ├── scaffolds ├── source └── themespublic內(nèi):
準(zhǔn)備工具
現(xiàn)在教程正式開始,首先看看我們需要準(zhǔn)備什么?
本地:一臺(tái)安裝了Node.js和Git的電腦,操作系統(tǒng)隨意(Windows、macOS和Linux均可)。
服務(wù)器:一臺(tái)Lighthouse(建議使用Linux系統(tǒng),e.g. Debian、CentOS)
可選:CDN內(nèi)容分發(fā)節(jié)點(diǎn)、一個(gè)域名
如果你本地并沒有安裝Git,Windows用戶參考:https://git-scm.com/download/win;macOS和Linux可以直接使用軟件包管理器安裝。
如果你本地并沒有Node.js,那么我個(gè)人推薦安裝NVM(多版本Node.js管理器),參考教程:
https://cloud.tencent.com/developer/article/1812323
CDN內(nèi)容分發(fā)節(jié)點(diǎn)是可選配置,使用騰訊云CDN節(jié)點(diǎn),可以輕易緩存Hexo和圖床資源,加速用戶上網(wǎng)體驗(yàn),并且減緩Lighthouse帶寬壓力。值得注意的是,使用騰訊云CDN需要備案域名。
Lighthouse部分,各位開發(fā)者請(qǐng)自行前往官網(wǎng)購置。
服務(wù)器,均指任意一臺(tái)Lighthouse服務(wù)器,配置水平也沒有指定要求。服務(wù)器系統(tǒng)建議選擇Linux服務(wù)器,我選擇的是Debian10。
服務(wù)器初始化
首先,各位開發(fā)者要進(jìn)行服務(wù)器的初始化(點(diǎn)擊文末閱讀原文,查看教程)。我們?cè)诒镜豐SH連接了服務(wù)器:
環(huán)境準(zhǔn)備
之后,我們給服務(wù)器安裝依賴和應(yīng)用:
1)寶塔環(huán)境
剛剛我們已經(jīng)成功SSH登錄服務(wù)器,之后就是安裝寶塔鏡像:
之后,記得去服務(wù)器后臺(tái)放行8888端口:
2)Git:用于本地Hexo和圖床推送
服務(wù)器上直接使用軟件包管理其安裝:
# Debian apt install git -y # CentOS yum install git -y用寶塔安裝腳本安裝過程中,會(huì)自動(dòng)在服務(wù)器上安裝Git環(huán)境。
3)Nginx:用于Web服務(wù)器,即發(fā)布Hexo打包的靜態(tài)博客和作為圖床。
Nginx可以說是一個(gè)優(yōu)秀的高并發(fā)服務(wù)器。因?yàn)槭褂脤毸姘?#xff0c;所以在安裝好寶塔面板后,進(jìn)入寶塔面板選擇安裝Nginx即可:
創(chuàng)建網(wǎng)站
我們使用寶塔創(chuàng)建兩個(gè)網(wǎng)站文件夾:
blog:用于存放Hexo打包的public文件(后續(xù)有由本地git push)
imageHost:用于存放圖片(也就是我們的圖床文件夾,后續(xù)也由本地push)比如:
使用寶塔的可視化Nginx,創(chuàng)建Nginx配置文件。設(shè)置文件夾權(quán)限:
創(chuàng)建Git
我們本地Hexo打包為public靜態(tài)資源,需要使用git的git push推送到服務(wù)器,由服務(wù)器的Nginx進(jìn)行網(wǎng)站展示。圖床同理。我們需要在服務(wù)器上配置Git,包括:創(chuàng)建Git用戶、創(chuàng)建Git倉庫、修改Git工作空間。
1)創(chuàng)建Git用戶
專門創(chuàng)建git用戶,用于使用Git: # 當(dāng)前是root用戶,創(chuàng)建git用戶 useradd git # 給創(chuàng)建的git用戶設(shè)置密碼 passwd git之后創(chuàng)建git用戶的“家”:
# 用root用戶給git用戶建個(gè)家 mkdir /home/git # 交房給git chown git:git /home/git -R使用su - git切換到git用戶,準(zhǔn)備后續(xù)操作。
2)創(chuàng)建Git倉庫
之后,我們切換到了git用戶,創(chuàng)建blog的文件夾:
mkdir -p ~/mySource/myBlog cd ~/mySource/myBlog git init --bare用同樣的方法,創(chuàng)建imageHost的文件夾:
mkdir -p ~/mySource/myImageHost cd ~/mySource/myImageHost git init --bare3)創(chuàng)建Git倉庫
創(chuàng)建的是裸倉庫,沒有工作空間。所以我們需要指向工作空間到上文創(chuàng)建的網(wǎng)站文件夾:
# 當(dāng)前是git用戶,創(chuàng)建receive鉤子 vim ~/mySource/myBlog/hooks/post-receive追加內(nèi)容如下,注意替換--work-tree和--git-dir地址為你的地址:
git --work-tree=/www/wwwroot/myHexo/blog --git-dir=/home/git/mySource/myBlog checkout -f最后,添加執(zhí)行權(quán)限:
chmod +x ~/mySource/myImageHost/hooks/post-receive同理,imageHost圖床文件夾也一樣:
vim ~/mySource/myImageHost/hooks/post-receive追加內(nèi)容:
git --work-tree=/www/wwwroot/myHexo/imageHost --git-dir=/home/git/mySource/myImageHost checkout -f添加執(zhí)行權(quán)限:
chmod +x ~/mySource/myImageHost/hooks/post-receive到此,服務(wù)器上的操作,基本完成。接下來是本地操作。
部署Hexo
部署Hexo很簡單,總的有三步:初始化Hexo、運(yùn)行Hexo、打包推送到服務(wù)器。
1)初始化Hexo
首先,確保本地已經(jīng)安裝Node.js:
之后全局安裝Hexo:
npm install -g hexo之后,創(chuàng)建一個(gè)文件夾,并使用hexo init進(jìn)行初始化:
2)運(yùn)行Hexo
運(yùn)行Hexo很簡單,只需要:
hexo s你可能會(huì)收到Node.js的版本問題警告,不過影響不大。如果提示hexo s找不到,可以使用npm install hexo-server --save進(jìn)行安裝,再運(yùn)行hexo s即可。
之后,我們使用瀏覽器即可訪問我們的hexo:
具體的Hexo博客如何書寫,這里不過多說。接下來,我們看看如何部署。
3)打包推送到服務(wù)器
我們把Hexo打包并部署到服務(wù)器。首先在hexo blog目錄內(nèi)安裝推送插件:
npm install hexo-deployer-git --save打開hexo blog目錄下的_config.yml文件,編輯(可以用記事本、Xcode、HBuilderX),deploy后,類型填git,然后補(bǔ)上其他內(nèi)容:
之后,進(jìn)行public文件夾生成和推送:
hexo g -d查看文件夾:
瀏覽器訪問看看:
部署圖床
部署圖床也很簡單,總的有三步:創(chuàng)建本地圖床倉庫、添加圖片、推送到服務(wù)器。
1)創(chuàng)建本地圖床倉庫
創(chuàng)建的方法很簡單,用過Git的用戶應(yīng)該都比較熟悉。如果你沒用過,看了下面的內(nèi)容也可以輕易理解。
# 創(chuàng)建一個(gè)空文件夾mkdir imageHost# 進(jìn)入文件夾cd imageHost# git初始化git init# 設(shè)置遠(yuǎn)程倉庫地址(記得將12*.***.*16替換為你的服務(wù)器)git remote add origin git@12*.***.*16:/home/git/mySource/myImageHost2)添加圖片
打開文件夾,之后往里面丟圖片即可:
3)推送到服務(wù)器
最后,推送到服務(wù)器,也是基本的git操作:
# 添加本地所有文件 git add . # 打一個(gè)commit git commit -a -m "update" # 提交到遠(yuǎn)程地址 git push --set-upstream origin main當(dāng)然,也就第一次需要git push --set-upstream origin main指定,后續(xù)直接git push就可以了:
如果出現(xiàn)推送錯(cuò)誤,出現(xiàn)remote: fatal: You are on a branch yet to be born問題,一般是遠(yuǎn)程倉庫(服務(wù)器上的裸倉庫)上的倉庫不一樣。有個(gè)個(gè)最簡單的方法,修改服務(wù)器上裸倉庫的post-receive,添加:
之后重新本地git pull即可:
到寶塔看看服務(wù)器上的圖片:
Nginx反代
剛剛我們其實(shí)只創(chuàng)建了一個(gè)文件夾,但是創(chuàng)建了兩個(gè)倉庫。怎么融合在一起呢?方法很多,你可以用域名去解析兩個(gè)網(wǎng)站文件夾。
但是如果你只有一個(gè)域名,可以使用Nginx反向代理圖床文件夾為博客文件夾的子文件夾。舉個(gè)例子,我們博客根目錄下的/imagehost文件夾,我想專門用于代理圖床文件夾,只需要打開Nginx的設(shè)置,設(shè)置反向代理即可:
之后,任何/imagehost開頭的文件,就會(huì)被Nginx代理到/www/wwwroot/myHexo/imageHost文件夾下去查找。舉個(gè)例子,比如我們想拿到0.jpg這張圖片:
只需要在博客域名下,加上/imagehost前綴即可訪問:
這樣,在寫博客的時(shí)候,就方便了。
最終效果:加上一點(diǎn)點(diǎn)的美化和一點(diǎn)點(diǎn)的文章輸出,并且部署到Lighthouse就是我的博客:
Q&A
1)如何備份網(wǎng)站
備份Hexo博客很簡單,在Hexo文件夾內(nèi):
. ├── _config.fluid.yml ├── _config.yml ├── db.json ├── node_modules ├── package-lock.json ├── package.json ├── public ├── scaffolds ├── source └── themes排除node_modules、public文件夾打包壓縮即可。在新的電腦上,解壓并hexo g -d即可重新打包并部署到服務(wù)器。備份圖床就更簡單了。實(shí)際上你只需要下載服務(wù)器上的圖床文件夾即可。或者說打包本地的圖床文件夾。因?yàn)檫@兩個(gè)相當(dāng)于是個(gè)同步盤。
2)Lighthouse跑的動(dòng)Hexo么
完全可以,Lighthouse就算使用最低配置的版本,也可以跑Hexo。但是,如果你想拿Lighthouse搭建Wordpress,建議使用2C 4G配置以上的版本;否則建議數(shù)據(jù)庫另外搭建。
希望本文對(duì)你有幫助~
騰訊工程師技術(shù)干貨直達(dá):
1、如何不改一行代碼,讓Hippy啟動(dòng)速度提升50%?
2、內(nèi)存泄露?騰訊工程師2個(gè)壓箱底的方法和工具
3、一文讀懂Go函數(shù)調(diào)用
4、萬字避坑指南!C++的缺陷與思考(下)
點(diǎn)個(gè)?在看展示你的技術(shù)態(tài)度
總結(jié)
以上是生活随笔為你收集整理的手把手教你搭建Hexo博客的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 不在同一局域网?组建家庭局域网的方案和踩
- 下一篇: 素数表(Eratosthenes)