用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
  [图片上传失败...(image-6ce59b-1603207869281)]

• 创建一个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的themes文件夹里

    • 命令行操作：

      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 add .前最好先看下.gitignore文件是否限制了上传的内容(会导致在gitee上显示博客是出现404),如果是的话修改为[图片上传失败...(image-63244b-1603207869281)]

      • 解释：这个文件是用来书写忽略规则的（忽略的文件不会上传到gitee上）
      • 以“#”号开头表示解释，即文件实际上没有忽略规则，自然就都上传啦~(当然也可以直接将这个文件删除)
      • 如果不想每次都修改的话，可以修改static文件夹中.gitignore文件

    • 如果出现警告[图片上传失败...(image-cb8721-1603207869281)]
      输入

      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文件夹的内容

      在这里插入图片描述

      
      + 如果还是没有渲染，可将本地的config.toml文件里的baseUrl注释掉（注释方法：在行首输入“## ”），删除public文件夹，再重新部署到gitee上，部署前先把远程仓库清空，然后命令
      >hugo --theme=ghostwriter --baseUrl="(仓库地址)" --buildDrafts

      改为

      hugo --theme=ghostwriter --buildDrafts

      然后就是正常的部署操作了。

• 本地修改后再次上传

  • 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