用Hugo在gitee上構(gòu)建博客(Windows環(huán)境下)

大家好!這是我第一次在gitee上搭建個(gè)人博客。作為一個(gè)博客小白宣渗,我在搭建博客的過程中走了很多彎路,但也收獲了豐富的經(jīng)驗(yàn)±嬷荩現(xiàn)在我把自己搭建博客的過程分享給大家痕囱,希望能幫助到有需要的人。當(dāng)然其中還有很多不足之處暴匠,歡迎各位大佬指教鞍恢!

1.為什么要用gitee?

相信很多朋友都覺得用GitHub搭建博客會(huì)更好,那為什么還要使用gitee呢帮掉,下面我總結(jié)了幾點(diǎn)使用gitee的優(yōu)點(diǎn):

  1. 更流暢的訪問 由于某些眾所周知的原因弦悉,GitHub有些時(shí)候可能無法訪問或訪問緩慢,gitee由于服務(wù)器在國(guó)內(nèi)蟆炊,訪問速度還是很不錯(cuò)的稽莉;(呀!在小編寫這篇博客的當(dāng)天有很多朋友表示無法訪問GitHub~)
  2. 私有倉(cāng)庫(kù) 相比于GitHub涩搓,gitee提供了私有倉(cāng)庫(kù)的功能污秆,給代碼在網(wǎng)上的托管提供了更多的選擇。

2.安裝git

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è)移到myblogthemes文件夾里

      • 命令行操作:

        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ù)有效
        或 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)址,就可以看到自己寫的博客了

        + 如果發(fā)現(xiàn)網(wǎng)頁(yè)渲染失敗即沒有主題赌结,先刷新一下捞蛋,看是否有效;如果還是無效柬姚,打開瀏覽器的開發(fā)者工具拟杉,在head中看.css鏈接是否倉(cāng)庫(kù)地址gitee.io后是否缺少一個(gè)“/”,如果少了量承,在本地myblog文件夾中config.toml文件中將baseUrl的地址最后加上一個(gè)“/”搬设,再次上傳public文件夾的內(nèi)容
        在這里插入圖片描述

        + 如果還是沒有渲染,可將本地的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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末菱涤,一起剝皮案震驚了整個(gè)濱河市苞也,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌粘秆,老刑警劉巖如迟,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異攻走,居然都是意外死亡殷勘,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門昔搂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來玲销,“玉大人,你說我怎么就攤上這事摘符∠托保” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵逛裤,是天一觀的道長(zhǎng)瘩绒。 經(jīng)常有香客問我,道長(zhǎng)带族,這世上最難降的妖魔是什么锁荔? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮炉菲,結(jié)果婚禮上堕战,老公的妹妹穿的比我還像新娘。我一直安慰自己拍霜,他們只是感情好嘱丢,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著祠饺,像睡著了一般越驻。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上道偷,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天缀旁,我揣著相機(jī)與錄音,去河邊找鬼勺鸦。 笑死并巍,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的换途。 我是一名探鬼主播懊渡,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼刽射,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了剃执?” 一聲冷哼從身側(cè)響起誓禁,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎肾档,沒想到半個(gè)月后摹恰,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡怒见,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年俗慈,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片速种。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡姜盈,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出配阵,到底是詐尸還是另有隱情馏颂,我是刑警寧澤,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布棋傍,位于F島的核電站救拉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏瘫拣。R本人自食惡果不足惜亿絮,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望麸拄。 院中可真熱鬧派昧,春花似錦、人聲如沸拢切。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)淮椰。三九已至五慈,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間主穗,已是汗流浹背泻拦。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留忽媒,地道東北人争拐。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像晦雨,于是被迫代替她去往敵國(guó)和親陆错。 傳聞我的和親對(duì)象是個(gè)殘疾皇子灯抛,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361