Hugo on 陨熙然-Blog

Shortcodes | 短代码

Sun, 26 Apr 2026 00:00:00 +0000

哔哩哔哩

1.代码：

新建bilibili.html文件，并复制以下代码：

{{ $vid := (.Get 0) }}
{{ $videopage := default 1 (.Get 1) }}
{{ $basicQuery := querify "page" $videopage "high_quality" 1 "as_wide" 1 }}
{{ $videoQuery := "" }}

{{ if strings.HasPrefix (lower $vid) "av" }}
    {{ $videoQuery = querify "aid" (strings.TrimPrefix "av" (lower $vid)) }}
{{ else if strings.HasPrefix (lower $vid) "bv" }}
    {{ $videoQuery = querify "bvid" $vid }}
{{ else }}
    <p>Bilibili 视频av号或BV号错误！请检查视频av号或BV号是否正确</p>
    <p>当前视频av或BV号：{{ $vid }}，视频分P：{{ $videopage }}</p>
{{ end }}

<div class="video-wrapper">
    <iframe src="https://player.bilibili.com/player.html?{{ $basicQuery | safeURL }}&{{ $videoQuery | safeURL }}"
            scrolling="no"
            frameborder="no"
            framespacing="0"
            allowfullscreen="true"
    >
    </iframe>
</div>

2.使用：

`1`	`{< bilibili BV1V7411d7iW 0 1 >} //BV号，0/1为是否自动播放,分p数；使用记得双括号`

效果如下：

网易云音乐

1.代码：

新建netease.html文件，并复制以下代码：

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=86 src="//music.163.com/outchain/player?type=2&id={{ index .Params 0 }}&auto={{ index .Params 1 }}&height=66"></iframe>

2.使用：

`1`	`{< netease 557578993 0 >} //歌曲的id;是否自动播放(1为自动播放，0为手动播放)`

效果如下：

PDF

1.代码：

新建pdf.html文件，并复制以下代码：

<div class="pdf" style="
    padding-bottom: 66%;
    position: relative;
    display: block;
    width: 100%;
    border-bottom: 5px solid;
">
    <iframe
        width="100%"
        height="100%"
        src="{{ .Get "src" }}"
        frameborder="0"
        allowfullscreen=""
        style="
            position: absolute;
            top: 0;
            left: 0" >
    </iframe>
</div>

2.使用：

`1`	`{< pdf src="这里放pdf链接，本地文件当然也可以！跟md文件放在一个文件夹里就行。使用的时候请换成双括号。" >}`

效果如下：

【Hugo】Hugo + Github 免费部署自己的博客

Sat, 27 Sep 2025 00:00:00 +0000

参考文章 → 【Hugo】Hugo + Github 免费部署自己的博客

上次更新于 2025-09-27，部分内容可能已经过期。

准备

Hugo下载

前往【Hugo】，选择版本下载，下载后解压即可
Windows下载版本：hugo_extended_xxxxx_windows_amd64.zip

git下载

前往【git】，根据自己电脑的系统选择对应安装程序下载
Windows用户一直点下一步，默认安装即可

验证

Win + R 打开运行窗口，输入cmd打开控制台，再分别输入以下命令查看是否安装成功（出现版本号）

`1`	`hugo version`

`1`	`git --version`

搭建博客

创建博客

(1)在hugo.exe所在文件夹的地址栏敲打cmd唤起命令行

(2)敲打命令hugo new site xxxx创建hugo文件
(3)敲打命名cd xxxx切换目录，并把hugo.exe复制到刚生成的文件夹中

(4)敲打命令hugo server -D启动服务，Ctrl + 左键访问http://localhost:1313(一般默认是这个端口)，Ctrl + C停止服务

安装主题

(1)前往【Hugo Themes】，挑选自己喜欢的主题，进行下载,推荐本博客所使用的stack主题
(2)点击下载按钮，将下载好的主题解压，放到/themes文件夹中

