HUGO 笔记

创建页面及文章

首先使用以下命令创建章节

hugo new --kind chapter 个人笔记/_index.md

然后,在之前创建的章节中创建内容页面。以下是在本章中创建内容的两种方法

hugo new 个人笔记/文章标题.md
hugo new 个人笔记/文章分类/_index.md

更改Favicon

如果您的faviconSVGPNGICO,只需将您的图像放在您网站的static/images/目录并命名它favicon.svgfavicon.png

更换徽标

在网站的layouts/partials/logo.html中创建新文件。然后写任何你想要的HTML。您可以使用一个imgHTML标签并引用在_static_ folder下创建的图像,或者您可以粘贴一个SVG定义!

注释

徽标的大小将自动适应。

部分

Relearn主题已通过定义多个 partials-部分

In themes/hugo-theme-relearn/layouts/partials/, 您将找到为此主题定义的所有部分。如果您需要覆盖某些内容,请不要直接更改代码。相反,请关注此页面. 你会在…中创建一个新的部分layouts/partials您本地项目的文件夹。这部分将具有优先权。

这个主题定义了以下部分:

  • header.html: 页面的标题。查看 output-formats - 输出格式
  • footer.html: 页面的页脚。查看 output-formats - 输出格式
  • body.html: 页面正文。身体可能包含一件或多件物品。查看输出格式 output-formats
  • article.html: 单篇文章的输出,可以包含围绕您内容的元素。查看输出格式 output-formats
  • menu.html: 左侧菜单。无意被覆盖
  • search.html: 搜索框。无意被覆盖
  • custom-header.html: 页面中的自定义标题。意味着在添加CSS导入时被覆盖。不要忘记在文件中包含 style HTML标签指令。
  • custom-footer.html: 页面中的自定义页脚。意味着在添加JavaScript时被覆盖。别忘了包括javascript文件中的HTML标签指令。
  • favicon.html: 网站图标
  • heading.html: 侧边配置,以改变页面标题标题。
  • heading-pre.html: 侧边配置,以附加到页面标题标题。如果你忽略了这一点,你有责任考虑页面的headingPre设置。
  • heading-post.html: 侧边配置,以附加到页面标题标题。如果您忽略了这一点,您有责任考虑页面的headingPost设置。
  • logo.html: 徽标,在左上角
  • meta.html: HTML元标记,如果您想更改默认行为
  • menu-pre.html: 侧边配置,以先于菜单项。如果您覆盖此,您有责任获取该页面的menuPre考虑在内。
  • menu-post.html: 侧边配置,以附加到菜单项。如果您覆盖此,您有责任获取该页面的menuPost考虑在内。
  • menu-footer.html: 左侧菜单的页脚
  • toc.html: 目录表
  • content.html: 内容页本身。如果您希望在内容上方或下方显示页面的元数据,则可以重写。
  • content-header.html: 标题上方的标题,有一个默认的实现,但如果你不喜欢它,你可以覆盖它。
  • content-footer.html: 内容下方的页脚,有一个默认实现,但如果你不喜欢它,你可以覆盖它。

在本地启动网站

hugo serve

浏览器打开 http://localhost:1313

构建网站

当您的网站准备部署时,运行以下命令:

hugo

罗马字母的第一个字母public将生成文件夹,包含您网站的所有静态内容和资产。它现在可以部署在任何网络服务器上.

一:查看安装版本

hugo version

二:安装Hugo ➡️ 已经安装就忽略

brew install hugo

三:创建本地站点 ➡️ 进入根目录

hugo new site My-6oo; cd My-6oo

克隆主题到本地

git clone https://github.com/McShelby/hugo-theme-relearn.git

指向当前主题路径

    echo "theme = 'hugo-theme-relearn'" >> hugo.toml

或者

    hugo server -t hugo-theme-relearn --buildDrafts
    hugo server -t shadocs --buildDrafts

四:创建章节页面

主题提供了为您的网站创建骨架的原型。

hugo new --kind chapter 个人笔记/_index.md

五:创建您的第一个内容页面

然后,在之前创建的章节中创建内容页面。以下是在本章中创建内容的两种方法:

hugo new 开源工具/小工具推荐/_index.md
hugo new basics/first-content.md

通过添加一些示例内容并替换文件开头的值来编辑这些文件。title

六:在本地启动网站

使用以下命令启动:

hugo server

转到http://localhost:1313

您应该注意三件事:

  1. 您有一个左侧的“基本”菜单,其中包含两个子菜单,其名称与先前创建的文件中的属性相同。title
  2. 页说明了如何按照说明对其进行自定义。
  3. 跑步时hugo serve,当文件内容发生更改时,页面会自动刷新。整洁!

建立网站 当站点准备好部署时,请运行以下命令:

hugo

四:克隆主题到本地

git clone https://github.com/zhaohuabing/hugo-theme-cleanwhite.git
git clone https://github.com/McShelby/hugo-theme-relearn.git

2:或者

cd myblog/themes 把exampleSite文件夹内容复制到根目录

cp -r relearn/exampleSite/** ../
cd ..

五:运行指定主题

hugo server -t relearn --buildDrafts

六:创建github仓库

hugo --theme=hugo-theme-cleanwhite --baseURL="https://6oo-cn.github.io" --buildDrafts
cd public

检查配置信息

git config --global --list

创建文章

hugo new post/my-post.md

指向当前主题路径

echo "theme = 'paper'" >> hugo.toml

或者:

hugo server -t hugo-theme-cleanwhite --buildDrafts

2:启动雨果的开发服务器来查看网站

hugo server --buildDrafts

hugo server -D

发布博客到Github Pagesgit

一:克隆git仓库到本地

git clone git@github.com:6oo-cn/6oo-cn.github.io.git

二:制作软链接

Ln -s /Users/6oo-cn/wwwblog/6oo-cn.github.io /Users/6oo-cn/wwwblog/public

三:初始化已存在的 Git 仓库

git init
1. hugo
2. cd 6oo-cn.github.io
3. git status
4. git add *
5. git status
6. git commit -m "我的第2次提交"
7. git push

二次提交从 4 步开始

创建ssh keys

ssh-keygen -t rsa -b 1718 -C "<vip.6oo@qq.com>"

回车三次

cat ~/.ssh/id_rsa.pu