所有文章 标签 分类 Github 友链

目录

Hugo搭建博客

 收录于 其它
   约 2530 字   预计阅读 6 分钟 

教你如何简单地搭建属于自己的博客。

一、安装hugo

本人以window系统为例，介绍如何安装Hugo，具体可见官方文档 。

  1. 下载hugo二进制文件hugo_extended_0.102.2_Windows-64bit.zip
  2. 再配置环境变量，若你的hugo.exe的位置为C:\environment\hugo\hugo.exe，就在用户环境变量path中配置C:\environment\hugo。
  3. 配置完后重启计算机。

二、 创建站点

  1. 创建站点文件并安装主题

    选择你站点文件夹所要存放的位置，命令行中cd进入该位置，使用new命令创建站点

    1

    hugo new site blog

    进入blog文件夹，下载主题。本人采用 LoveIt 主题，文档地址 。当然也可以配置其它主题。下载 LoveIt 主题方法如下：

    1
2

    cd blog
git clone https://github.com/dillonzq/LoveIt.git themes/LoveIt

    也可以下载主题.zip 文件，解压后放在themes目录下。

  2. LoveIt 主题的基本配置

    将lovelt的基本配置放于config.toml文件中，直接覆盖config.toml即可。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

    baseURL = "http://example.org/"

# 更改使用 Hugo 构建网站时使用的默认主题
theme = "LoveIt"

# 网站标题
title = "我的全新 Hugo 网站"

# 网站语言, 仅在这里 CN 大写 ["en", "zh-CN", "fr", "pl", ...]
languageCode = "zh-CN"
# 语言名称 ["English", "简体中文", "Français", "Polski", ...]
languageName = "简体中文"
# 是否包括中日韩文字
hasCJKLanguage = true

# 作者配置
[author]
  name = "xxxx"
  email = ""
  link = ""

# 菜单配置
[menu]
  [[menu.main]]
    weight = 1
    identifier = "posts"
    # 你可以在名称 (允许 HTML 格式) 之前添加其他信息, 例如图标
    pre = ""
    # 你可以在名称 (允许 HTML 格式) 之后添加其他信息, 例如图标
    post = ""
    name = "文章"
    url = "/posts/"
    # 当你将鼠标悬停在此菜单链接上时, 将显示的标题
    title = ""
  [[menu.main]]
    weight = 2
    identifier = "tags"
    pre = ""
    post = ""
    name = "标签"
    url = "/tags/"
    title = ""
  [[menu.main]]
    weight = 3
    identifier = "categories"
    pre = ""
    post = ""
    name = "分类"
    url = "/categories/"
    title = ""

# Hugo 解析文档的配置
[markup]
  # 语法高亮设置 (https://gohugo.io/content-management/syntax-highlighting)
  [markup.highlight]
    # false 是必要的设置 (https://github.com/dillonzq/LoveIt/issues/158)
    noClasses = false

  3. 创建第一篇博客并启动网站

    1
2

    hugo new posts/first_post.md #创建第一篇博客
hugo serve --buildDrafts #启动网站

    访问http://localhost:1313可查看网站。

  4. 博客文件first_post.md会放置在content文件夹中的posts文件夹下。以后想要写博客，都要采用 hugo new 的方式，将博客放置在posts文件夹中。想要删除博客，只需删掉posts文件夹下对应的博客md文件即可。

三、将博客部署到github

GitHub拥有一个GitHub pages功能，可以充当部署静态网站的服务器。

  1. 首先在GitHub上创建一个Repository，命名为：你的github用户名.github.io。

  2. 执行 Hugo 命令生成最终页面

    1
2

    hugo --theme=LoveIt --baseUrl="https://chengsecret.github.io/" --buildDrafts
   # chengsecret.github.io为我的GitHubPages地址，改成你的即可

  3. 上述步骤会生成public文件夹，将public文件夹push到GitHub的你的github用户名.github.io仓库中即可。

    1
2
3
4
5
6
7
8

    cd public
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:chengsecret/chengsecret.github.io.git
  # 修改为自己的仓库地址
git push -u origin main

    浏览器访问https://chengsecret.github.io/，成功！（可能会有延迟，可以过一会儿再访问）

  4. 后续要再上传博客的话，可以：

    1
2
3
4
5
6
7

    hugo new posts/second_post.md #创建第二篇博客
# .....编写你的博客second_post.md
hugo --theme=LoveIt --baseUrl="https://chengsecret.github.io/"
cd public
git add .
git commit -m "second commit"
git push -u origin main

  5. 后续再根据自己的喜好和LoveIt官网 ，编辑配置文件config.toml

四、githubpages自定义域名

如果你拥有域名，可以用自己的域名来访问你的博客。因为githubpages已经充当了搭建博客的服务器角色。因此，只需两步即可完成用自己的域名来访问博客。

  1. 进入服务商（如腾讯云）提供的域名管理界面，添加域名解析。记录类型CHAME表示域名指向的也是一个域名，记录值填GitHub博客访问域名。

    /博客搭建/image-20220916210458221.png

  2. 在GitHub的XXX.github.io仓库中，点击settings—->pages—–>custom domain中，填入你的域名，点击save即可。完成后，就可以通过blog.koisecret.site来访问博客了。此操作会在代码中生成一个CNAME文件，因此本地git要pull一下，防止下次提交的冲突。

    /博客搭建/image-20220916210314927.png

  3. 后续还可以自己搜索，如何使用CDN加快博客的访问速度，毕竟现在的博客仍然是放在GitHub服务器上的，访问速度可能会比较慢。

五、在多台电脑写博客？

​ 现在的xxx.github.io仓库中，存放的是hugo生成的public文件夹。如果你有多台电脑（实验室一台、寝室一台…)，想要哪里都能用hugo写博客，那就必须保证content文件夹中的md文件同时保存在你使用的多台电脑中，并且多台电脑上hugo的主题、配置等都需完全一样，否则生成的public文件夹会各不相同，你无法在多台电脑上上传博客。

​ 怎么办？将整个blog站点文件夹都上传到仓库中，再通过git来同步多台电脑中的文件。

  1. Github Pages默认是将仓库根目录作为网页进行发布，只需在settings—->pages中，将/root改为/docs，GitHub pages就会将读取网站的目录改为docs目录。

    /博客搭建/image-20220916221934686.png

  2. 修改config.toml文件，将生成的静态页面文件夹设置到 docs 下，而不是 publish

    1
2

    baseURL = "https://blog.koisecret.site/"  # 设置为 github pages 发布的地址
publishDir = "docs"  # 将生成的静态页面文件夹设置到 docs 下，而不是 publish

  3. 再次用hogu命令创建博客以及构建网站，会发现此时生成的网站不在public文件夹中，而在docs文件夹中。

  4. 将整个blog站点文件夹通过git上传至githubpages即可。如果有冲突，可以：

    1

    git push -f --set-upstream origin main:main

  5. 在另一台电脑上，安装hugo，使用git clone从github上下载整个blog站点文件夹，那两台电脑上的文件就一模一样了。

遇到的问题

我在另一台电脑上使用hugo命令报错 Failed to read Git log: Git executable not found in $PATH，将config.toml中的enableGitInfo = true改为enableGitInfo = false即可。

更新于 2022-09-17
 博客搭建
返回 | 主页