(3)将exampleSite样例数据中的 Content 和 hugo.yaml 复制到主文件夹中，并删掉hugo.toml和content/post/rich-content
(4)修改 hugo.yaml 中的 theme，将他修改为跟主题文件夹同名

(5)再次启动hugo服务，查看主题，具体主题配置修改 hugo.yaml，这里不细说，感兴趣可自行查找相关文章（如果对本博客的一些配置感兴趣也可评论区留言，未来会专门更新）

Github常规部署

(1)前往【Github】，创建仓库 {github用户名}.github.io，其他设置默认即可

(2)前往Setting -> Pages -> Branch选择main分支，然后保存，会自动开启 https://{github用户名}.github.io 的地址，这地址也是以后访问博客的地址

(3)回到hugo文件中，执行命令hugo -D，会生成public静态资源文件夹

(4)在public中右键打开git执行以下命令上传到github仓库上，第一次上传可能需要输入账号密码

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin {你的github仓库地址}
git push -u origin main

(5)上传成功后访问 https://{github用户名}.github.io，成功搭建属于自己的Hugo博客

鄙人能力有限，Github Action自动部署目前还不会，等会了再更新

你好 Hugo

Sun, 14 Sep 2025 00:00:00 +0000

致谢

本博客前前后后花了一个月左右的时间，第一次见到这么多代码和~~报错（bushi）~~，在此感谢众多大佬的分享（下面展示部分），如果没有你们的帮助，我的博客不会这么完工。
莱特雷-letere 前期导师，让我完成了基本功能
第三夏尔 | Third Shire主页的热力图归档真的太难实现了
Liu Houliang的博客大佬的观影界面太酷了，感谢代码分享
Yelle🦋 大佬的收集，让我实现了Google地图等多项shortcode功能，非常感谢
山茶花舍我见过的最文艺的博客，没有之一，尝试过介绍的channel.io聊天气泡，但会覆盖掉主题的功能，遂罢

碎碎念

这是我的第一篇文章！
本博客只是基本建成，还有许多bug和功能仍未完成，奈何当前本人才疏学浅，不足以独立处理bug和实现其他博客没有的功能，将就着用吧，哎！
“你好，Hugo"其实并不是我取的名，而是AI生成的示例标题，之前在各种语言的"Hello world"中迷失，没想到转头第一篇文字主打的博客，也会以"Hello hugo"开始。挺奇妙的哈。没记错的话，博客应该是大学才接触，从开始的csdn，到后来的51CTO，都不太符合我的审美。后来，专业软件需求越来越多，我以一个新手小白的身份叩开了GitHub的大门（毕竟有些付费软件还不如开源来的香），闲逛时偶尔会闯进别人的网站，有博客网站，也有其他，慢慢的，在心底萌生了写一个个人网站的想法。
当然，个人介绍也说了，我懒，所以直到这个暑假，百无聊赖之下我才开始了我的计划。但，梦想是美好的，现实是骨感的，我原本看不上静态博客网站，打算用vue3+springboot实现一个超级炫酷的网站，结果创业未半而中道崩殂，因为不了解vue3的语言标准，几天代码修改愣是没改到点上，这时候我才明白没有金刚钻，别揽瓷器活这句话的含义，真的太痛苦了(╥﹏╥)。
玩了休整了半个月，终于在暑假还剩10天时了解了hugo，机缘巧合之下闯进了莱特雷大佬的博客，被stack的极简风格深深吸引了，接下来的几天十分顺利，但就在开学前一晚为博客添加功能时意外修改掉了主题的一些默认配置文件，满屏报错，又因为在本地运行且不会使用git，没有提交记录，无奈只能删库。
开学后到了同一个功能设置时意外成功，结果还没高兴太久，某个功能创建时又一次满屏爆红，但这次学聪明了，新建一个hugo文件而不是直接删库，建站效率大大提高，思路也更清晰，来来回回十几天，感觉该有的功能都有了，看得见的样式问题也修改了，一天几百次的刷新也证明博客网站运转良好，是时候了，部署！

注意

本站并无特地实现响应式设计，可能只适配大屏设备