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

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

1.为什么要用gitee？

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

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

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账号
点击右上角“+”号新建仓库

扫描二维码关注公众号，回复： 11982432 查看本文章
自定义仓库名（无需跟用户名相同）
是否开源：公开
创建

现在你有了自己的仓库，记得记下仓库地址，后边要用到哦~

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文件夹
- ```
  cd public
  git init                          //初始化本地仓库
  git add .						  //将public文件夹下的所有文件放入缓存流中等待提交，注意此处空一格有个点
  git commit -m "xx"                //把缓存内容放进发送头，仍为待发送状态，“xx”为对本次上传作的说明
  git remote add origin (仓库地址)   //绑定了.git配置文件夹对应的远端服务器
  git push -u origin master         //推送到gitee
```
  注意
  - 执行git add .前最好先看下.gitignore文件是否限制了上传的内容(会导致在gitee上显示博客是出现404),如果是的话修改为
    - 解释：这个文件是用来书写忽略规则的（忽略的文件不会上传到gitee上）
    - 以“#”号开头表示解释，即文件实际上没有忽略规则，自然就都上传啦~(当然也可以直接将这个文件删除)
    - 如果不想每次都修改的话，可以修改static文件夹中.gitignore文件
  - 如果出现警告
    输入
    
    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中

   hugo                    //编译站点（要在本地浏览器查看，则使用 hugo server）
   cd public
   git add .
   git commit -m “xxx”
   git push -u origin master

6.感言

至此博客搭建大功告成！

博客的搭建过程也许不会那么顺利，各种各样的bug可能会让人怀疑人生，但坚持下来，看着自己一手搭建的博客，你会觉得之前付出的一切都是值得的！这也正是我们技术人的骄傲。

第一次写博客，错误在所难免，欢迎各位指正，不胜感激！

如果有小伙伴对本文感兴趣或者有什么想法，可以在评论区留言，大家一起研究探讨~

PS：经过一轮搭建，你是否get到了如何不建博客只上传文件，没错，就是省去跟博客有关的所有步骤，快上机试试吧！

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

文章目录

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

1.为什么要用gitee？

2.安装git

3.安装Hugo

4.创建远程仓库

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

6.感言

猜你喜欢

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