笔记丨利用gitee创建个人博客网站

Eoaf+Gotr

已于 2023-03-01 16:38:24 修改

阅读量3.1k

点赞数

文章标签： git

于 2022-03-26 18:10:44 首次发布

本文链接：https://blog.csdn.net/qq_40762653/article/details/123693563

版权

利用Gitee创建个人博客网站

首先，打开这个网址Gitee Page Help。看一下这个官方介绍的gitee page。

PS：Gitee Page需要实名认证，可能还会花点时间

如果要自己手写前端页面的话，可以按照gitee page的指引将网站创建起来。否则，就可能需要学习一下一些静态网站生成器的使用。使用生成器的好处就是可以不写前端代码，写写配置文件就能把前端页面做起来。

gitee page推荐了三个生成器：由Ruby写的Jekyll，由go写的Hugo，由js写的Hexo。

Hugo 简单教程

学一个生成器怎么使用，可能更多的是在了解这个生成器的配置方式。hugo使用的配置文件是toml文件，这也是gitee page用于区分不同生成器的方式。

存在 config.toml和content目录则是hugo
存在package.json、_config.json和scaffolds目录时，是hexo
不符合上述情况判定为Jekyll

使用生成器来生成网站的逻辑就是在本地通过生成器程序，按照配置将前端所需要的文件生成出来，然后再将这些文件上传到gitee或者github，从而产生个人博客的效果。

使用生成器的原因还是在于可以减少在搭建自己的个人博客的时候耗费在网站前端的时间。生成器的作用就是将方便书写的markdown文件转为html文件，以便当作个人博客展示。因此，生成器结合Gitee Page的使用方式则有两种：

在本地使用生成器将markdown文件转为html系列文件，然后将这部分html系列文件上传到gitee
将markdown文件上传到gitee，然后在gitee page中重新部署

首先就是装一个hugo，可以下载现成的release版本的可执行文件，免去配置环境的麻烦。
然后基本就可以在本地按照以下步骤看一下hugo的表现：

# 创建一个网站项目
hugo new site my_website
# 进入到这个项目里
cd my_website
# 给这个项目克隆一个主题，这里使用的是 LoveIt 主题
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt
# 或者是my_website项目用git初始化，然后将主题作为子模块
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
# 然后是改一下my_website文件夹下的config.toml配置文件

关于config.toml配置文件如何修改，可以参考这个主题的使用教程

TOML 简介

可以参考这个toml格式配置文件详解
其他参考资料TOML介绍

再说一点其他的，TOML放弃了括号（json）或者缩进（yaml）的底层原理，采取了显式键名链的方式。

似乎TOML的优势就是在没有智能编辑器的情况下，好读又好写。

那显式键名链是什么意思呢？
TOML规范中像编程语言一样规定了一些数据类型，包括字符串（注意转义的事）、整数、浮点数、布尔值（true、false）、哈希表、数组（方括号、逗号分隔、不允许混用数据类型）、日期等。
TOML文件的整个内容可以被看作一个巨大的哈希表。最上层的表我们可以称之为「根表」，在TOML文件里的东西都可以看作是根表里的东西，可以通过「.」来定位到。这种定位方式就被称为显式键名链方法。「=」左边的都是键名，右边的是值。[chapter]这种也是键名，这种标志下面的内容都是这个键的值。除去这种一对中括号的情况外，还会有两对中括号，比如[chapter2]]，意思这个键名对应的值是一个数组，所有出现[[chapter2]]后面的内容组成一个数组，这个数组的键就是chapter2。

关于这个地方可以这么理解，首先是把[chapter2]当作一个键名，然后外层的括号当作是数组的标志，然后所有出现[[chapter2]]的地方的内容（[[chapter2]]会多次出现）都代换进[chapter2]，然后这个时候就会出现[第1个地方的实际内容，第2个地方的实际内容，…]这种情况。这种情况就恰好是一个数组，然后这个数组的键名就是chapter2。

a = 1 # 根表.a
b = 2 # 根表.b
[chapter1] # 根表.chapter1
[chapter1.section1] # 根表.chapter1.section1
[[chapter2]] # 表示chapter2对应的值的类型是数组，数组内容由所有的[[chapter2]]所对应的内容构成
[[chapter2]]

举个例子：

    [[products]]
    name = "Hammer"
    sku = 738594937
    
    [[products]]
    
    [[products]]
    name = "Nail"
    sku = 284758393
    color = "gray"

这个toml文件等价于下面这个json文件

{
  "products": [
    { "name": "Hammer", "sku": 738594937 },
    { },
    { "name": "Nail", "sku": 284758393, "color": "gray" }
  ]
}

部署gitee

需要的几个git命令

git init
git remote add xxx # 添加远端仓库
git push
git pull

遇到的问题

md文章无法正常找到

这个需要修改toml配置文件中的baseURL，换成gitee page生成的那个地址。

gitee page不能正常加载主题样式

第一个原因是因为windows下的git会自动将所有文件里的LF换行符换成CRLF换行符，需要禁用一下git的这个行为。

git config --global core.autocrlf false

第二个原因可能是hugo版本的问题，有些主题可能需要hugo extended版。
如果百度了一波之后也将问题修改了，但是博客主页还是没变化，那可能是浏览器启用了缓存，将缓存停用掉再检查。

关于文章中的图片问题

hugo会将content中的内容编译到public目录下（也就是将md文件转为html相关的文件），将md文件的名字转为public目录下的一个文件夹，对于一般的文件夹，hugo同样会执行这样的操作。也就是，原来的md文件和img文件夹是平级，md问价访问img文件夹只需要./，但是在hugo转换之后，md文件就会被下调一级，此时访问img文件夹需要../。

除了将图片一起上传到gitee上，然后再采用合适的路径访问这种方式外，还可以使用一些网站提供的图床的功能。