Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...我选择直接从Github下载我的博客相关的内容(对应地址为:https://github.com/bihe0832/bihe0832.github.io)对于基于Jekyll的静态站点的目录结构,可以参考官网提供的...在项目根目录直接命令行运行 jekyll build 即可查看构建结果 ➜ blog git:(master) ✗ jekyll buildConfiguration file: /github/blog...如果想在本地查看效果,在项目根目录直接命令行运行 jekyll server 即可➜ blog git:(master) ✗ jekyll serverConfiguration file: /github...如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引页和404页面:访问静态页面在浏览器输入讯云提供的默认域名 https://blog-qcloud-new
Jekyll 和 Hexo 可以说是最受欢迎、用户都非常多的两个静态博客生成系统。本文给大家介绍利用 Hexo 结合 Github pages 来搭建个人网站。 1 什么是 Hexo?...在本地预览上,Jekyll 是生成了页面然后进行预览,而 Hexo 是没有在根目录生成文件的,速度也快不少。因此,Hexo 在性能和速度上面更胜一筹。...而 Hexo 需要事先在本地生成整个站点页面,再将 Html 文件、资源文件等上传到 Github 上。 •主题 Jekyll 使用 Liquid;它是有 Ruby 语言编写的开源模板语言。...从主体方面上看,Hexo 官网就有主题跳转链接,目前一共有 280 个主题;这 Jeklly 是无法比拟的。再者,相比 Ruby,Node.js 使用的人群更广, 火爆程度更好。...因此,设置 post_id 的链接方法有两种。 关于固定链接,还是“三不二建”的套路。 1.日期不要出现在固定链接中。会让搜索引擎爬虫认为是过期内容,导致不再爬取 2.链接的层次不要太深。
我们的网站是寄托在 Github 网站上,Github 服务器节点是在美国,所以访问速度没有国内主机快。 以上是我对于 Github Pages 方案的理解。...进入创建新仓库页面后,在 Repository name 的位置填写域名,格式是 username.GitHub.io。我的 Github 的 id 是 monkey-soft,所以域名如下图所示。...3.Jekyll 主题选择 上文讲到选择默认的主题,这里都是 Jekyll 主题。那什么是 Jeklly呢?它是一个简单静态站点生成器,能将纯文本的(一般是 Markdown 文件)转化为静态页面。...另外一个原因是,假如你要修改文章的日期重新发布的话,链接地址就变了,也就是意味着你的反向链接,PR 等等都没有了。 2.链接的层次不要太深 默认的固定链接是 /年/月/日/文章名。...我的设想是在首先展示文章时会显示封面图片,我在文件中创建一个名为 img 文件夹来存放封面图片,图片命名须方式是以日期的形式。
本文主要用到的技术就是GitHub的生态之一GitHub Pages。...然后目录文件夹如下D:.│ .gitignore // git的忽略文件│ 404.html// 自定义的404页 固定│ about.markdown // about页固定│ Gemfile...bundle exec jekyll build 来构建网站,构建完毕,会看到多一个_site 文件夹PS D:\Github\test> bundle exec jekyll buildConfiguration..._site 文件夹就是存放md转网页之后存放的位置接下来运行PS D:\Github\test> bundle exec jekyll sConfiguration file: D:/Github/test...... press ctrl-c to stop.http://127.0.0.1:4000/ 在没有具体指定的情况下会生成一个这样的地址这里默认使用的是minima 的主题,到这为止,都可以复制到刚才的
开始在 GitHub 上写博客 准备工作如下 申请 GitHub 账户并准备代码库 安装 Jekyll 安装 Ruby 如果用的是 Windows 系统, 需要先安装 Ruby , 需要下载 1.9.3...上传文件 上传文件最简单了, 不过我的建议是在本地运行 jekyll --server , 先预览一下, 确认无误之后再上传。 只要用 Git 提交上去即可。...大约过一分钟, 新的 Github 页面就生成了, 输入 https://your-username.github.com 就可以浏览。...注意问题 如果将运行 jekyll --server 之后, _site 目录下没有生成任何文件, 只要将 _config.yml 中的 auto 配置为 false , 再运行 jekyll --server...,看看错误信息, 一般都可以解决的; 在 windows 系统平台上, 如果你的博客包含中文字符, 则需要将当前命令行的代码页修改为 65001 (UTF8) 才能正常运行; 不要使用 windows
我们知道,Github Page 默认支持的也是 Jekyll,而非 Hexo、Hugo等静态站点生成器。...由于本站目前是采用 Jekyll 来搭建的,所以为了提供给读者更加高效的阅读条件,笔者在廖柯杰大佬开发的 H2O 主题的基础上做了一些功能上的增加和优化,接下来就来详细介绍一下。...; 支持的高亮编程语言丰富,虽然在某些地方还是有所瑕疵,但是总体上还是很实用; 高亮主题基本上现有的都能用,本站所用的就是 Github 官方同款主题。 ...Prism 工具的安装使用相较其他两种稍微复杂一点,需要下载插件 prism.rb 手动安装到 _plugins 文件夹中,然后在文章模板页添加 prism.css 和 prism.js 的引入。...,这里就使用了 Github 提供的 gist 代码片段服务。
具体的规则 在github的项目中,创建一个gh-pages的分支,分支创建完成后就可以使用http://{userName}.github.io/{projectName}来进行访问。...在github上面添加一个Repositories,名为blogTest 4. 把项目推送到分支,执行以下命令: git add ....---- 总结一下 对于上面所述的github Pages(以下称gh-Pages)是github给用户提供一个“静态页面的web服务器”,我们可以根据需要把页面上传到指定的仓库中,可以通过github...在_layout下创建一个default.html,作为一个网站的模板,添加如下内容(此处代码中的所有的{ {中间都有一个空格,为了不让jekyll去解析,拷贝的时候请注意): 在浏览器中打开127.0.0.1:4000可以看到刚刚生成的网站: ? ?
在GitLab pages上快速搭建Jekyll博客 前一段时间将我的Jekyll静态博客从github pages镜像部署到了 zeit.co(现vercel)上了一份,最近偶然发现gitlab pages...于是有了下文的 从github pages快速迁移Jekyll博客到gitlab pages的完全指南。 Step1: 导入已有项目 登陆gitlab.com,点击New Project, ?...比如,我的jekyll blog对应的代码仓库是: https://github.com/yanglr/yanglr.github.io, 对应的访问页面为 https://geekplayes.com...还可以在git clone时,去掉末尾的.git Step4: 创建 CI/CD配置文件 这部分可以直接参考gitlab官方给的 jekyll 示例 https://gitlab.com/pages/jekyll...大概再需要等6分钟左右,页面上的Domain会从http版的 http://blog.geekplayers.com 变为: https://blog.geekplayers.com,表明SSL证书已成功获取
现在上几张成果图,呵呵,使用的轮子真高(滑稽.gif): (二) 关于我的博客 (1)Home页: (2) 分类与标签页: (3)单个文章的编辑日期,作者,分类,标签,查看更多...(4)顶部Tab栏 (5)底部分页,访客量统计,回到顶部按钮 (6)博客详情页 以上就是整个博客的页面,其实这个博客也是后来发现的,一位比较低调的阿里前端哥哥撸出来的,且一直在维护中的...于是:我索性跟着博客Fork下来进行个人博客的修改 路上的风景 注册一个Github账号 or 码云账号 Github官网 Fork(拉取)我的博客模板 在Github上搜索:xudailong.github.io.../ 好了,现在就能正常的访问刚刚我们Fork过来的页面,此时你的博客地址应该是:xxx.github.io xxx 是你的Github用户名* 当你在浏览器的新窗口输入:xxx.github.io...+ jekyll 的方式 我采用的搭建博客的方式是第二种: 使用GitHub Pages +jekyll的方式。
如果读者想要看到文章卡片展示页,还是可以点击顶部的导航栏中的 BLOG 直接访问。 归档页 归档页设置为由 Jekyll 按照模板自动生成,以年份、日期、文章标题分级列表展示,简洁清晰。...系统日志页 系统日志页其实也不是经常更新的,只有在博客整体作出设置或改进的才加以说明。...另外,也可以将一些固定的站点信息放置在系统日志页,比如站点的多点部署信息,读者可以根据此信息访问最快、最合适的节点。...具体文章列表页和归档页置顶效果如下所示: 分页依赖升级 (2022年5月26日更新) 由于原有的 jekyll-paginate 库已停止更新,所以升级到目前更新、维护活跃的 jekyll-paginate-v2...发布部署 由于 Github 提供 Jekyll 静态生成器的静态页面托管,只要打开仓库的 Pages 功能,当推送更新到 Github 时即会自动部署。
这里详细说一下 widgets,widgets 就是页面上的各个区域的挂件,可以通过配置灵活改变其位置和具体信息,根据喜好决定布局采用 3 栏还是 2 栏布局。...Step 7 怎么样让文章两栏展示 目前文章页仍然和首页一样,是三栏布局,为了有效利用空间,希望文章页能够两栏布局。...在 _config.yml 中配置你的 GitHub Pages 对应的仓库地址,如我的是: deploy: type: git repo: https://github.com/Ivocin/...其他 CMS(Content Management System) 产品 市面上有非常多的 CMS 产品,侧重点各有不同,罗列如下:Hexo、VuePress、Nuxt、Docsify、Docute、...其他的适合写博客的有 Gatsby、Hugo、Jekyll ,没深入使用过,先不做评价。
本文将介绍在Windows平台上搭建基于github pages 的个人博客网站的过程,以及利用Jekyll进行本地博客调试的过程,对于不懂前端的人来说是一个比较基础的入门教程。...市面上有很多支持Markdown语法的代码编辑器可选,例如vscode,sublime text,atom等等。...本人的这个博客其实就是一个托管在Github仓库上的代码仓库,github提供了种特殊的repo,允许用户简单地创建自己的博客网页。...选择自己喜欢的主题 用户也可以自行选择其他主题,在jekyll主题官网 上有很多开源的主题,可以选择自己喜欢的,也可以自行搜索jekyll主题,网上有不少开源的主题,选择自己喜欢的即可。 3....,最后呈现的结果与在线的是一样的,调试完成了在推送到github仓库部署就行。
而 Jekyll 是一个生成静态网页的工具,在 Github 上绑定自己的域名后可以当作个人博客访问。 那么接下来就开始用这两个工具搭建一个属于我们自己的博客吧。 1....Jekyll 运行环境的配置与安装 事实上,在搭建博客的过程中,配置这个安装环境我花的时间是最久的也是最懵逼的,最后也是不知道为什么才终于配置成功。...而我作为一个强迫症,已经将自己 Github 的库克隆在 Windows 的本地文件里,不想再改位置,于是我硬着头皮一边查资料,一边尝试将 Jekyll 安装在 Window 系统上。...我的博客选择的是在 Github 上找的博客主题,它对目录中各个文件的内容、功能都有很详细地说明,适合我这样的小白学习使用 Jekyll 。...几个主要文件的参数在上面的 Github 页面上有很清楚的说明,想直接用这个模板的朋友可以根据说明修改。
前言 Jekyll 生成目录的方案 第一种方案 第二种方案 第三种方案 实践 布局 目录生成 自适应 最终代码 参考资料 前言 Jekyll 与 Hexo 不同之处有很多,其中一处是在文章页面中不支持原生...Jekyll 生成目录的方案 如参考资料 1 中所提到的,如果想要在 Jekyll 中实现文章目录,有三种不同的方案可供选择: 第一种方案 利用完整的标签来生成静态目录,可以看到在本文的开头就是这样的一个实例...如果不怎么了解 Github Action,恐怕这种方式部署在 Github Pages 上也不是很省心。...这里我们想要实践的是在未使用 Bootstrap 框架的 Jekyll 主题中增加目标一的功能,因此这两个例子的做法都不是很合适。...具体在 post 模板页使用 toc 模块的代码如最后所示。 自适应 为了实现目标二,这里采用了最简单的 CSS 媒体查询,即在平常 PC 端宽屏时采用如下 common.sass 中的样式。
Markdown 也是一种标记语言,它的语法比HTML更简单,书写量也更少,用处很广泛。在GitHub Pages中写博客,通常就是使用Markdown。...比如你正在阅读的这篇博客就是用 Markdown 编写的。(原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。...库名即为访问域名,在本教程中,即为 hummerstudio.github.io 当你打开这个链接时,显示的可能不是上面的代码对应的内容。因为我不能拿这个当作真正的主页嘛!...而且那时界面上的 Save 按钮是灰色无法点击,采取了hacking的方式才解决,设置过后修改内容按钮是可以点按的。不确定是当时网络问题还是GitHub禁用了这种方式,因此这种方式就不介绍了。)...在配置页面的 Theme Chooser 处可以选择自己喜欢的 Jekyll 主题,我现在使用的是 jekyll-theme-merlot。
我们的准备如下 拥有一个自己的域名 拥有Git基础知识(不懂没关系,跟着大伙走,学会Github即可) 拥有一个GitHub账号 一款心仪的jekyll模板 html & css(选择器是基本技能)...,懒惰的我就不重复教了,见谅 # jekyll与实现 如果你看到这,你还没有GitHub,我表示对你的耐心程度真的很失望,想空手搭博客是不可能的,建议去申请一个GitHub吧,因为jekyll是基于...HTML & CSS知识是否足够,如果你对你的百度很自信,那么接着走 首先我们要清楚问题所在,回到页面上,我们按F12打开控制台,接着进入眼帘是红DuangDuang的报错,我们将鼠标指着报错的地方,...细心的朋友一下就发起了其中的端倪,浏览器在访问的样式链接根本就不存在 /editorial-jekyll-theme 这个路径,其实,这是jekyll的配置问题 我们编辑器打开_config.yml...也是希望大家不要光跟着做,下面我在分享一个相对友好的jekyll模板 https://github.com/arnp/herring-cove 根目录包含了index.html,且目录比较易读,只要清楚
本文就选取 github pages 作为支持,它以 github 仓库为内容源载体,配以 jekyll theme ,也就是主题,主题就相当于一个配置好的网站初级架构。...将内容推送到 github 仓库后,jekyll 主题会将内容格式化后推送到你的博客主页。...github pages 配置项,选择 jekyll theme ?...后续改进 除了官方提供的几个基础模板,github pages 也支持其他开源的模板,可以在模板页面选择 模板地址: http://jekyllthemes.org/ ?...最后一提,目前还只是将项目 fork 到了自己的博客所属的代码仓库,后续需要改动的地方还是很多的,目前的想法是 先将外链的部分、博客内容页、博客介绍页、tab等个性化的内容部分都替换为自己的内容 增加一个自动化配置的
而最近发现的一个超级方便且简单个人博客系统——— jekyll 关于 jekyll jekyll 是一个简单的免费的Blog生成工具,类似 WordPress....最关键的是 jekyll 可以免费部署在 Gitee/Github上,并且支持一件构建. 且无需我们手动申请域名 话不多说我们下面就开始使用吧~~~ 二....部署 基于 jekyll 搭建的个人博客可以部署在 Gitee/GitHub 上, 我们这里部署主要以 Gitee 为例 原因我想大家很清楚: Gitee(码云) 他快啊....在仓库右上角, 点击fork 即可将代码复制到自己的仓库; 还有一种思路就是直接将代码下载, 修改好之后上传至自己新建的仓库, 这里我以第一种方式为例 下载自己仓库的代码 这里可以直接在命令行...这两个参数可以通过 gitee 的管理页查看 第一次修改后, 后续再次修改 text_skin和 highlight_theme时, 需要关闭网页, 然后清理缓存, 然后刷新才能访问到.