Hugo作品集博客

srinidhi-github-blog — Hugo 作品集模板

作者 srinidhibhat45

基于 Hugo 的静态博客与作品集站点模板,采用 GitHub 风格界面,通过 Markdown 内容与 TOML 配置生成页面,支持置顶文章、摘要截断、LaTeX 公式与最后修改时间。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

2 个预览视图
桌面端首页1 / 2
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 2

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

Hugo 静态站点,内容以 Markdown 文件管理,文章位于 content/post 目录

02

GitHub 风格界面,首页支持放置 readme.md 作为站点介绍

03

front matter 中设置 pin: true 可置顶文章

04

支持 summary 字段或 <!--more--> 两种摘要截断方式

05

front matter 开启 math 后由 KaTeX 渲染行内与块级公式

06

config.toml 可配置作者、社交账号、自定义链接、RSS 与 favicon

模板详细介绍

这是一个 Hugo 静态站点模板,仓库名为 srinidhi-github-blog,README 说明其主题为 github-style。站点内容以 Markdown 文件组织,文章放在 content/post 目录下,通过 hugo new post/标题.md 创建;Hugo 默认生成 draft: true 的草稿,需改为 false 才会在站点中显示。首页可放置一个 readme.md 作为个人介绍或站点说明。

模板提供若干内容控制能力:在 front matter 中设置 pin: true 可置顶文章;用 summary 字段或 <!--more--> 标记控制列表页展示的摘要范围,两者区别在于 summary 不会出现在正文中。在 config.toml 中开启 lastmod 并配置 frontmatter 后,可显示文章最后修改时间。文章 front matter 中加入 math: true(README 示例写作 katex: math)后,KaTeX 会自动渲染 \( ... \) 行内公式与 $$ ... $$ 块级公式。

配置集中在 config.toml,可设置站点标题、作者、描述、社交账号(GitHub、Facebook、Twitter、LinkedIn、Instagram、Tumblr、邮箱)、关键词、RSS、favicon、位置信息以及自定义链接列表。README 还给出一个 deploy.sh 示例,通过 git worktree 将构建产物发布到 gh-pages 分支,并建议在生产构建时设置 HUGO_ENV=production 以启用 Google Analytics。

该仓库采用 MIT 许可,可免费使用、修改、商用和分发代码,但需保留版权与许可声明;演示图片、字体、图标等第三方素材以及域名、托管等外部服务需另行核对许可与费用。仓库 stars 为 0,更新时间为 2021 年,README 主要基于上游 github-style 主题的说明,未提供关于可访问性、浏览器兼容性或长期维护状态的额外信息。

Hugo作品集博客

适合你的项目吗?

适用场景

  • 搭建个人技术博客并发布 Markdown 文章
  • 制作带有个人介绍首页的作品集或简历型站点
  • 需要置顶重点文章或控制列表页摘要展示的博客
  • 撰写包含数学公式的技术笔记或学习记录

适合人群

  • 熟悉或愿意学习 Hugo 与 Markdown 的个人开发者
  • 需要静态博客、可托管在 GitHub Pages 或 Netlify 的用户
  • 偏好 GitHub 视觉风格界面的写作者
  • 希望以 MIT 许可自由修改和分发代码的使用者

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    先执行 hugo new site mysite 创建站点,再以 git submodule 方式将主题加入 themes/github-style

  2. 2

    若从旧版本升级,需将 content/posts 重命名为 content/post

  3. 3

    新建文章默认 draft: true,需改为 false 才会显示

  4. 4

    在 config.toml 中填写 baseURL、title、author 及社交账号等参数

  5. 5

    README 提供 deploy.sh 示例,通过 git worktree 发布到 gh-pages 分支;生产构建建议设置 HUGO_ENV=production

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 启用 Google Analytics 需自行申请账号并填写跟踪 ID,属于外部服务,可能涉及隐私与合规要求。
  • 部署示例依赖 Hugo 命令行工具与 git worktree 发布到 gh-pages 分支,需自行准备构建与托管环境。
  • 主题以 git submodule 方式从上游仓库引入,使用与更新需访问该外部 GitHub 仓库。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

googleAnalytics = "UA-123456-789"

README 原文

env HUGO_ENV="production" hugo -t github-style

README 原文

git submodule add [email protected]:MeiK2333/github-style.git themes/github-style

