XiaoWan's Blog

Hugo是一款静态网站生成器，用Go语言编写，它具有快速，灵活，强大的特性。Hugo可以轻松地创建博客，静态网站，文档站点，以及任何其他网站。Hugo拥有一个强大的主题系统，可以轻松定制和美化网站，并且支持Markdown，HTML，CSS，JavaScript等多种格式。Hugo还支持多语言，可以轻松创建多语言网站。

安装hugo

Hugo中文文档

https://www.gohugo.org/

Hugo官方官网

https://gohugo.io

Hugo安装包下载地址：

https://github.com/gohugoio/hugo/releases

在下载Hugo安装包时，有Hugo和Hugo-extended两种可运行文件下载，其中Hugo仅支持JS，Hugo-extended是Hugo的扩展版本，在支持JS的基础上还支持TS，所以在下载时建议下载Hugo-extended版本的可执行文件。

Windows系统的安装与配置

在Hugo安装包下载地址：Releases · gohugoio/hugo (github.com)下载好Hugo.exe文件后，将Hugo.exe文件放在想要存放的位置即可，比如我这里放在D:\Blog\Hugo文件夹下面，此时在该文件夹下面打开cmd命令提示符即可运行Hugo的相关命令，运行命令Hugo命令实际上就是在调用Hugo.exe文件。

Windows环境变量配置

​ 此电脑 – 属性 – 高级系统设置 – 高级 –环境变量 – Path

​ 在Windows的系统环境变量配置中，添加存放Hugo.exe文件的文件夹，确定之后即可在其他任意地方运行Hugo命令而不是仅在安装位置运行。

安装检查

​ 在配置好环境变量后，在cmd或者shell（尽量不要在可执行文件存放的位置中）中运行Hugo命令检查是否安装成功，一般而言使用version查看是否安装成功。

在cmd和shell中执行：

hugo version

成功示例：

hugo v0.110.0-e32a493b7826d02763c3b79623952e625402b168+extended windows/amd64 BuildDate=2023-01-17T12:16:09Z VendorInfo=gohugoio

创建Hugo站点

使用Hugo创建一个新的站点非常简单。在终端或命令行工具中输入以下命令：

hugo new site blog-hugo

这会在当前目录下创建一个名为blog-hugo的新站点。你也可以自定义站点的名称和位置。

安装主题

两款漂亮的主题：

https://github.com/CaiJimmy/hugo-theme-stack

https://github.com/Mantyke/Hugo-stack-theme-mod

cd blog-hugo/themes
git clone https://github.com/CaiJimmy/hugo-theme-stack

这会将"Hugo-stack-theme-mod"主题下载到blog-hugo/themes目录中。

修改配置

blog-hugo根目录下config.toml重命名为config_backup.toml

再把blog-hugo\themes\hugo-theme-stack\exampleSite的文件拷贝到blog-hugo根目录

config.yaml是站点的配置文件，修改它即可

baseurl: https://example.com
languageCode: zh-cn
theme: stack
paginate: 5
title: 时光Blog

# Change it to your Disqus shortname before using
disqusShortname: stack

# GA Tracking ID
googleAnalytics:

# Theme i18n support
# Available values: en, fr, id, ja, ko, pt-br, zh-cn, zh-tw, es, de, nl, it, th, el, uk
DefaultContentLanguage: zh-cn


# Set hasCJKLanguage to true if DefaultContentLanguage is in [zh-cn ja ko]
# This will make .Summary and .WordCount behave correctly for CJK languages.
hasCJKLanguage: true

创建文章

使用Markdown语法编写文章，我习惯使用Typora软件，搭配图床非常好用。

---
title: 青龙面板安装搭建保姆级教程
date: 2023-02-25T18:29:44+08:00
draft: false
categories:
  - Linux
  - 教程
tags:
  - 青龙面板
  - docker
image: http://browser9.qhimg.com/bdr/__85/t0179b947962a684673.jpg
---
正文

在上面的代码中，title指定文章的标题，date指定文章的发布时间，draft设置为false表示文章已经发布。在---之后的部分就是文章的正文内容，使用Markdown语法编写。

青龙面板安装搭建保姆级教程.md文件放入blog-hugo/content/post目录

左侧菜单中文化

修改blog-hugo\content\page目录里文件，about对应关于，archives是归档，friends是友链，search是搜索

再修改每个文件夹内的index.md文件

title: 关于
description: Hugo, the world's fastest framework for building websites
date: '2019-02-28'
aliases:
  - about-us
  - about-hugo
  - contact
license: CC BY-NC-ND
lastmod: '2020-10-09'
menu:
    main: 
        weight: -50
        params:
            icon: user

把title: 后面改成对应的中文

归档页修改

blog-hugo\content\categories目录内新建分类文件夹，文件夹内再新建_index.md文件

修改_index.md文件

title: "教程"
description: "分享一些教程和折腾的经验"
slug: "教程"
image: "教程.png"
style:
    background: "#2a9d8f"
    color: "#fff"

背景图片放入同目录

效果如下

预览站点

在cmd中输入以下命令：

hugo server -D

这会启动一个本地的Web服务器，你可以在浏览器中访问http://localhost:1313/预览你的站点。

部署站点

当你满意站点的样式和内容后，你可以使用Hugo生成静态文件，并将它们部署到服务器上。在终端或命令行工具中输入以下命令：

hugo

这会在当前目录下生成静态文件，包括HTML、CSS、JS等。你可以将这些文件上传到你的Web服务器上。你可以使用FTP或SCP等工具将文件上传到服务器上，也可以将静态文件部署到GitHub Pages或Netlify等平台上。

如果你想将静态文件部署到GitHub上，可以按照以下步骤操作：

1. 在GitHub上创建一个新的仓库，名称为blog-hugo

2. 运行以下命令生成静态文件：

   hugo
   

3. 将生成的静态文件上传到GitHub仓库中，在终端或命令行工具中进入站点根目录，运行以下命令：

   cd 
   git init
   git add -A
   git commit -m 'deploy'
   git push -f https://${ghp_xxx}@github.com/xiaowansm5/blog-hugo.git master:main
   

ghp_xxx填入你的github令牌，master:填入仓库分支

至此，你已经成功地使用Hugo创建了一个静态网站并将其部署到了GitHub上。