首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

玩转开源 |Hugo 的使用实践

weight = 1 contentDir = 'content.zh' 将原来文件夹改为 content.zh 另外再新建一个文件夹 content.en用来存放英文版文档;菜单同理操作; 在...它的实用性绝不仅限于示例中添加简单功能,更是涉及到各种典型场景。 举例来说,可以在 标签中嵌入网站流量统计代码。...而在商业化场景下,可能会考虑在特定布局处嵌入广告模块。这种广告模块可以是图片、文本链接或者多媒体广告,用于推广产品、服务或者其他相关内容。...通过合理的布局扩展在网页中嵌入各种实用模块,增强网站的交互性、实用性和吸引力,为用户带来更好的访问体验,同时实现商业化目标。...探索完以上内容,在 《搭建 Hugo 管理 Markdown 文档》 文章之初给出的 Demo效果 已经能够完成。 Hugo + Markdown 的结合使得文档更生动、更易读、更具交互性。

86221

Hugo 网站优化(8): 书房装上了小电视, 使用 hugo shortcodes 支持 bilibili 视频播放

hugo 短代码(shortcodes) 模版 在搜索的时候, 找到 利用hugo的短代码功能插入b站视频并且自适应[1] 了这篇文章, 实现了嵌入 Bilibili 的播放器。...进一步查询 hugo - 短代码[2] 和 hugo - 自定义段代码模版[3] , 并参考原文。 终于实现了, 在书房看电视的方案。 Bilibili 视频引用语法 在书房中看电视的语法规则。...src: 视频ID 或 地址 page: 分集 named-grammar 建议使用 具名语法, 这样在 markdown 中跳转更方便。 匿名语法, 根据参数位置传递。...代码实现 在 主题 代码中, 添加 layouts/shortcodes/.html 。这里的 name 就是以后 Markdown 中的引用名字。...-- 嵌入 bilibili 播放框 --> <!