README 原文
https://github.com/srinidhibhat45/srinidhi-github-blog/blob/main/LICENSEhttps://github.com/srinidhibhat45/srinidhi-github-blog/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料一般 · 70 / 100
技术栈
Hugo
网站类型
作品集 · 博客
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2021-04-15
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Hugo。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 77b2f5808f623d2fbb39014550615d3b7960ab747f2b495f5558dc859896fd99

2026-10-03T22:38:37.161Z

来源文件 / 仓库
# github-style

## Init hugo site

```bash
hugo new site mysite
cd mysite
```

## Install the theme

```bash
git submodule add [email protected]:MeiK2333/github-style.git themes/github-style
```

## Update the theme

If you just installed the theme, it is already in the latest version. If not, you can update using the below commands

```bash
cd themes/github-style
git pull
```

Then, you need to rename the previous `posts` folder to `post`

```bash
cd <you-project-folder>
mv content/posts content/post
```

## Setup readme

```bash
hugo new readme.md
echo '`Hello World!`' > content/readme.md
```

## Pin post

```
---
pin: true
---
```

## Add new post

Hugo will create a post with `draft: true`, change it to false in order for it to show in the website.

```
hugo new post/title_of_the_post.md
```

## Limit display content

### Approch 1: use summary

```
---
title: "title"
date: 2019-10-22T18:46:47+08:00
draft: false
summary: "The summary content"
---
```

### Approch 2: use `<!--more-->`

Use `<!--more-->` to seperate content that will display in the posts page as abstraction and the rest of the content. This is different from summary, as summary will not appear in the post.
```
---
title: "title"
date: 2019-10-22T18:46:47+08:00
draft: false
---
abstraction show in the post page
<!--more-->
other content
```

## add last modified data

add to `config.toml`

```toml
lastmod = true

[frontmatter]
  lastmod = ["lastmod", ":fileModTime", ":default"]
```

## Support LaTex

In you post add `math: true` to [front matter](https://gohugo.io/content-management/front-matter/)

```
---
katex: math
---
```

Then the [katex script](https://katex.org/docs/autorender.html) will auto render the string enclosed be delimiters.

```
# replace ... with latex formula
display inline \\( ... \\)
display block $$ ... $$
```

![latex example](images/latex_example.png)

## config.toml example

```toml
baseURL = "https://meik2333.com/"
languageCode = "zh-cn"
title = "MeiK's blog"
theme = "github-style"
googleAnalytics = "UA-123456-789"
pygmentsCodeFences = true
pygmentsUseClasses = true

[params]
  author = "MeiK"
  description = "In solitude, where we are least alone."
  github = "MeiK2333"
  facebook = "MeiK2333"
  twitter = "MeiK2333"
  linkedin = "MeiK2333"
  instagram = "MeiK2333"
  tumblr = "MeiK2333"
  email = "[email protected]"
  url = "https://meik2333.com"
  keywords = "blog, google analytics"
  rss = true
  lastmod = true
  favicon = "/images/github.png"
  location = "China"

  [[params.links]]
    title = "Link"
    href = "https://github.com/meik2333"
  [[params.links]]
    title = "Link2"
    href = "https://meik2333.com"
    icon = "https://meik2333.com/images/avatar.png"

[frontmatter]
  lastmod = ["lastmod", ":fileModTime", ":default"]

```

## deploy.sh example

There are various way to deploy to github, here is a link to official [document](https://gohugo.io/hosting-and-deployment/hosting-on-github/).

Here is an sample. Note line 22 have `env HUGO_ENV="production"`, makes sure googleAnalysis is loaded during production, but is not loaded when we are testing it in localhost.

```bash
#!/bin/sh

if [ "`git status -s`" ]
then
    echo "The working directory is dirty. Please commit any pending changes."
    exit 1;
fi

echo "Deleting old publication"
rm -rf public
mkdir public
git worktree prune
rm -rf .git/worktrees/public/

echo "Checking out gh-pages branch into public"
git worktree add -B gh-pages public origin/gh-pages

echo "Removing existing files"
rm -rf public/*

echo "Generating site"
env HUGO_ENV="production" hugo -t github-style

echo "Updating gh-pages branch"
cd public && git add --all && git commit -m "Publishing to gh-pages (publish.sh)"

#echo "Pushing to github"
#git push --all
```

Then you can verify the site is working and use `git push --all` to push the change to github. If you don't want to check again every time, you can uncomment the `#git push --all` in the script.
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。