如何使用hugo+github搭建个人博客

Franky 收录于类别 computer

2022-09-24 2022-09-24 约 1382 字预计阅读 3 分钟

如何使用hugo+github搭建个人博客

hugoBlog项目的目录

├── config.toml # 博客的配置信息
├── archetypes # 存放 .md 文件的模板
├── content # 存放 .md 文件
├── data # 存放 Hugo 数据
├── layouts # 存放布局文件
├── public # 公共文件夹，用于存放生成的站点文件
├── static # 存放静态文件，比如图片、CSS、JS
└── themes # 存放主题

1. windows安装hugo

在 https://github.com/gohugoio/hugo/releases 中选择版本下载

我下载的是 hugo_extended_0.103.0_windows-amd64.zip 拓展版

然后将解压得到的文件夹中的hugo.exe文件路径添加到系统环境变量的path中，至此hugo成功安装到windows上，可在cmd使用hugo version检测是否成功安装hugo

2.快速在windows本地搭建博客

在cmd中输入 hugo new site D:/hugoBlog 创建自己博客的源码文件夹

在 https://themes.gohugo.io/tags/blog/ 选择自己喜欢的hugo主题，我选的是DoIt

打开git bash并切换到D:/hugoBlog目录（cd /d d:\hugoBlog），依次输入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


# 安装DoIt hugo主题
git clone https://github.com/HEIGE-PCloud/DoIt.git themes/DoIt

# 手动将 D:\hugoBlog的config.toml修改为DoIt主题基本配置，如下

# 新建一篇文章和一个关于页面
hugo new "posts/hello-world.md"
hugo new "about/_index.md"

# 在本地启动hugo
hugo server -D

打开 http://localhost:1313/ 便能成功访问本地搭建的博客

DoIt主题最基本配置：（记住 theme参数的值必须与 D:\hugoBlog\themes\ 目录下主题文件夹名一致，我这里就是DoIt）

 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


baseURL = "http://localhost:1313/"
# [en, zh-cn, fr, ...] 设置默认的语言
defaultContentLanguage = "zh-cn"
# 网站语言, 仅在这里 CN 大写
languageCode = "zh-CN"
# 是否包括中日韩文字
hasCJKLanguage = true
# 网站标题
title = "Franky's Blog"

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

[params]
  # DoIt 主题版本
  version = "0.2.X"

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

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

3.将本地hugo部署到github

创建一个公开仓库，仓库名必须为FrankyEdison.github.io

编辑 hugoBlog 目录下的 config.toml 配置文件，修改为

baseURL = 'https://FrankyEdison.github.io/'

然后回到hugoBlog 目录下执行下面命令

hugo -D

便会在会在hugoBlog目录下生成 public目录，其中包含你网站的所有静态内容和资源，现在可以将其部署在任何 Web 服务器上，打开gitbash依次输入以下命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


# 进入public 目录
cd public
# 创建初始化本地仓库
git init
# 添加当前目录下所有文件进暂存区
git add .
# 提交，即保存版本
git commit -m "我的首次提交"
# 连接远程的地址
git remote add origin https://github.com/FrankyEdison/FrankyEdison.github.io.git
# 将本地仓库推送远程仓库分支master
git push origin master

在浏览器打开 https://FrankyEdison.github.io/ 便能访问搭建好的个人博客

4.日常使用

在hugoBlog目录下依次执行以下命令

1
2
3
4
5


# 新建博客markdown文件，并编辑博客内容(文件名为 **.md )
hugo new "posts/hello-world.md"

# 生成public目录
hugo -D

在hugoBlog/public目录下依次执行以下命令

1
2
3
4
5
6
7
8


# 添加当前目录下所有文件进暂存区
git add .

# 提交，即保存版本
git commit -m "new blog added"

# 将本地仓库推送远程仓库分支master
git push origin master