52310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Hugo:构建静态网站的超级利器!

    静态网站生成器近年来在开发者社区中引起了广泛关注,而其中最受欢迎的工具之一就是 Hugo。 这款由 Go 语言编写的静态网站生成器以其极速构建、功能强大和高度可定制性著称,受到众多开发者的青睐。...Hugo 在 GitHub 上的 Star量已达到了 74.4K!...01.项目介绍 简单来说,Hugo 是一个可以将你用 Markdown、HTML、AsciiDoctor 或 Org-mode 编写的内容迅速转化为静态 HTML 文件的工具。...3、短代码功能 Hugo 的短代码为 Markdown 赋予了新的生命。无论是嵌入视频、图像,还是处理复杂的布局,短代码都能让你轻松实现,并且保持代码的简洁性。...此外,Hugo 还可以连接到云端 CMS 系统,让内容编辑者在不需要编程知识的情况下轻松修改网站内容。

    11310

    如何在Ubuntu上安装和使用Hugo

    GitHub上提供了各种体系结构和发行版的软件包。 找到您的系统架构 在开始之前,我们应该检查一下Ubuntu机器的架构,以便我们确保下载正确的软件包。...Hugo有时要求这些目录存在,即使它们中没有任何内容。要解决此问题,我们可以在每个空目录中包含一个隐藏的.gitkeep文件。这足以让git提交目录而不会影响Hugo的实际功能。...为了让Hugo能够从我们的Markdown页面正确生成HTML,我们需要创建以.md扩展名结尾的文件。 创建关于页面 将从主页链接到的页面以及页面所需的相对路径在很大程度上取决于您的主题。...Hugo将在生成页面时自动创建所需的任何主要目录: hugo new post/My-First-Post.md 如果我们在Markdown文件名中使用破折号,它们将被转换为自动填充标题的空格: +++...我们在配置文件中设置了它,但在当前版本的Hugo中服务器没有选择它。

    6.7K10

    免费的个人博客系统搭建及部署解决方案(Hugo + GitHub Pages + Cusdis)

    Hugo 是用 Go 实现的博客工具,采用 Markdown 进行文章编辑,自动生成静态站点文件,支持丰富的主题配置,也可以通过 js 嵌入像是评论系统等插件,高度定制化。...因为 Hugo 开源社区中 hugo-theme-den 完全在我的审美上,所以我选择了 Hugo 并在这个主题基础上进行了一些个人定制化改造和配置,满足了自己的需求。...,搭建你的博客自动发布系统》中。...图片管理 日常发布的文章中可能会涉及很多图片,将图片存储在静态博客源项目仓库中的话会使项目过于庞大,并且很难二次使用和管理,因此,我同样选择了 GitHub 作为图床工具,并使用 PicGo 客户端进行图床管理...,在上传前使用 TinyPNG 进行压缩,并使用 jsDelivr 服务为 GitHub 图床进行加速,这样就可以将所有图片存储在 GitHub 图床仓库,文章中以外链的方式嵌入图片。

    2.6K11

    Hugo系列(4) - 从Hexo迁移至Hugo以及使用LoveIt主题的踩坑记录

    但是对于v0.2.10版本的LoveIt主题,只是加入启动参数依然无法使用Valine评论功能,原因是评论功能的模板文件有问题,需要我们自己修改才能正常使用,如下: 把\themes\LoveIt\layouts...valine,然后填上从LeanCloud的应用中得到的appId和appKey就可以用了。...不过最终还是在stackoverflow上找到了答案: You can use hugo’s extended (like https://github.com/gohugoio/hugo/releases...文章摘要标志不生效 和Hexo不同,Hugo的文章摘要标志必须是,在more的两边不能有任何空格,且必须全小写,否则便不会生效。...全局禁用Markdown输出功能 由于不想把这些造成问题的代码块删掉,于是最佳的解决方案就变成了禁用Markdown输出功能,在站点配置文件如下: 1 2 3 4 5 6 7 8 9 10

    1.6K20

    利用基于Go Lang的Hugo配合nginx来打造属于自己的纯静态博客系统

    Hugo的优点包含但不限于:     得益于Go的高性能,性能很快         世界上最快的静态网站生成工具,5秒生成6000个页面     文档为Markdown格式,语法超简单     ...bin 如果你不想在线编译安装,也可以去hugo的官网 https://github.com/gohugoio/hugo/releases 下载稳定版的压缩包,解压之后配置一下环境变量也可以...装完以后,在命令行内输入 hugo version 打印出版本号即表示hugo安装成功 在命令行中输入命令 hugo new site hugo_blog 就生成了一个名字为hugo_blog...title: "第一篇文章" --- ### 你好啊 123123123 ``` print('hello world') ``` 然后在命令行中输入 hugo server 来热启动项目...可以看到已经在1313端口起了一个hugo服务 访问一下 至此,非常快速而简单博客已经做好了,那么如何部署到线上呢?

    71220

    玩转开源 | 搭建 Hugo 管理 Markdown 文档

    在工作、学习中,不可避免会要写一些文档;又或者想搭建个简单网站,记录和分享您的生活经验或知识;撰写这些文档中使用 markdown 是一个非常不错的选择,让我们更加聚焦在文档表达的内容上。...实际上笔者的文档基本都是在 Sublime 中用 markdown 格式撰写的。...在 先前文章 《Markdown的那些事儿》 也有提到到,围绕 markdown 有着大量的开源软件、库做支持;这里分享下使用基于MIT许可证的开源软件 Hugo 来管理 Markdown 文档,能帮助基于...Hugo是一款强大的用于生成静态网页的程序,擅长于将 Markdown 文档按需要转换成各类主题的静态网页;它由Go语言编写的,在处理速度上非常快;也有人对比过类似一些产品比如 Jekyll / Hugo...由于使用的都是默认配置,这里仅拷贝docs/example、docs/_index.md 当然,我们可以自己新建下 自己的 Markdown文件(hello.md);由于 快速使用中配置都为默认的,因此

    1.1K41

    【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下

    我现在正在写这篇博客,想要发布到网站上只需要做三件事: hugo new posts/cloudnative-blog-using-tencent-cloud.md 使用vscode编辑markdown...https://"$host"\033[0m" else echo -e "\033[32m 推送失败 \033[0m" fi ssh到轻量服务器所执行的tarloor命令也是一个shell脚本,可以在轻量服务器上执行以下命令下载...: # centos8、centos stream、rockylinux、almalinux等使用rpm的Linux发行版 wget -O /usr/local/bin/tarloor http://arloor.com.../tarloor.sh # ubuntu、debian等使用deb的Linux发行版 wget -O /usr/local/bin/tarloor http://www.arloor.com/tarloor_deb.sh...hugo 最快的静态网站生成器 hugo的生态很好,有很多自定义主题可以选择。我选择的主题是hyde-hyde,属实比较复古啦。

    1.1K60

    将hexo文章头转为hugo格式

    由于hexo的语言限制,在博客文章数量达到一定的数量后,生成静态内容的速度比较的缓慢,最近打算转到hugo的框架上,hugo使用的是golang编写的,号称是世界上最快的静态页面生成器 但是由于 golang...语言的一些语法及特性,在一些变量的表现上跟hexo有所不同,markdown文件虽然可以复用,但是文章内容的front matter,即文章头定义的那些标签会有所不同,首先是时间的格式会不同 go默认的格式是...xxxx-xx-xxTxx-xx-xx+08:00 [+08:00代表的是时区.还有就是tags,categories等标签的定义,在go里定义多个要用数组,长度不确定需要使用切片,切片的形式为 []type...{},所以在hugo中定义多个tags跟hexo会有不同] hexo中 [tags: ] - hexo - blog hugo 中 [tags: [hexo,blog]] 为了解决markdown...获取目录下的所有markdown类型的文件 [ 2. 读取内容,并查找tags,categories标签] 3. 进行替换 4.

    78241

    书单 | 数据分析,从思维到工具,持续霸榜的新书分享给你!

    06 ▊《GraphPad Prism学术图表(全彩)》 张敏(@如图所示) 著 讲述超过50种学术图表的绘制方法 提供59个绘图源文件下载 全面展现学术图表的绘制和美化过程 本书主要介绍基于GraphPad...Prism 9 的学术图表绘制方法。...同时本书提炼了学术图表绘制的一般流程、配色方法及GraphPad Prism 绘图的进阶技巧,兼顾学术图表绘制的实用性和美观性,适用于需要绘制学术图表的高校学生和科研人员。...第2版新增了第5章数据采集章节,介绍了PBID在数据采集方面的应用。第9章舆情分析中的API接口采用作者自己开发的接口,可以直接调用 。 (扫码了解本书详情!)  ...快快拉上你的小伙伴参与进来吧~~  如果喜欢本文欢迎 在看丨留言丨分享至朋友圈 三连  热文推荐   《漫画算法2》2021全新进阶版来袭! 一文了解预训练语言模型!

    1.3K40

    支持Github风格的警告样式

    温馨提醒 总结摘要 现可以支持在撰写文章的过程中,直接使用`Markdown`语法来书写不同类型的警告消息,让文章的内容更加丰富和易读,快来看看它的使用和效果吧。...早期在Hugo NexT主题中使用短代码方式实现过对不同类型消息的样式支持,只不过是使用时需要用户书写完整短代码不是很方便,同时输出的效果是独立的块占用空间比较大。...后来发现Hugo框架在新版中支持了自定义 blockquote的渲染方式,于是乎便有点有新的想法,让用户直接使用Markdown语法来书写不同消息内容,输出的效果实现类似于Github的警告样式,这样使用起来会更加方便...其中颜色和图标在全局配置参数中,可找到如下配置项进行必要的调整: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23...这相比较于之前的短代码方式,使用起来是更加方便,而且Github的警告样式在整体的风格上也是和文章更为契合,能让读者的阅读体验也更好些。如果你喜欢的话,就赶紧去升级下你的Hugo NexT主题吧!

    4200

    搭建个人博客

    最后,从 Hugo 和 Hexo 之间,我选择了 Hexo,虽然 Hugo 在 Windows 上使用起来更方便,但是我还是觉得 Hexo 更适合我。...学习 Markdown , 这个并不是一个坑,而是一个忠告,作为一个常年游荡在 GitHub 的好同志来说,但是对于一个 Emacser 来说,我更喜欢 Org-mode ,但是 Org-mode...在长时间的使用之后,发现 Hugo 对 Org mode 的支持也比较一般,对于一些比较好用的特性,功能都不支持,最好的方案还是从 Org 转成 Markdown ,所以在最终使用 ox-hugo 工具配合...ox-hugo 配置 使用 ox-hugo 主要需要配置两个内容,一是将 ox-hugo 增加到配置中,然后是在 启动 org-capture 的时候,增加一个新的选项,可以将自动新增一篇文章。...(function org-hugo-new-subtree-post-capture-template)))) 在这里,我是将所有的文章写到对应的一个文件中,然后将文件中的所有内容生成到对应的 hugo

    1.1K20

    利用 Github Pages 和 Hugo 快速搭建免费的个人网站

    只需在本地编写 markdown 文件,即可完成日常文章的维护。 Github Pages:是一个静态站点托管服务,直接将个人、组织或项目的页面托管于 GitHub 仓库中。...Hugo 确认。 hugo version 3.1.2 新建 Hugo 网站 本步骤是在本地创建个人站点工程(即:hugo 网站源文件)。 新建 Hugo 站点。...将主题 hugo-universal-theme 中示例站点 exampleSite 文件夹的内容,全部复制到你的站点根目录。...:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop 在浏览器中打开 http://localhost:1313 预览。...新建 仓库,如:hugo-site-demo。 注:hugo-site-demo 为示例仓库,故设置为公开仓库,实践中建议设置为私有仓库。

    5.7K43

    hugo博客搭建之旅

    方式2: 从GitHub 直接直接下载编译好的二进制文件.exe 这里用的是扩展版 hugo_extended_0.101.0 配置环境变量 下载好后,解压到某个文件夹里,复制到bin层路径,添加到电脑的环境变量里...#存放静态文件,如css,js,img等文件目录,hugo直接复制到public目录下,不会做渲染 └─themes #存放网站主题,可存多个主题,在config.toml全局文件中配置指定,也可在执行渲染是加参...1 hugo server 在浏览器里,输入:localhost:1313 就可以访问了。 不过这时候网站还是空的,hugo初始生成的网站默认不带样式,我们需要选个主题安装。...hiddenFromHomePage = false # 是否在搜索结果中隐藏一篇文章 hiddenFromSearch = false # 是否使用 twemoji...Markdown 文档链接 linkToMarkdown = true # 是否在 RSS 中显示全文内容 rssFullText = false # 页面样式 [

    70720

    Hugo + GitHub Action,搭建你的博客自动发布系统

    前言 在之前的一篇《免费的个人博客系统搭建及部署解决方案(Hugo + GitHub Pages + Cusdis)》中,我提到了自己通过 Hugo 这个静态网站生成器来真正搭建我的个人博客,并在 Hugo...使用 Hugo 搭建博客 Hugo 是用 Go 实现的博客工具,采用 Markdown 进行文章编辑,自动生成静态站点文件,支持丰富的主题配置,也可以通过 js 嵌入像是评论系统等插件,高度定制化。...下面我就以我目前在使用的 hugo-theme-den 这个主题为例,演示一下配置流程。...现在每当我们本地通过熟悉的 Markdown 语法完成博客内容编辑后,只需要推送代码,等待几分钟,即可通过我们的自定义域名访问更新后的网站。...GitHub Action 实现的免费博客自动部署系统,我自己的实现仓库在 pseudoyu/yu-blog 仓库中,我定制化的主题仓库在 pseudoyu/hugo-theme-den 中。

    1.6K10

    我的个人网站和公众号的结合

    正好趁放着国庆,就想把这个域名给利用起来,再搭一个博客的话,内心是不太想的,因为现在决定在公众号更文了,不想维护多处地方的排版(虽然都可以使用 markdown),还有个重要的原因是公众号可以得到伙伴们的关注...Vercel 部署 Hugo 在 Vercel 网站[1] 注册并登录,这里有个小坑是,注册的时候是不能用 QQ 邮箱的(经过测试 foxmail 邮箱是可以的),会被拒掉,即使是使用 GitHub 账号注册...请注意,Vercel 默认的 Hugo 版本并不是最新的,我建议是保持 Vercel 上的 Hugo 版本和你本地的一致,避免因线上线下版本不一致引发一些奇奇怪怪的问题,可以在项目根目录创建 vercel.json...Waline 有传统的服务端、数据库、客户端三部分,我的部署方案是服务端依旧使用 Vercel 一键部署,数据库选择 LeanCloud 国际版免费开发版,剩下的客户端指的就是集成在 Hugo 本身了,...{{ end -}} {{- partial "footer.html" . -}} 最后在你需要开启评论功能的 md 文件中添加如下注释即可

    2.2K41
    领券