,采用按需自动加载代码类型,尽可能减少因 Prism 造成的阻塞。...并利用 Github API 查询页面的最近一次 commit 更新时间作为文章最近更新时间。效果如下图所示。 ...由于本主题未使用 Bootstrap 前端框架,所以添加起来稍微有些麻烦,现已增加此功能。在浏览器窗口超过 1050 px 的情况下,在文章页面可以正常看到右侧的文章侧边索引导航。...(2022年5月14日更新) 为文章的移动端页面添加了索引导航按钮。鉴于单页面的内容有限及侧边位置空间有限,暂未对单页面进行支持。...发布部署 由于 Github 提供 Jekyll 静态生成器的静态页面托管,只要打开仓库的 Pages 功能,当推送更新到 Github 时即会自动部署。
灵活多样化:由于其先进模板系统和强大分类系统,Hugo 可以用于创建各种类型的网站,包括企业、政府、非营利组织等官方机构;新闻媒体、事件展示及项目介绍等专题页面;文档库;图片集合与个人博客等。...此外,Hugo 还具有以下关键特性: 强大资源管道:包含 CSS 和 JavaScript 打包功能 (支持 Sass 编译),图像处理工具 (调整尺寸、裁剪旋转)、EXIF 数据抽取; 多语言支持:支持多国语言翻译...内置插件和变量功能:内置 Liquid 扩展,自定义 Permalinks 等特性使得在建立并管理页面时更加简便。...特性: Aurora具有良好的扩展性,在保证稳定运行情况下可以根据业务需求灵活添加新功能; 通过权限控制机制确保安全访问; 友好简洁界面设计及响应式布局适配各类设备屏幕大小; 集成CDN加速以提高网站加载速度...; 相关链接 https://github.com/gohugoio/hugo https://github.com/jekyll/jekyll https://github.com/hexojs/hexo
继上一轮改造过后,比较拖页面加载速度的主要有三点: 页面首个请求响应时间; 图片资源加载时间; 站内搜索引用的 JSON 资源加载时间。...第 1 点在页面仍然托管在 GitHub Pages 的前提下,似乎没有什么好办法能产生质的飞跃;本篇主要改善了第 2 点和第 3 点。...Jekyll 的 layout 可以理解为页面模板,它是可以继承的,比如我的博客的所有页面模板有一个共同的祖先模板 _layouts/default.html,模板里可以使用 Liquid 语法对内容进行处理...这个 JSON 文件编译前长这样: https://github.com/mzlogin/mzlogin.github.io/blob/master/assets/search_data.json Jekyll...0x03 结语 经过以上改造,博客页面的加载速度又得到了小小的提升,所有相关源码可以在 https://github.com/mzlogin/mzlogin.github.io 找到,有相关心得或建议的朋友欢迎交流指正
Jekyll是一个用Ruby编写的静态站点生成器,支持博客并与Github页面整合。因为Github只负责托管,这种设置使数据分析共享和可视化变得简单。...虽然Jekyll已经有了博客框架,还是需要创建一个assets文件夹来存储图像,CSS和JS文件。...运行所有相关单元格,以便在页面上显示你想要在Jekyll博客上显示的内容。导航到File > Download As > Markdown (.md)。...如果日期格式不正确,帖子可能不会出现在博客上: touch YYYY-MM-DD-example-post.md 4.markdown文件应以三个破折号开头并包含标题,这些标题为Jekyll提供了适当的页面数据以便填充帖子的信息...[jupyter_table.png] [jekyll_table.png] 在Jekyll中添加图像 通过markdown添加图像需要将图像存储在项目目录中。
第二篇:Hexo制作文档并发布到GitHub 第三篇:Jekyll制作文档并发布到GitHub 第四篇:Vuepress制作文档并发布到GitHub ---- Jekyll..._includes 你可以加载这些包含部分到你的布局或者文章中以方便重用。可以用这个标签 {% include file.ext %} 来把文件 _includes/file.ext 包含进来。...完成转换,就会将生成的页面放在这里(默认)。...: https://help.github.com/articles/setting-up-your-github-pages-site-locally-with-jekyll/ 需要安装Ruby...---- 四、比较好的Jekyll模板 https://github.com/mzlogin/mzlogin.github.io https://github.com/Huxpro/huxpro.github.io
最关键的是jekyll可以免费部署在Github上,而且可以绑定自己的域名。...3、安装 Jekyll cd mzlogin.github.io.git/ bundle install 4、启动 jekyll jekyll serve -H 0.0.0.0 -P 80 效果如下...按照 GitHub Pages 的规定,名称为 username.github.io 的项目的 master 分支,或者其它名称的项目的 gh-pages 分支可以自动生成 GitHub Pages 页面..._wiki 文件夹中是我已发布的 wiki 页面。 images 文件夹中是我的文章和页面里使用的图片。 修改「关于」页面。...有时一图抵千言,有时可能只会拖慢网页加载速度。 言之有物,不做无痛之呻吟。 如果写技术文章,那先将技术原理完全理清了再开始写,一边摸索技术一边组织文章效率较低。
很快我发现 fyne 官网是采用 jekyll 构建的。jekyll 是采用 ruby 语言编写的静态网页工具。jekyll 常用于搭建个人博客。...它支持使用 markdown 语法编写文章,然后自动生成相应的静态页面托管在远程主机上供用户访问。为了能本地运行文档,我们必须先安装 ruby + jekyll 环境。...如果提示命令找不到,则未安装成功,或环境变量设置不正确: ? 成熟的编译语言通常都有相应的包管理工具,用于下载和管理依赖。...安装 jekyll gem 安装完成之后,安装 jekyll 就很简单了。只需要执行gem install jekyll等待安装完成。 ?...Go 每日一库 GitHub:https://github.com/darjun/go-daily-lib
begin-with-the-crazy-ideas.textile | └── on-simplicity-in-technology.markdown ├── _includes (加载这些包含部分到你的布局...接下来我们要做的就是把我们的Jekyll生成的blog部署到Github Pages上去即可 3.部署blog 我们先把刚刚新建的仓库git clone到本地,然后cd 到仓库的目录下,执行jekyll...serve -B cd username.github.com jekyll serve -B 注意,启动前确保其他目录下没有jekyll服务,可以ps aux|grep jekyll 查看进程...把整个文件都push到github上去 git add --all #添加到暂存区 git commit -m "提交jekyll默认页面"...+0800 categories: Blog tag: Blog --- 文章写完之后,通过jekyll build生成页面,jekyll serve -B 通过本地localhost:4000查看文章
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多,其中一处是在文章页面中不支持原生...缺点在于 Github Pages 不支持这类自定义插件,你可能需要使用自定义的 workflow.yml 文件来指导 Github Action 来编译生成静态文件。...如果不怎么了解 Github Action,恐怕这种方式部署在 Github Pages 上也不是很省心。...这种方式也可以直接运行在 Github Pages 下。...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能,因此这两个例子的做法都不是很合适。
博客自定义指南 博客链接/blog link tea9 使用Jekyll博客引擎 基于Theme H2O修改 前置条件/Before: 需要你有 GitHub Github Page Jekyll...环境 如以上都有还有问题请参考 使用jekyll搭建个人博客 jekyll-theme-H2O_README 步骤/Step: github目录 克隆项目: git clone https://...github.com/tea9/tea9.github.io.git 目录结构: ...._includes # 一些封装的布局 ├──_layouts # 默认布局 ├──_posts # 文章目录 -建议清空目录 ├──assets # 一些前端文件 ├──dev # 未编译的前端文件...├──laji # 我的之前博客文件 -目录建议删除 ├──live2d # 首页的二次元小姐姐 ├──pages # 一些我自定义的页面 | ├──about.md #关于我页面
begin-with-the-crazy-ideas.textile | └── on-simplicity-in-technology.markdown ├── _includes (加载这些包含部分到你的布局...接下来我们要做的就是把我们的Jekyll生成的blog部署到Github Pages上去即可 3.部署blog 我们先把刚刚新建的仓库git clone到本地,然后cd 到仓库的目录下,执行jekyll...serve -B cd username.github.com jekyll serve -B复制代码 注意,启动前确保其他目录下没有jekyll服务,可以ps aux|grep jekyll...把整个文件都push到github上去 git add --all #添加到暂存区 git commit -m "提交jekyll默认页面"...+0800 categories: Blog tag: Blog ---复制代码 文章写完之后,通过jekyll build生成页面,jekyll serve -B 通过本地localhost:4000
您可以使用Jekyll主题选择器在网上创建和发布GitHub页面。如果您喜欢在本地工作,您可以使用GitHub桌面或命令行。...加载新的GitHub页面站点。 在您推送到主分支后,您的项目页面站点将在“http(s)://.github”上可用。io / ”。...图像通常在该部分中。 提示:如果您无法找到您网站中的资产,请尝试在http文本编辑器或GitHub上搜索您网站的代码。...要取消发布用户页面网站,请删除master分支或删除您的username.github.io存储库。有关更多信息,请参阅“ 删除未使用的分支”。...进一步阅读GitHub页面 请参阅“ 自定义GitHub页面 ”了解更多关于使用批准的Jekyll插件和GitHub Pages网站,创建自定义404页面以及查看可用存储库元数据的更多信息。
这时候,[阿成][]同学又出现了,提到另一个方法,就是利用github已支持的jekyll,按要求建目录、文件,然后直接传到github对应的项目中就可以了,github会自动解析模板并显示,此方法优点就是只需要安装...站点 先看看阮一峰的《搭建一个免费的,无限流量的Blog—-github Pages和Jekyll入门》,看完对整个站点应该就有了一个大概的认识。...在jekyll templates中可以看到,是支持include的,只需要在根目录下创建一个名为_includes的目录,把页面片放到这个目录中,然后用下面的语法加载对应的页面片文件即可: {% include...footer.html %} #加载名为 footer.html 的文件到当前位置 {% include footer.html param="value" %} #也可传参数到页面片文件中,在footer.html...添加RSS 要方便定阅,可以添加RSS输出到我们的站点上,大体分为三步: 1.修改设置文件 name: 站点名称 description: 站点说明 url: 站点URL 2.在github上有一个jekyll-rss-feeds
可能是出于扩大业务的考虑, Cloudflare 现在也开始提供类似于 Netlify 的持续部署和免费静态页面托管服务,并且提供了一个非常棒的域名 *.pages.dev。...当然,还有另外一个原因,Github 的原生支持静态生成器就是 Jekyll,这也意味着在 Github 上部署 Jekyll 更加方便。 ...Jekyll 的开始与 Hexo 有所不同,Hexo 是采用子目录的方式加载应用新的主题,而 Jekyll 则是采用主题化的方式应用主题。...git clone git@github.com:zhonger/zhonger.github.io 修改配置 Jekyll 的配置文件 _config.yml 在主目录下,非常容易就可以找到,以下为一些常用的配置内容及解释...# Site settings 配置站点 # 博客名称 title: 'Mr Li' # 博客描述,会出现在每个 HTML 页面的 head 部分 description: '个人的一个技术博客站点。'
感谢Huxpro提供的博客模板 我的的博客 前言 从 Jekyll 到 GitHub Pages 中间踩了许多坑,终于把我的个人博客BY Blog搭建出来了。。。...快速开始 从注册一个Github账号开始 我采用的搭建博客的方式是使用 GitHub Pages + jekyll 的方式。...Fork了成功的页面 image.png 修改仓库名 点击settings进入设置 image.png 修改仓库名为 你的Github账号名.github.io,然后 Rename image.png...有心的同学在 jekyll官网 就会发现 jekyll 的 提供的实例代码。...聪明的你应该发现怎么做了吧~ 安装 jekyll和 jekyll bundler $ gem install jekyll $ gem install jekyll bundler 进入你的 Blog
GitHub Pages Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管在 Github 上,你可以选择使用 Github Pages 默认提供的域名...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...但如果我们只是在 GitHub 上面使用的话,到不需要知道 Jekyll 的语法,一般 Github 会自动将我们写的 Markdown 文件转换成静态页面。...3、设置 GitHub Pages 点击 Settings 按钮打开设置页面,页面往下拉到 GitHub Pages 相关设置,在 Source 下面的复选框中选择 master branch ,然后点击旁边的...4、重命名项目 点击 Settings 按钮打开设置页面,重命名项目名称为:github_username.github.io。 ?
以下是一种无需服务器和域名的方法,利用GitHub Pages和Jekyll搭建个人博客网站(http://m.bokequ.com/list/22-0.html) 步骤一:准备 GitHub 账户...步骤三:下载 Jekyll 主题 Jekyll 是一个简单易用的静态网站生成器,GitHub Pages 支持使用 Jekyll 搭建个人网站。...你可以在 Jekyll 官方网站(https://jekyllrb.com/)或 GitHub 上找到各种免费的 Jekyll 主题。选择一个你喜欢的主题,将其下载并解压缩到本地。 ...步骤四:上传文件到 GitHub 仓库 将 Jekyll 主题文件夹中的所有文件上传到你在步骤二中创建的 GitHub 仓库中。...步骤六:定制你的博客 编辑 Jekyll 主题文件夹中的配置文件和内容文件,定制你的个人博客。你可以修改页面布局、添加新的页面和文章,以及调整样式和颜色。
Github 主页,发现有一个 Jekyll 主题 Yummy Jekyll Theme。...掌握了这个技能之后,我的写作利器就成了 Sublime text 3 + Markdown 组件 + Github + Jekyll。...Jekyll 是静态博客,最终给大家访问的页面都是生成的静态 Html,就计划在本地将 Jekyll 博客编译成 Html 文件,打包后手动上传到服务器的 nginx 下面不就行了。...开浏览器的调试页面跟踪了一下慢的原因,发现使用国内公共 CDN 的 js、css 需要一分钟甚至更长时间,继续跟踪发现只要是国内的资源加载起来都非常的慢。...在备案的同时,我在腾讯云主机上搭建了 Jekyll 、git 环境,同时写了一个简单的脚步,执行脚步会自动从 Github 拉取增量代码并打包到 Nginx 的目录下,同时利用 linux 的 crontab
通过使用Markdown或其他格式编写博客文章,并在Next.js中使用静态生成来生成预渲染的静态页面,可以使博客页面更快地加载,并提高SEO排名。...你可以查看它的 GitHub 和官网了解更多。 4.Jekyll star 数 45K+。 Jekyll 是一个基于 Ruby 的静态站点生成器,支持多种主题和插件。...Jekyll 提供了丰富的文档和社区支持,使用起来也比较简单。Jekyll 也是非常流行的静态网站生成器之一。 你可以查看它的 GitHub 和官网了解更多。 5.Nuxt star 数 44K+。...快速:由于Docsify是一个基于JavaScript的工具,它可以很快地加载和渲染页面。 搜索功能:Docsify提供了内置的搜索功能,可以轻松找到所需的内容。...Eleventy 自称是 Jekyll 的替代品,旨在以更简单的方法来制作更快的静态网站。 你可以参照它的 GitHub和官网来了解更多的细节。 13.Pelican star 数 10K+。
领取专属 10元无门槛券
手把手带您无忧上云