不花錢，用一個(gè)小時(shí)搭建自己的博客網(wǎng)站

時(shí)間：2023-04-30 11:12:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-04-30 11:12:01 來源：網(wǎng)站運(yùn)營(yíng)

不花錢，用一個(gè)小時(shí)搭建自己的博客網(wǎng)站：點(diǎn)擊關(guān)注強(qiáng)哥，查看更多精彩文章呀

不知道大家平常有沒有寫博客的習(xí)慣，一般寫博客都會(huì)記錄什么？都會(huì)在哪里寫自己的博客呢？
強(qiáng)哥平常就有寫博客的習(xí)慣，不過沒有強(qiáng)制自己多久寫一篇，一般都是工作中遇到問題解決問題了會(huì)寫篇博客分享一下。
前前后后，在CSDN上總共也寫了217篇博客了，原創(chuàng)87篇。最新的總排名有排到了3823名。

哈哈，雖然自己也沒有特殊的去整理自己的博客，沒有系列總結(jié)系列文章，不過能夠通過平常的總結(jié)分享幫助到大家自己也就挺高興了。
但是話說回來，強(qiáng)哥最近也覺得，總是在博客平臺(tái)上寫文章，一直都沒有一個(gè)歸屬于自己的博客網(wǎng)站，總是有點(diǎn)不夠高端大氣上檔次。于是，前些天，就花了點(diǎn)時(shí)間，用Hexo在Gitee上整了一個(gè)自己的博客網(wǎng)站：https://breakingdawn.gitee.io/blog/。 選了自己喜歡的主題搭建完后，是這樣色兒的：

哈哈，不知道大家覺得怎么樣，不過這個(gè)主題確實(shí)就是我喜歡的風(fēng)格：簡(jiǎn)單直白，不花里胡哨，最重要的是一目了然。
話不多說，如果你也被上面的博客網(wǎng)站打動(dòng)的話，就趕緊行動(dòng)起來。重點(diǎn)是一毛錢不花，按著教程走，一個(gè)小時(shí)左右就能搭建完。強(qiáng)哥雖然最開始搭建不止花了一小時(shí)，不過在把彎路都走過之后?，F(xiàn)在自己要再搭建類似的網(wǎng)站，按著下面的教程，一個(gè)小時(shí)準(zhǔn)夠。
小伙伴們先無腦按教程操作，搭建成功后，自然很多東西就都懂了。
一、本地環(huán)境搭建
1.1、安裝git:
按照如下地址安裝：https://www.runoob.com/git/git-install-setup.html
1.2、安裝node：
(Node.js 版本需不低于 10.13，建議使用 Node.js 12.0 及以上版本) 按照如下地址安裝：https://www.runoob.com/nodejs/nodejs-install-setup.html
1.3、安裝hexo：
上一步安裝完node后，直接打開終端，輸入命令：
npm install -g hexo-cli
1.4、創(chuàng)建gitee賬號(hào)
很多人gitee可能還不知道是什么，gitee就是馬云，哦不，是碼云。也就是國(guó)內(nèi)的“github”。 這個(gè)自己登陸網(wǎng)站創(chuàng)建吧：https://gitee.com/
1.5、建完賬號(hào)后，配置gitee的ssh公鑰（可選）：
這一步非必須，使用http克隆的可忽略。不過強(qiáng)烈建議配置下，之后提交代碼什么的會(huì)方便很多。 配置教程：https://gitee.com/help/articles/4181#article-header0
二、搭建Hexo博客
2.1、初始化Hexo博客
隨便建一個(gè)空目錄，輸入如下命令，并安裝前端依賴包
cd <folder> //進(jìn)入空目錄 hexo init //初始化 npm install //安裝依賴包
運(yùn)行完后，目錄結(jié)構(gòu)如下：


2.2、本地試運(yùn)行Hexo服務(wù)
輸入如下命令運(yùn)行最原始的Hexo服務(wù)
hexo s //左邊是hexo server的簡(jiǎn)化命令
輸入后終端顯示如下：

瀏覽器訪問http://localhost:4000/ 如下


2.3、選主題啦
哈哈，這個(gè)可以說是最耗時(shí)的了，為什么，因?yàn)閔exo支持的好看的主題太多了。 主題地址：https://hexo.io/themes/ 強(qiáng)哥博客網(wǎng)站用的是pure，對(duì)應(yīng)主題地址：https://github.com/cofess/hexo-theme-pure 對(duì)應(yīng)主題使用教程：https://blog.cofess.com/2017/11/01/hexo-blog-theme-pure-usage-description.html
配置完主題后，本地再次運(yùn)行。如果順利，重新啟動(dòng)hexo服務(wù)后，應(yīng)該就能在http://localhost:4000/ 看到新的主題博客網(wǎng)站了。
三、創(chuàng)建Gitee倉(cāng)庫(kù)
首先很多人會(huì)問為什么不去github上搭建，而要在Gitee上。原因有二： 1、Github網(wǎng)站畢竟是境外網(wǎng)站，訪問比較卡 2、Gitee上支持直接對(duì)Hexo源碼進(jìn)行編譯更新，而Github暫時(shí)還只支持Jekyll進(jìn)行編譯更新。Jekyll是類似Hexo的另一種靜態(tài)網(wǎng)站生成工具。
3.1、創(chuàng)建倉(cāng)庫(kù)
這里要注意，如果你想要一個(gè)創(chuàng)建一個(gè)首頁(yè)訪問地址不帶二級(jí)目錄的 pages，如http://ipvb.gitee.io，而不是http://ipvb.gitee.io/blog ，那么，你需要建立一個(gè)與自己個(gè)性地址同名的倉(cāng)庫(kù)，如 https://gitee.com/ipvb 這個(gè)用戶，想要?jiǎng)?chuàng)建一個(gè)自己的站點(diǎn)，但不想以子目錄的方式訪問，想以ipvb.gitee.io直接訪問，那么他就可以創(chuàng)建一個(gè)名字為ipvb的倉(cāng)庫(kù) https://gitee.com/ipvb/ipvb 部署完成后，就可以以 https://ipvb.gitee.io 進(jìn)行訪問了。

