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

如何在github页面上使用jekyll设置集合?

在GitHub页面上使用Jekyll设置集合可以通过以下步骤完成:

  1. 确保你已经在GitHub上创建了一个仓库,并且已经安装了Jekyll。如果还没有安装Jekyll,你可以参考Jekyll的官方文档进行安装。
  2. 在你的GitHub仓库中创建一个新的分支,用于存放Jekyll的配置文件和集合的内容。可以将该分支命名为gh-pages。
  3. 在该分支的根目录下创建一个名为_config.yml的文件,用于配置Jekyll的设置。在该文件中,你可以设置一些全局的配置项,例如网站的标题、描述等。
  4. 在_config.yml文件中,你需要添加一个collections的配置项,用于定义你的集合。例如,你可以添加以下配置项:
代码语言:txt
复制
collections:
  mycollection:
    output: true
    permalink: /mycollection/:title

上述配置定义了一个名为mycollection的集合,设置了输出为true,表示该集合的内容将会被输出到生成的网站中。同时,设置了permalink为/mycollection/:title,表示该集合中的每篇文章的URL将会以/mycollection/开头,后面跟着文章的标题。

  1. 在你的GitHub仓库中创建一个名为_mycollection的文件夹,用于存放你的集合的内容。在该文件夹中,你可以创建多个Markdown文件,每个文件代表集合中的一篇文章。
  2. 在每个Markdown文件的头部,你需要添加一些元数据,用于指定该文章所属的集合和其他相关信息。例如,你可以添加以下元数据:
代码语言:txt
复制
---
title: My Collection Article 1
collection: mycollection
---

上述元数据指定了该文章的标题为"My Collection Article 1",并且指定了该文章所属的集合为mycollection。

  1. 提交你的更改并推送到GitHub。GitHub将会自动检测到你的配置文件和集合的内容,并使用Jekyll生成你的网站。
  2. 访问你的GitHub仓库的页面,你应该能够看到生成的网站,并且在/mycollection/路径下可以访问到你的集合中的文章。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云静态网站托管:https://cloud.tencent.com/product/scf
  • 腾讯云对象存储 COS:https://cloud.tencent.com/product/cos
  • 腾讯云云函数 SCF:https://cloud.tencent.com/product/scf
  • 腾讯云云开发 CloudBase:https://cloud.tencent.com/product/tcb
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何将 Jekyll 部署到云开发静态网站托管

