大家好!這是我第一次在gitee上搭建個(gè)人博客。作為一個(gè)博客小白宣渗,我在搭建博客的過程中走了很多彎路,但也收獲了豐富的經(jīng)驗(yàn)±嬷荩現(xiàn)在我把自己搭建博客的過程分享給大家痕囱,希望能幫助到有需要的人。當(dāng)然其中還有很多不足之處暴匠,歡迎各位大佬指教鞍恢!
1.為什么要用gitee?
相信很多朋友都覺得用GitHub搭建博客會(huì)更好,那為什么還要使用gitee呢帮掉,下面我總結(jié)了幾點(diǎn)使用gitee的優(yōu)點(diǎn):
- 更流暢的訪問 由于某些眾所周知的原因弦悉,GitHub有些時(shí)候可能無法訪問或訪問緩慢,gitee由于服務(wù)器在國(guó)內(nèi)蟆炊,訪問速度還是很不錯(cuò)的稽莉;(呀!在小編寫這篇博客的當(dāng)天有很多朋友表示無法訪問GitHub~)
- 私有倉(cāng)庫(kù) 相比于GitHub涩搓,gitee提供了私有倉(cāng)庫(kù)的功能污秆,給代碼在網(wǎng)上的托管提供了更多的選擇。
2.安裝git
- 安裝地址:https://git-scm.com/download/win
- 安裝時(shí)一路next就完事了
- 成功后右鍵可以看到 git bash
3.安裝Hugo
安裝地址https://github.com/gohugoio/hugo/releases
[圖片上傳失敗...(image-6ce59b-1603207869281)]創(chuàng)建一個(gè)Hugo文件夾昧甘,打開并創(chuàng)建子文件夾bin,sites(以后在本地寫博客的位置)良拼,將壓縮包解壓到bin文件夾中
-
將hugo添加到系統(tǒng)路徑
- 打開系統(tǒng)高級(jí)設(shè)置->環(huán)境變量,點(diǎn)擊 用戶變量中的Path充边,點(diǎn)擊編輯将饺,點(diǎn)擊右上角新建,將上面的bin文件夾的地址復(fù)制粘貼痛黎,回車鍵予弧,點(diǎn)擊確定
-
驗(yàn)證是否安裝成功 git bash中輸入
hugo version
4.創(chuàng)建遠(yuǎn)程倉(cāng)庫(kù)
注冊(cè)gitee賬號(hào)
點(diǎn)擊右上角“+”號(hào)新建倉(cāng)庫(kù)
自定義倉(cāng)庫(kù)名(無需跟用戶名相同,這點(diǎn)跟github不同)
是否開源:公開
-
創(chuàng)建
現(xiàn)在你有了自己的倉(cāng)庫(kù)湖饱,記得記下倉(cāng)庫(kù)地址掖蛤,后邊要用到哦~
5.搭建博客 (以下所有命令都在git bash中輸入)
-
新建博客
在sites文件夾中
hugo new site myblog
myblog
是博客名,可自定義井厌,本文以此為例 -
設(shè)置主題
- Hugo博客主題下載庫(kù):https://themes.gohugo.io/
- 找到自己喜歡的主題后
常規(guī)操作:Download后解壓蚓庭,打開,將文件夾名的“-master”去掉仅仆,再整個(gè)移到
myblog
的themes
文件夾里-
命令行操作:
cd themes
git clone https://github.com/jbub/ghostwriter此處以主題
ghostwriter
為例
將
themes/exampleSite
文件夾里的內(nèi)容復(fù)制粘貼到myblog
中
+注意器赞,如果復(fù)制過來的config文件的后綴名是.yml,則刪除原來的config.toml文件墓拜,否則直接替換即可-
修改config.文件的
baseUrl
港柜,改為gitee倉(cāng)庫(kù)的地址(記得以“/”結(jié)尾)(不用加.git)(不要出現(xiàn)多余空格),添加配置-
添加最后三行配置
-
添加最后三行
-
查看主題效果
- 在
myblog
中hugo server -t ghostwriter --buildDrafts
+ 將末尾的http://localhost:1313
復(fù)制到本地瀏覽器中咳榜,回車(注意此時(shí)git bush保持打開夏醉;推薦使用谷歌瀏覽器)
+ 注意:git bush上的復(fù)制粘貼要右鍵copy/paste
- 在
-
創(chuàng)建自己的博客文章(心急的同學(xué)可先跳過此步)
- 添加博客
打開
myblog
/content
/post
,新建blog.md(博客源文件)用vscode, Typora, Notepad++等軟件打開 blog.md (如果都沒有,記事本也是可以的)
-
開頭寫入
博客開頭 按markdown的語(yǔ)法編寫具體內(nèi)容
-
回到
myblog
文件夾涌韩,hugo server -t ghostwriter --buildDrafts
將末尾的
http://localhost:1313
復(fù)制到本地瀏覽器中畔柔,回車,即可預(yù)覽自己的博客
- 添加博客
-
將本地博客部署到gitee上
-
在
myblog
文件夾下hugo --theme=ghostwriter --baseUrl="(倉(cāng)庫(kù)地址)" --buildDrafts
+ 在myblog
中會(huì)生成public
文件夾
+ 1.cd public
2.git init //初始化本地倉(cāng)庫(kù)
3.git add . //將public文件夾下的所有文件放入緩存流中等待提交臣樱,注意此處空一格有個(gè)點(diǎn)
4.git commit -m "xx" //把緩存內(nèi)容放進(jìn)發(fā)送頭靶擦,仍為待發(fā)送狀態(tài)腮考,“xx”為對(duì)本次上傳作的說明
5.git remote add origin (倉(cāng)庫(kù)地址) //綁定了.git配置文件夾對(duì)應(yīng)的遠(yuǎn)端服務(wù)器
6.git push -u origin master //推送到gitee
注意-
執(zhí)行
git add .
前最好先看下.gitignore
文件是否限制了上傳的內(nèi)容(會(huì)導(dǎo)致在gitee上顯示博客是出現(xiàn)404),如果是的話修改為[圖片上傳失敗...(image-63244b-1603207869281)]- 解釋:這個(gè)文件是用來書寫忽略規(guī)則的(忽略的文件不會(huì)上傳到gitee上)
- 以“#”號(hào)開頭表示解釋,即文件實(shí)際上沒有忽略規(guī)則玄捕,自然就都上傳啦~(當(dāng)然也可以直接將這個(gè)文件刪除)
- 如果不想每次都修改的話踩蔚,可以修改static文件夾中.gitignore文件
-
如果出現(xiàn)警告[圖片上傳失敗...(image-cb8721-1603207869281)]
輸入git config core.autocrlf false //僅對(duì)當(dāng)前git倉(cāng)庫(kù)有效
+ 如果發(fā)現(xiàn)網(wǎng)頁(yè)渲染失敗即沒有主題赌结,先刷新一下捞蛋,看是否有效;如果還是無效柬姚,打開瀏覽器的開發(fā)者工具拟杉,在head中看.css鏈接是否倉(cāng)庫(kù)地址gitee.io后是否缺少一個(gè)“/”,如果少了量承,在本地myblog文件夾中config.toml文件中將baseUrl的地址最后加上一個(gè)“/”搬设,再次上傳public文件夾的內(nèi)容
或 git config --global core.autocrlf false //全局有效
+ 如果只要上傳某個(gè)文件,輸入
>git add xxx(文件名)
+ 查看gitee上的博客
+ 點(diǎn)擊gitee右上方的服務(wù)->Gitee pages桩盲,強(qiáng)制使用HTTPS,點(diǎn)擊啟動(dòng)寂纪,打開生成的網(wǎng)址,就可以看到自己寫的博客了
在這里插入圖片描述
+ 如果還是沒有渲染,可將本地的config.toml文件里的baseUrl注釋掉(注釋方法:在行首輸入“## ”)撕捍,刪除public文件夾拿穴,再重新部署到gitee上,部署前先把遠(yuǎn)程倉(cāng)庫(kù)清空忧风,然后命令
>hugo --theme=ghostwriter --baseUrl="(倉(cāng)庫(kù)地址)" --buildDrafts改為
hugo --theme=ghostwriter --buildDrafts
然后就是正常的部署操作了默色。
-
-
-
本地修改后再次上傳
-
myblog
中1.hugo //編譯站點(diǎn)(要在本地瀏覽器查看,則使用 hugo server) 2.cd public 3.git add . 4.git commit -m “xxx” 5.git push -u origin master
-
6.感言
至此博客搭建大功告成狮腿!
博客的搭建過程也許不會(huì)那么順利腿宰,各種各樣的bug可能會(huì)讓人懷疑人生,但堅(jiān)持下來缘厢,看著自己一手搭建的博客吃度,你會(huì)覺得之前付出的一切都是值得的!這也正是我們技術(shù)人的驕傲贴硫。
第一次寫博客椿每,錯(cuò)誤在所難免,歡迎各位指正夜畴,不勝感激拖刃!
如果有小伙伴對(duì)本文感興趣或者有什么想法,可以私聊小編贪绘,大家一起研究探討~
PS:經(jīng)過一輪搭建,你是否get到了如何不建博客只上傳文件央碟,沒錯(cuò)税灌,就是省去跟博客有關(guān)的所有步驟均函,快上機(jī)試試吧!
Reference
[1]: https://blog.csdn.net/man_zuo/article/details/88651416
[2]: https://blog.csdn.net/weixin_43691058/article/details/101772871