登錄gitee后，點(diǎn)右上角創(chuàng)建倉(cāng)庫(kù)


3.2、克隆倉(cāng)庫(kù)到本地
復(fù)制如下位置的倉(cāng)庫(kù)地址

在本地終端選擇一個(gè)合適的博客存放的空目錄，輸入如下命令克隆倉(cāng)庫(kù)：
git clone git@gitee.com:xxx/demo.git //修改你自己倉(cāng)庫(kù)對(duì)應(yīng)的地址
克隆完后，進(jìn)入本地倉(cāng)庫(kù)目錄。 Http方式克隆的就將上面地址改成Http的倉(cāng)庫(kù)地址克隆即可。
3.3、添加gitignore文件
在本地倉(cāng)庫(kù)目錄下，新建文件：.gitignore，內(nèi)容如下：
/node_modules /public /.deploy_git
3.3、復(fù)制博客代碼到當(dāng)前目錄下
直接將第二步驟創(chuàng)建好的博客代碼(不要最外層的文件夾，只要與_config.yml同級(jí)別的所有文件或文件夾) 復(fù)制到當(dāng)前的倉(cāng)庫(kù)目錄下。 然后在當(dāng)前文件夾下，再重新啟動(dòng)下hexo server看看是否還能再次瀏覽（強(qiáng)哥試過，應(yīng)該是能正常顯示）
3.4、git提交代碼
直接輸入如下命令將代碼同步到倉(cāng)庫(kù)
git add . //添加文件夾下所有代碼帶git git commit -m "xxx" //提交代碼并添加消息xxx（消息內(nèi)容自行修改） git push -u origin master //推送源碼到gitee遠(yuǎn)程倉(cāng)庫(kù)上
四、線上服務(wù)部署
4.1、查看代碼是否成功推送
直接刷新gitee上倉(cāng)庫(kù)，看看代碼是否成功提交
4.2、開通gitee pages服務(wù)
首先點(diǎn)擊服務(wù)，gitee pages服務(wù)：

第一次點(diǎn)進(jìn)去，需要提交身份證信息進(jìn)行認(rèn)證：

認(rèn)證要1個(gè)工作日審核，一個(gè)工作日認(rèn)證完后，頁(yè)面是這樣的：


4.3、啟動(dòng)服務(wù)
這里注意一點(diǎn)就是：gitee上的hexo源碼，可以直接在上面更新成靜態(tài)網(wǎng)站，而不需要像很多教程里說的，還要在本地進(jìn)行hexo g -d的操作，將編譯后的代碼推送到gitee倉(cāng)庫(kù)上。

直接點(diǎn)擊啟動(dòng)按鈕（第二次就會(huì)變成更新按鈕），gitee就會(huì)自動(dòng)在線編譯部署服務(wù)了（自動(dòng)npm install，hexo deploy)。 啟動(dòng)完后，頁(yè)面如下：

直接點(diǎn)擊鏈接就能看到我們的網(wǎng)站在公網(wǎng)上部署成功了。
4.4、修改配置
哈哈，如果你之前弄主題的時(shí)候，url的配置沒有修改的話，那頁(yè)面可能會(huì)是這樣

這個(gè)時(shí)候，只要修改博客源碼_config.yml的url參數(shù)為你的新域名即可：

然后在gitee pages頁(yè)面，點(diǎn)更新后，網(wǎng)站就能正常顯示了。


五、寫博客
新建Markdown文件
直接在本地新建一個(gè)Markdown的文件，并編寫我們自己的博客內(nèi)容。
給博客文件加上標(biāo)簽等信息
在博客文件的文件最上方，添加如下信息：
title: 大家新春快樂~ date: 2022-01-31 22:54:00 categories:

• 生活 tags:
• 生活記錄 toc: true # 是否啟用內(nèi)容索引 效果如下：

然后將新建的博客文件放入到source/_posts 目錄下，最后上傳到gitee倉(cāng)庫(kù)上，更新gitee pages服務(wù)即可。


關(guān)于博客的圖片地址
博客因?yàn)槭荕arkdown文件寫的，所以如果我們?cè)诒镜刂苯诱迟N的圖片地址，地址會(huì)是本地主機(jī)的，那么等gitee倉(cāng)庫(kù)上更新服務(wù)后，會(huì)導(dǎo)致圖片無法顯示。 所以，解決辦法有如下兩種：

• 我們將博客對(duì)應(yīng)的圖片文件放到一個(gè)固定的源碼目錄下，然后在Markdown文件上使用相對(duì)地址引用它。
• 我們將圖片傳到公共圖床上（圖床就是其他公司給我們提供的裝門方圖片的服務(wù)器，如：七牛圖床、微博圖床等）。然后Markdown文件直接用鏈接方式引用圖片。

寫在最后
好啦，通過上面的教程，大家跟著走，應(yīng)該很快就能擁有一個(gè)自己的博客網(wǎng)站啦。
強(qiáng)哥還是很建議大家去動(dòng)手搞一搞的，第一次搭建完自己的網(wǎng)站應(yīng)該還是很有成就感的。 當(dāng)然如果有問題，也可以在這篇推文下留言或者在后臺(tái)留言，強(qiáng)哥看到了會(huì)及時(shí)回復(fù)的哈。

點(diǎn)擊關(guān)注強(qiáng)哥，查看更多精彩文章呀