Hugo博客搭建及stack主题设置

安装Hugo

Hugo有标准版、扩展版(extended),还有一个部署版(extended_withdeploy),扩展板多了图像和Sass处理器,部署版支持直接部署到google、AWS云等。

直接下载扩展版:https://github.com/gohugoio/hugo/releases/

解压后将hugo.exe目录添加到全局环境变量中。

  • 新建站点

hugo new site quickstart

  • 初始化git

git init

hugo命令见官方指南:https://hugo.opendocs.io/getting-started/

安装主题

hugo主题网站:https://themes.gohugo.com.cn/

这里使用stack主题:https://stack.jimmycai.com/

  • 安装主题

直接使用git命令或者手动下载放到themes目录下

git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stack

主题设置

stack主题设置参考:https://stack.jimmycai.com/config/

以下本站设置:

baseURL = 'http://kizx.gitee.io/'
languageCode = 'zh-cn'
title = '醉后的星星'
theme = 'hugo-theme-stack'
copyright = 'kizx'
DefaultContentLanguage = 'zh-cn'


[params]
favicon = "/favicon.ico"

[params.sidebar]
#compact = true
emoji =  '🔞'
subtitle = "我好菜啊"
avatar.enabled = true
avatar.local = true
avatar.src = "img/avatar.gif"

[params.Footer]
since = 2019
#customText = ""

[params.Article]
headingAnchor = true
math = true
readingTime = false

[params.widgets]
homepage = [
	{type = 'search'},
	{type = 'archives'},
	{type = 'tag-cloud'},
]
page = [
	{type = 'toc'},
	{type = 'categories'},
]

[params.opengraph]
twitter.site = "kizx"
twitter.card = "summary"
enabled = true
src = "img/default.jpg"
local = true

[menu]
[[menu.social]]
identifier = 'github'
url = 'https://github.com/kizx'
params.icon = 'brand-github'

[[menu.social]]
identifier = 'bilibili'
url = 'https://space.bilibili.com/22411920'
params.icon = 'brand-bilibili'

左侧菜单页设置:

直接将hugo-theme-stack\exampleSite\content\page拷贝到网页的content\page中

需要出现在菜单栏中的页面通过在md文件的Front Matter中添加:

menu: 
    main:
        name: title (optional)
        weight: -90
        params:
            icon: icon-name

或者直接在配置文件中添加,但在配置文件中添加会缺少当前惨淡选中高亮显示。

参考

使用hugo stack主题快速搭建博客

【Hugo】配置 (stack 主题)

图标下载

如何用 GitHub Pages + Hugo 搭建个人博客