何朝红的BLOG

hugo学习基础

用hugo架设blog
 hugo  574  2 分钟

基础知识

参考 https://gohugo.io/getting-started/usage/ 和 https://github.com/reuixiy/hugo-theme-meme.git

目录结构

  • assets/
    : 包括图片，CSS, Sass, JavaScript 和 TypeScript ， 实际测试却要把图片放到 static 目录下才能方便引用

  • static/
    : favicon.ico, robots.txt 等验证网站所有权的文件

  • content/posts/
    : 发表的文章, 手动生成的文章带有子目录，hugo就不会跟踪， 需要 hugo new "posts/path/file.md" 的方式建立新的文章。

开工

1
2
3
4
5
6
7
8
9

hugo new site blog
cd blog 
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
cp themes/meme/config-examples/en/config.toml config.toml
# 创建一个post和一个about页面
hugo new "posts/hello-world.md"
hugo new "about/_index.md"
hugo server -D

用浏览器打开 http://localhost:1313/ 就可以看到post的文章了，是不是有一点小激动。

对 config.toml 进行按需修改后，就只需要把注意力放在 内容 上了。写内容的时候关注一下Markdown 官方教程。 现在开始我们快乐的博客之旅吧。

草稿 draft

使用 hugo new "posts/xxxx.md" 的方式默认生成的是草稿， hugo server -D 可以看到发布的草稿， 而用hugo server 则看不到发布的草稿。

布署

hugo命令会构建你的站点，并将文件发布到public目录中。要将站点发布到其他目录，使用--destination标志或在站点配置中设置publishDir。 注意: Hugo在构建站点前不会清空public目录。现有文件会被覆盖，但不会被删除。

1
2

hugo	
rsync -arL --delete --progress public black5:/usr/share/nginx/html

高级篇：特殊的索引页面

每个目录下的 _index.md 和 index.md 是特殊的索引页面，二选一使用。可以在其扉页 front matter 为模板提供元数据，如 list templates, section emplates, taxonomy templates, taxonomy terms templates, homepage template 等等。 在模板文件中，可以使用 .Site.GetPage 函数来获取数据。

一个简单例子:

{{ partial "header.html" . }}
	<main>
        {{ .Content }}
        {{ range .Paginator.Pages }}
			{{ partial "summary.html" . }}
		{{ end }}
		{{ partial "pagination.html" . }}
	</main>
{{ partial "sidebar.html" . }}
{{ partial "footer.html" . }}
updatedupdated2024-02-262024-02-26