用Hugo在gitee上构建博客（Windows环境下）

时间：2022-03-27 15:04:26

用Hugo在gitee上构建博客（Windows环境下）

大家好！这是我第一次在gitee上搭建博客，也是我第一次写博客。作为一个博客小白，我在搭建博客的过程中走了很多弯路，但也收获了丰富的经验。现在我把自己搭建博客的过程分享给大家，希望能帮助到有需要的人。当然其中还有很多不足之处，欢迎各位大佬指教！

1.为什么要用gitee？

相信很多朋友都觉得用GitHub搭建博客会更好，那为什么还要使用gitee呢，下面我总结了几点使用gitee的优点：

  1. 更流畅的访问 由于某些众所周知的原因，GitHub有些时候可能无法访问或访问缓慢，gitee由于服务器在国内，访问速度还是很不错的；（呀！在小编写这篇博客的当天有很多朋友表示无法访问GitHub~）
  2. 私有仓库 相比于GitHub，gitee提供了私有仓库的功能，给代码在网上的托管提供了更多的选择。

2.安装git

3.安装Hugo

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

    用Hugo在gitee上构建博客（Windows环境下）

  • 创建一个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

  • 创建自己的博客文章（心急的同学可先跳过此步）

  • 将本地博客部署到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),如果是的话修改为用Hugo在gitee上构建博客（Windows环境下）

      • 如果出现警告![在这里插入图片描述](https://img-blog.csdnimg.cn/20201004220248890.jpg#pic_center =400x150)

        输入

        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文件夹的内容用Hugo在gitee上构建博客（Windows环境下）

      • 如果还是没有渲染，可将本地的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

相关文章