它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器( Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...「目录结构http://jekyllcn.com/docs/structure/」,下面为个人博客目录结构的简单介绍: . ├── 404.html :404面 ├── CNAME :Github...静态网站服初始化一般需要约 3 分钟 qcloud_jekyll_hosting.png 将静态页面部署到托管服务 你阔以直接选择将构建好的静态页面上传到托管服务,但是考虑到博客的更新频率,还是选择使用官方提供的工具来上传...如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引和404面: Zkyx39SOCYgHimv.png 访问静态页面 在浏览器输入讯云提供的默认域名

3.5K105

如何为自己创建一个既时尚又好用的博客网站

侧边栏背景图片 关于开启评论功能 dbyll内置了对disqus的支持,如果你要开启评论功能,完成一下步骤即可: 第一步:为域名获取disqus简称 你需要在disqus上为你要添加评论功能的域名设置一个...第二步:设置dbyll 拿到disqus简称之后就可以在_config.yml文件文件中添加disqus: disqus short name;添加完成之后发布你的网站,就可以看到disqus评论板块了...上创建dbyll主题的个人博客 ---- 下面我将在GitHub Pages上使用dbyll为例,来向大家演示dbyll的使用。...具体步骤: 第一步:创建GitHub Pages 关于如何在GitHub上创建个人博客,可以查阅这篇文章《轻松搞定GitHub Pages》。...以下是发表文件的一些规范: 博客更新指南 —– clone 仓库到本地 在_posts目录下新建文章,2016-7-30-react-native-study-note,可以参考https://github.com

1.8K70

如何拥有一个免费空间来写博客(github

今天,我就来示范如何在github上搭建Blog,你可以从中掌握github的Pages功能,以及Jekyll软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。 ?...你先在本地编写符合Jekyll规范的网站源码,然后上传到github,由github生成并托管整个网站。 这种做法的好处是:   * 免费,无限流量。   ...三、一个实例 下面,我举一个实例,演示如何在github上搭建blog,你可以跟着一步步做。为了便于理解,这个blog只有最基本的功能。 在搭建之前,你必须已经安装了git,并且有github账户。...第二步,创建设置文件。 在项目根目录下,建立一个名为_config.yml的文本文件。它是jekyll设置文件,我们在里面填入如下内容,其他设置都可以用默认选项,具体解释参见官方网页。   ...layout:default”,表示该文章的模板使用_layouts目录下的default.html文件;”title: 你好,世界”,表示该文章的标题是”你好,世界”,如果不设置这个值,默认使用嵌入文件名的标题

5.8K20

搭建一个免费的,无限流量的Blog----github Pages和Jekyll入门

今天,我就来示范如何在github上搭建Blog,你可以从中掌握github的Pages功能,以及Jekyll软件的基本用法。更重要的是,你会体会到一种建立网站的全新思路。 ?...你先在本地编写符合Jekyll规范的网站源码,然后上传到github,由github生成并托管整个网站。 这种做法的好处是:   * 免费,无限流量。   ...三、一个实例 下面,我举一个实例,演示如何在github上搭建blog,你可以跟着一步步做。为了便于理解,这个blog只有最基本的功能。 在搭建之前,你必须已经安装了git,并且有github账户。...第二步,创建设置文件。 在项目根目录下,建立一个名为_config.yml的文本文件。它是jekyll设置文件,我们在里面填入如下内容,其他设置都可以用默认选项,具体解释参见官方网页。   ...layout:default",表示该文章的模板使用_layouts目录下的default.html文件;"title: 你好,世界",表示该文章的标题是"你好,世界",如果不设置这个值,默认使用嵌入文件名的标题

1.6K60

Jekyll 文章侧边索引导航

Jekyll 生成目录的方案   参考资料 1 中所提到的,如果想要在 Jekyll 中实现文章目录,有三种不同的方案可供选择: 第一种方案   利用完整的标签来生成静态目录,可以看到在本文的开头就是这样的一个实例...缺点在于 Github Pages 不支持这类自定义插件,你可能需要使用自定义的 workflow.yml 文件来指导 Github Action 来编译生成静态文件。...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能,因此这两个例子的做法都不是很合适。...具体在 post 模板使用 toc 模块的代码最后所示。 自适应   为了实现目标二,这里采用了最简单的 CSS 媒体查询,即在平常 PC 端宽屏时采用如下 common.sass 中的样式。...不显示目录时,让正文占据所有宽度,并设置目录块为 display: none,即隐藏该元素。具体实现最终代码 common.sass 和 layout.sass 所示。

1.5K30

基于JekyllGithub Pages搭建博客

Jekyll 也可以运行在 GitHub Pages 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...创建完成后,进入所创建的库,在settings页面找到GitHub Pages进行设置,如果你的库有按照上述方式进行命名,则它会自动进行设置设置成功后会该页面出现绿色的提示,成功后可选择 Choose...补充:如果没有 Github 账号、不熟悉 Github使用的,可以参考下面的教程,其实我也是这几天才开始慢慢学习使用 Github 的。...我的博客选择的是在 Github 上找的博客主题,它对目录中各个文件的内容、功能都有很详细地说明,适合我这样的小白学习使用 Jekyll 。...几个主要文件的参数在上面的 Github面上有很清楚的说明,想直接用这个模板的朋友可以根据说明修改。

1K10

玩转Github使用GitHub Pages打造你的专属技术博客

到本地,创建一个README.mdpush到github,随后去改一下设置依此点击setting -> Code automation -> Pages, 然后修改你的分支(一般是main)等一会,博客就会生成出来...然后使用gem安装jekyll(gem 是ruby的包管理工具,在下载其他包之前,最好替换成国内源)gem install jekyll找到一个空文件夹,然后在此处打开cmd/powershellRunning...最好多等待一会,或者使用一些特殊手段。....│ .gitignore // git的忽略文件│ 404.html// 自定义的404 固定│ about.markdown // about固定│ Gemfile// 类似pom...// 某篇博客,名字固定`yyyy-MM-dd-name.md`现在可以使用bundle exec jekyll build 来构建网站,构建完毕,会看到多一个_site 文件夹PS D:\Github

38500

Github搭建个人博客(2019最新版,亲测)

现在上几张成果图,呵呵,使用的轮子真高(滑稽.gif): (二) 关于我的博客 (1)Home: (2) 分类与标签: (3)单个文章的编辑日期,作者,分类,标签,查看更多...Fork成功后,就成我们自己的名下了,这时候,我们需要进行博客的简单设置。 找到Settings点击,进行页面的设置。...+ jekyll 的方式 我采用的搭建博客的方式是第二种: 使用GitHub Pages +jekyll的方式。...(2)使用Jekyll修改静态博客 请详细跟这篇教程走: Jekyll 搭建静态博客 请务必走完,因为上面这博客讲的很清楚,很详细,环境搭建好,剩下的就简单了。...(3)域名解析的情况: (三)BYQiu神:http://www.jianshu.com/p/e68fba58f75c 这篇只是说对了部分,理应域名解析是不把值直接用github的服务器地址值进行设置

61920

H2O-ac theme for Jekyll

如果读者想要看到文章卡片展示,还是可以点击顶部的导航栏中的 BLOG 直接访问。 归档   归档设置为由 Jekyll 按照模板自动生成,以年份、日期、文章标题分级列表展示,简洁清晰。...系统日志   系统日志其实也不是经常更新的,只有在博客整体作出设置或改进的才加以说明。...具体文章列表和归档置顶效果如下所示: 分页依赖升级 (2022年5月26日更新)   由于原有的 jekyll-paginate 库已停止更新,所以升级到目前更新、维护活跃的 jekyll-paginate-v2...如需使用最近更新时间功能,务必在 _config.yml 文件中添加以下配置项: # Github github: enabled: true owner: github_username...发布部署   由于 Github 提供 Jekyll 静态生成器的静态页面托管,只要打开仓库的 Pages 功能,当推送更新到 Github 时即会自动部署。

1.1K30

【译】你可以用GitHub做的12件 Cool 事情

7 像命令行一样使用 GitHub 链接 使用 GitHub 自带的 UI 浏览也还不错,但有时直接在 URL 中输入是最快的方法。...10 GitHub wiki 作为一个像维基百科那样的非结构化的页面集合, GitHubWiki的供给(我把它称之为 Gwiki ) 是一个非常棒的功能。...11 GitHub Pages 你可能已经知道使用 GitHubPages 来托管一个静态网站。如果你不知道,现在就来学习,这一节是专门用于讨论使用 Jekyll 来构建一个站点的。...如果我在 GitHub 中点击了 settings选项,切换到 GithubPages 设置,然后选择一个 Jekylltheme。。。 我就可以得到 Jekyll-themed 页面。...我的建议是:使用 GitHub 厂库中的 Markdown 文件来存储这些文本内容,然后使用前端组件来拉取这些文本块并展示在页面上

82320

何在Windows平台上基于github搭建个人博客平台

github提供的github pages基本上能满足我的需求了,使用也方便,搭建好环境以后,可以使用Markdown来编写博客,并且上传到github上托管,非常方便。 一....市面上有很多支持Markdown语法的代码编辑器可选,例如vscode,sublime text,atom等等。...这里不对Github使用做深入的解释,感兴趣的人可以自行搜索。这里假设阅读本文的人已经对Github使用有了一定的了解。...仓库创建好了以后还不行,还需要点击settings来管理仓库,修改一部分的设置才可以,settings可以点击右上角: ?...进去以后向下拉,将Github Pages下面的Source设置为Master branch即可,至此,博客仓库的创建已经完成了,然后就需要在这个仓库里面填入我们的博客主题和内容控制代码。

78750

怎样使用GitHub Pages搭建个人博客

(原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。Jekyll 还支持 Textile 文件,这里不做展开。) 阿里云。...GitHub Pages 官方强烈建议我们使用二级域名来做解析,而不要使用根域名(这里是shanyshanb.com),因此我这里设置将 www.shanyshanb.com 解析至 hummerstudio.github.io...此时就可以使用 www.shanyshanb.com 来访问博客。 另一种设置方式,是在仓库的设置页面通过图形界面设置自定义域名。设置后系统会自动提交CNAME文件至仓库,效果是一样的。...而且那时界面上的 Save 按钮是灰色无法点击,采取了hacking的方式才解决,设置过后修改内容按钮是可以点按的。不确定是当时网络问题还是GitHub禁用了这种方式,因此这种方式就不介绍了。)...设置主题后,GitHub 会在仓库自动提交保存 _config.yml 文件,内容: theme: jekyll-theme-merlot 六、设置主题 主题选择后,页面的标题和描述文字都是主题自带的,

1.2K20

Jekyll 社交图标集合创建

字体图标,顾名思义就是把所有的图标都变成了字体编码一样,只要我们在网页中引入字体图标文件就可以像用 Unicode 一样使用字体图标了。这种方式最好的一点就是,像操纵字体一样设置字体图标的样式。...说到这里,有人可能会想起 Bootstrap 等 UI 框架中自带的字体图标集合。那我们直接使用某个框架提供的字体图标集合不就万事大吉了吗?...首先访问 Iconfont 首页 并使用 Github 账户或者其他方式登录好。然后在搜索框中输入 github 查询平台所有开放的相关图标,点击即可加入购物车。   ...这里提供了三种方式来使用创建好的社交图标集合,目前平台推荐的是Symbol 引用方式。接着即可按照以下三个步骤在你的网页上轻松使用自定义好的社交图标集合了。...(采用 CC BY-NC-SA 4.0 许可协议进行授权) 本文标题:《 Jekyll 社交图标集合创建 》 本文链接:https://lisz.me/tech/webmaster/jekyll-sns-icons.html

2K40

开垦属于你的网络空间:简单易用的静态博客框架推荐

灵活多样化:由于其先进模板系统和强大分类系统,Hugo 可以用于创建各种类型的网站,包括企业、政府、非营利组织等官方机构;新闻媒体、事件展示及项目介绍等专题页面;文档库;图片集合与个人博客等。...简单易用:Jekyll 不会给用户带来不必要的复杂性和配置,它只做你告诉它去做的事情。 高度可定制化:使用 Jekyll,您可以根据自己的需求轻松地创建个人、项目或组织网站,并对其进行完全控制。...广泛兼容性:不仅 Hexo 可以完美适配于绝大多数操作系统,并且还提供对常见标记语言 ( Markdown) 和第三方插件 ( Octopress) 等格式/工具库进行全面支持。...多样化支持:eleventy 支持多种模板语言 ( HTML、Markdown、JavaScript 等),让开发者有更大灵活度来选择适合自己需求和喜好的方式进行编码。.../gohugoio/hugo https://github.com/jekyll/jekyll https://github.com/hexojs/hexo https://github.com/11ty

38440

在GitLab pages上快速搭建Jekyll博客

在GitLab pages上快速搭建Jekyll博客 前一段时间将我的Jekyll静态博客从github pages镜像部署到了 zeit.co(现vercel)上了一份,最近偶然发现gitlab pages...也不错,百度也会正常抓取,于是动手倒腾,将github pages快速迁移Jekyll博客到gitlab pages,中途遇到了不少坑,管他呢,一把刷。...比如,我的jekyll blog对应的代码仓库是: https://github.com/yanglr/yanglr.github.io, 对应的访问页面为 https://geekplayes.com...legege007 PreferredAuthentications publickey IdentityFile ~/.ssh/id_rsa_gitlab Step3: Clone代码 设置好...大概再需要等6分钟左右,页面上的Domain会从http版的 http://blog.geekplayers.com 变为: https://blog.geekplayers.com,表明SSL证书已成功获取

1.3K10

GitHub 12个实用技巧

你可以直接复制一个图片到剪贴板,当你粘贴的时候,你的图片将会自动上传到云,然后展示在页面上。 #3 美化代码 如果你想编写一个代码块,以三个反引号开头,GitHub会尝试猜测你用的什么语言。...#7 灵活使用GitHub地址栏 GitHub的页面导航已经做的很好了,但是有些时候直接在导航栏中输入会更快。...了解更多 #10 GitHub wiki 非结构化网页集合,也就是说你所有的网页没有从属关系,没有上一段和下一段按钮,也没有面包屑导航。...#11 静态博客 你可能已经知道你可以使用GitHub部署静态网页,这个部分我将告诉你用Jekyll(简单博客静态网站生成器)生成静态网页 非常简单,Jekyll会用漂亮的主题去渲染你的README.md...点击设置,选择Jekyll主题。 ? 我将得到一个Jekyll主题的页面: ? 我们通过一个markdown文件就创建一个静态网站,编辑修改非常方便,所以GitHub基本上可以当内容管理系统来用了。

1.2K20

技术人如何搭建自己的技术博客

但其实更多程序员是不知道如何去搭建一个博客,其实如今搭建一个个人技术博客非常简单,其中最简单搭建方式莫属使用 GitHub Pages + Jekyll 了,我的博客就是使用这种技术。...仓库空间不大于1G 每个月的流量不超过100G 每小时更新不超过 10 次 Github Pages 使用 Jekyll 来构建内容,那么 Jekyll 是什么呢?...它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器( Markdown)和我们的 Liquid 渲染器转化成一个完整的可发布的静态网站,你可以发布在任何你喜爱的服务器上。...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...3、设置 GitHub Pages 点击 Settings 按钮打开设置页面,页面往下拉到 GitHub Pages 相关设置,在 Source 下面的复选框中选择 master branch ,然后点击旁边的

1.3K10

听说你想要部署 Octopress?满足你

云开发静态网站托管支持通过云开发SDK调用服务端资源:云函数、云存储、云数据库等,从而将静态网站扩展为全栈网站。...^C github github git clone https://github.com/imathis/octopress.git www.bihe0832.com Cloning...将静态页面部署到托管服务 你可以直接选择将构建好的静态页面上传到托管服务,但是考虑到博客的更新频率,还是选择使用官方提供的工具来上传。...$ cloudbase functions:deploy – 查看命令使用介绍 $ cloudbase -h Tips:可以使用简写命令 tcb 代替 cloudbase 使用...如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引和404面: 访问静态页面 在浏览器输入讯云提供的默认域名 https://blog-www-173dc4

85010

如何搭建免费博客

随着github的出现,这样问题出现了改观,使用gitbub提供的github pages功能可以提供一个独立的站点供我们使用。结合相关的域名配置,我们就可以很方便的搭建属于自己的博客平台。...github Pages的使用 概述 对于开发者来说github是很熟悉的,是一个托管代码和开源的网站.如果你想找一个开源的项目,首先看到的可能是一个源码的列表,这样对于项目的展示不够直观,github...---- 总结一下 对于上面所述的github Pages(以下称gh-Pages)是github给用户提供一个“静态页面的web服务器”,我们可以根据需要把页面上传到指定的仓库中,可以通过github...详细介绍参见jekyll官方文档。 jekyll安装 jekyll的安装可以参见 windows安装Jekyll linux和MacOS安装Jekyll jekyll使用 1....到这里,我们使用jekyll根据我们写的模板生成了对应的静态页面,下面我们把数据传入到github的gh-pages下面。 git add .

1.1K40
领券