用Hugo在gitee上構建博客（Windows環境下）

大家好！這是我第一次在gitee上搭建博客，也是我第一次寫博客，作為一個博客小白，我在搭建博客的程序中走了很多彎路，但也識訓了豐富的經驗，現在我把自己搭建博客的程序分享給大家，希望能幫助到有需要的人，當然其中還有很多不足之處，歡迎各位大佬指教！

1.為什么要用gitee？

相信很多朋友都覺得用GitHub搭建博客會更好，那為什么還要使用gitee呢，下面我總結了幾點使用gitee的優點：

1. 更流暢的訪問 由于某些眾所周知的原因，GitHub有些時候可能無法訪問或訪問緩慢，gitee由于服務器在國內，訪問速度還是很不錯的；（呀！在小撰寫這篇博客的當天有很多朋友表示無法訪問GitHub~）
2. 私有倉庫 相比于GitHub，gitee提供了私有倉庫的功能，給代碼在網上的托管提供了更多的選擇，

2.安裝git

• 安裝地址：https://git-scm.com/download/win
• 安裝時一路next就完事了
• 成功后右鍵可以看到 git bash

3.安裝Hugo

• 安裝地址https://github.com/gohugoio/hugo/releases
  

• 創建一個Hugo檔案夾，打開并創建子檔案夾bin,sites(以后在本地寫博客的位置)，將壓縮包解壓到bin檔案夾中

• 將hugo添加到系統路徑

  • 打開系統高級設定->環境變數，點擊 用戶變數中的Path，點擊編輯，點擊右上角新建，將上面的bin檔案夾的地址復制粘貼，回車鍵，點擊確定

• 驗證是否安裝成功 git bash中輸入

  hugo version

4.創建遠程倉庫

• 注冊gitee賬號

• 點擊右上角“+”號新建倉庫

• 自定義倉庫名（無需跟用戶名相同，這點跟github不同）

• 是否開源：公開

• 創建

  現在你有了自己的倉庫，記得記下倉庫地址，后邊要用到哦~

5.搭建博客 （以下所有命令都在git bash中輸入）

• 新建博客

  在sites檔案夾中

  hugo new site myblog

  myblog是博客名，可自定義，本文以此為例

• 設定主題

  • Hugo博客主題下載庫:https://themes.gohugo.io/
  • 找到自己喜歡的主題后

    • 常規操作：Download后解壓，打開，將檔案夾名的“-master”去掉，再整個移到myblog的theme檔案夾里

    • 命令列操作：

      cd themes
      git clone https://github.com/jbub/ghostwriter

      此處以主題 ghostwriter為例

• 將themes/exampleSite檔案夾里的內容復制粘貼到myblog中
  +注意，如果復制過來的config檔案的后綴名是.yml，則洗掉原來的config.toml檔案，否則直接替換即可

• 修改config.檔案的baseUrl，改為gitee倉庫的地址(記得以“/”結尾)(不用加.git)(不要出現多余空格)，添加配置

  • 添加最后三行

• 查看主題效果

  • 在myblog中

    hugo server -t ghostwriter --buildDrafts

  • 將末尾的http://localhost:1313復制到本地瀏覽器中，回車(注意此時git bush保持打開；推薦使用谷歌瀏覽器)
  • 注意：git bush上的復制粘貼要右鍵copy/paste

• 創建自己的博客文章（心急的同學可先跳過此步）

  • 添加博客

    • 打開myblog/content/post,新建blog.md(博客源檔案)

    • 用vscode, Typora, Notepad++等軟體打開 blog.md (如果都沒有，記事本也是可以的)

    • 開頭寫入
      

    • 按markdown的語法撰寫具體內容

    • 回到myblog檔案夾，

      hugo server -t ghostwriter --buildDrafts

    • 將末尾的http://localhost:1313復制到本地瀏覽器中，回車，即可預覽自己的博客

• 將本地博客部署到gitee上

  • 在myblog檔案夾下

    hugo --theme=ghostwriter --baseUrl="(倉庫地址)" --buildDrafts

  • 在myblog中會生成public檔案夾

  •   1.cd public
      2.git init                          //初始化本地倉庫
      3.git add .						  //將public檔案夾下的所有檔案放入快取流中等待提交，注意此處空一格有個點
      4.git commit -m "xx"                //把快取內容放進發送頭，仍為待發送狀態，“xx”為對本次上傳作的說明
      5.git remote add origin (倉庫地址)   //系結了.git組態檔夾對應的遠端服務器
      6.git push -u origin master         //推送到gitee
    

    注意

    • 執行git init前最好先看下.gitignore檔案是否限制了上傳的內容(會導致在gitee上顯示博客是出現404),如果是的話修改為

    • 如果出現警告
      輸入

      git config core.autocrlf false //僅對當前git倉庫有效
      或 git config --global core.autocrlf false //全域有效

    • 如果只要上傳某個檔案，輸入

      git add xxx(檔案名)

  • 查看gitee上的博客
    • 點擊gitee右上方的服務->Gitee pages，強制使用HTTPS,點擊啟動，打開生成的網址，就可以看到自己寫的博客了
    • 如果發現沒有主題，先重繪一下，看是否有效；如果還是無效，打開瀏覽器的開發者工具，在head中看.css鏈接是否倉庫地址gitee.io后是否缺少一個“/”，如果少了，在本地myblog檔案夾中config.toml檔案中將baseUrl的地址最后加上一個“/”，再次上傳public檔案夾的內容

• 本地修改后再次上傳

  • myblog中

       1.hugo                    //編譯站點（要在本地瀏覽器查看，則使用 hugo server）
       2.cd public
       3.git add .
       4.git commit -m “xxx”
       5.git push -u origin master
    

6.感言

至此博客搭建大功告成！

博客的搭建程序也許不會那么順利，各種各樣的bug可能會讓人懷疑人生，但堅持下來，看著自己一手搭建的博客，你會覺得之前付出的一切都是值得的！這也正是我們技術人的驕傲，

第一次寫博客，錯誤在所難免，歡迎各位指正，不勝感激！

如果有小伙伴對本文感興趣或者有什么想法，可以私聊小編，大家一起研究探討~

PS：經過一輪搭建，你是否get到了如何不建博客只上傳檔案，沒錯，就是省去跟博客有關的所有步驟，快上機試試吧！

Reference
[1]: https://blog.csdn.net/man_zuo/article/details/88651416
[2]: https://blog.csdn.net/weixin_43691058/article/details/101772871