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

Github Pages jekyll在使用自定义域名时不加载CSS

Github Pages是一个由GitHub提供的静态网页托管服务,它允许用户将自己的代码仓库直接部署为网站。而Jekyll是一个简单的静态网站生成器,它可以将纯文本转换为静态网站,方便用户快速搭建个人博客或静态网站。

当使用自定义域名时,Github Pages默认会加载CSS文件。如果在使用自定义域名时CSS文件没有加载,可能是以下几个原因导致:

  1. 域名配置问题:确保你的域名已正确配置,并且指向了正确的Github Pages仓库。你可以在域名注册商的DNS设置中添加CNAME记录,将域名指向你的Github Pages仓库。
  2. HTTPS安全问题:如果你的自定义域名启用了HTTPS,而你的CSS文件使用了HTTP链接,浏览器会阻止加载不安全的资源。确保你的CSS文件链接使用了HTTPS。
  3. 文件路径问题:检查你的CSS文件路径是否正确。在Jekyll中,默认的CSS文件路径是/assets/css/style.css,确保你的CSS文件位于正确的路径下,并且文件名和后缀名正确。
  4. 缓存问题:有时候浏览器会缓存旧的CSS文件,导致新的CSS文件无法加载。你可以尝试清除浏览器缓存或使用无缓存模式重新加载页面。

如果以上方法都无法解决问题,可以尝试以下步骤:

  1. 检查Github Pages仓库的设置:确保你的Github Pages仓库的设置中指定了正确的自定义域名,并且启用了自定义域名。
  2. 检查Jekyll配置文件:在Jekyll的配置文件_config.yml中,确保urlbaseurl的值正确配置。url应该是你的自定义域名,baseurl应该是你的仓库名称。
  3. 检查CSS文件链接:在HTML文件中,检查CSS文件链接是否正确。可以使用相对路径或绝对路径来引用CSS文件。

推荐的腾讯云相关产品:腾讯云静态网站托管服务(云开发静态网站托管),该服务提供了简单易用的静态网站托管能力,支持自定义域名,并且可以通过CDN加速访问。详情请参考腾讯云静态网站托管服务介绍:https://cloud.tencent.com/product/sps

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

使用自定义域名来访问GitHub上部署的hugo博客——GitHub Pages

hugo博客搭建好了,但访问的时候只能是以固定的域名形式(用户名.github.io)进行访问。这时可以通过购买域名的方式行实现自定义域名访问。可以去国外买或者国内,国内都是需要备案的。...购买域名后: 第一步 首先是用ping命令找到存放你的github pages的主机的IP地址,终端里面用命令ping xxx.github.io便可完成,下图中红框内的就是我们要找的IP地址:...第二步 购买域名的提供商为域名添加解析。我是阿里云买的域名,因此我以阿里云的为例。域名控制台选择想要绑定的域名,并点击解析: ?...这里设置的@形式与下面GitHub自定义域名要对应 ?...设置完成后就可以通过 yunxdr.top 访问部署GitHub上的hugo的网站了 ? 例外如果不太懂解析域名的可以参考如下资料: ? ?

2.3K20

如何快速给自己构建一个温馨的"家"——用Jekyll搭建静态博客

Markdown(或 Textile)、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...这里就需要自定义主题了。你可以选择自己开发一套,也可以直接选择已有的,然后自己再更改css布局形成自己的。jekyll主题在这里,你可以选择到你自己喜欢的主题。...三.使用Github Pages服务 1.创建我们自己的仓库 以下用usename代替自己的用户名 2.配置我们的仓库 Settings里面找到Github Pages 选择Launch automatic...这个IP是GitHub Pages 的可用 IP地址。 使用 Kloudsec 的好处 摆脱了证书不可信存在安全风险的不友好提示。 配置方便,一劳永逸。...访问速度并未受影响 小绿锁看着舒心 后来又发现了第三种方法能用HTTPS访问博客的方法: 使用 GitLab 提供的 Pages 服务,那它直接支持添加自定义域名的 SSL 证书,可以配合免费申请的 SSL

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

    我们的示例网页是使用 HTML5 编写的。后续如果你想更好地理解使用的主题和进行主题自定义,也需要这方面的知识。 CSS3。CSS3 是 CSS 的最新标准。它用于控制网页样式和布局。...GitHub Pages中写博客,通常就是使用Markdown。比如你正在阅读的这篇博客就是用 Markdown 编写的。...(原理上是 GitHub Pages 使用 Jekyll 将 Markdown 文件转换为HTML文件。Jekyll 还支持 Textile 文件,这里不做展开。) 阿里云。...阿里云提供域名注册、解析等服务。同类产品有腾讯云等。本教程涉及到自定义域名,可绑定自己拥有的域名来访问搭建的个人博客。使用域名阿里云注册,并使用阿里云的云解析服务。...库名即为访问域名本教程中,即为 hummerstudio.github.io 当你打开这个链接,显示的可能不是上面的代码对应的内容。因为我不能拿这个当作真正的主页嘛!

    1.3K20

    如何快速给自己构建一个温馨的家——用Jekyll搭建静态博客

    Markdown(或 Textile)、Liquid 和 HTML & CSS 构建可发布的静态网站。 博客支持。支持自定义地址、博客分类、页面、文章以及自定义的布局设计。...这里就需要自定义主题了。你可以选择自己开发一套,也可以直接选择已有的,然后自己再更改css布局形成自己的。jekyll主题在这里,你可以选择到你自己喜欢的主题。...下载下来,改改css,或者借用一下,就会有很漂亮的blog就出炉了。 三.使用Github Pages服务 1.创建我们自己的仓库 以下用usename代替自己的用户名 ? 2.配置我们的仓库 ?...这个IP是GitHub Pages 的可用 IP地址。 使用 Kloudsec 的好处 摆脱了证书不可信存在安全风险的不友好提示。 配置方便,一劳永逸。...访问速度并未受影响 小绿锁看着舒心 后来又发现了第三种方法能用HTTPS访问博客的方法: 使用 GitLab 提供的 Pages 服务,那它直接支持添加自定义域名的 SSL 证书,可以配合免费申请的 SSL

    1.3K20

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

    GitHub Pages Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管 Github 上,你可以选择使用 Github Pages 默认提供的域名...github.io 或者自定义域名来发布站点。...Github Pages 支持 自动利用 Jekyll 生成站点,也同样支持纯 HTML 文档,将你的 Jekyll 站点托管 Github Pages 上是一个不错的选择。...仓库空间不大于1G 每个月的流量超过100G 每小时更新超过 10 次 Github Pages 使用 Jekyll 来构建内容,那么 Jekyll 是什么呢?...自定义域名 虽然通过地址https://github_username.github.io可以正常访问博客,但是技术小伙伴们肯定有人想使用自己的域名访问博客,这样的需求 GitHub Pages 也是支持的

    1.4K10

    Hello Octopress

    上 以前个人博客是在位于http://username.github.com这个域名下,现在改成了http://username.github.io,所以大家可以看到两种不同域名下的博客。...另外,Github Pages分为两类,一类是个人或者组织的博客,另一类是项目的介绍博客,这里只介绍如果搭建介绍后者,但是两者基本上相同。...,网站只需要这个目录下的文件树 ├─ _deploy/ #deploy时候生成的缓存文件夹,和public目录一样 ├─ sass/ #css文件的源文件,过程中会compass成css ├─ plugins...另外,对于这里提到的升级问题,可以干脆直接删除data-title] 最有用的资料总能在这里找到:Octopress的官方文档 ③ 关于Jekyll Octopress是基于Jekyll的,所以对Jekyll...有一定的了解是很有必要的,Jekyll主页中记录了Jekyll的方方面面,最好是了解下Directory Structure,Configuration,Writing Posts,Creating Pages

    60620

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

    云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持 使用Jekyll搭建静态站点...Jekyll 也可以运行在 GitHub Page 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...如下图,点击新建环境,然后弹框中输入你自定义的环境名称,选择付费模式,然后点击下方的「立即开通」。 qcloud_jekyll_evn.png 之后就进入了环境的初始化阶段,初始化比较久。...「文件管理」页面可以对我们上传的内容进行调整,「设置」页面可以添加域名、错误页面等信息,同时也给出了腾讯云提供的默认域名。...如果你有自己的域名,你也可以添加自己的域名解析,例如下面我修改为使用我自己的域名,并设置了自定义的索引页和404页面: Zkyx39SOCYgHimv.png 访问静态页面 浏览器输入讯云提供的默认域名

    3.6K105

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

    GitHub Pages Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管 Github 上,你可以选择使用 Github Pages 默认提供的域名...github.io 或者自定义域名来发布站点。...Github Pages 支持 自动利用 Jekyll 生成站点,也同样支持纯 HTML 文档,将你的 Jekyll 站点托管 Github Pages 上是一个不错的选择。...仓库空间不大于1G 每个月的流量超过100G 每小时更新超过 10 次 Github Pages 使用 Jekyll 来构建内容,那么 Jekyll 是什么呢?...自定义域名 虽然通过地址https://github_username.github.io可以正常访问博客,但是技术小伙伴们肯定有人想使用自己的域名访问博客,这样的需求 GitHub Pages 也是支持的

    94830

    GitHub页面基本知识

    您可以使用Jekyll主题选择器在网上创建和发布GitHub页面。如果您喜欢本地工作,您可以使用GitHub桌面或命令行。...2016年6月15日之后创建并使用github.io域名GitHub Pages网站需要执行HTTPS 。...如果您在2016年6月15日之前创建了GitHub Pages网站,则可以手动启用HTTPS实施。使用自定义域名GitHub页面不支持HTTPS。...对于使用JekyllGitHub Pages网站,您的HTML文件很可能会存储_layouts文件夹中。一般来说,CSSHTML文件的一部分中找到的。...进一步阅读GitHub页面 请参阅“ 自定义GitHub页面 ”了解更多关于使用批准的Jekyll插件和GitHub Pages网站,创建自定义404页面以及查看可用存储库元数据的更多信息。

    1.5K30

    如何使用Jekyll+GitHub Pages搭建个人博客站点

    (二)Github Pages是什么 Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务,站点可以被免费托管 Github 上,你可以选择使用 Github Pages 默认提供的域名...github.io 或者自定义域名来发布站点。...(三)如何搭建使用 前提条件: git环境 github账户 ruby环境 ` jekyll底层是使用ruby编写对,所以安装时候需要先安装ruby环境: mac先要安装一些软件,这里假设你对git环境已经有了...jekyll-gist ` 上面对软件安装完毕后,你就可以github上搜索一个基于jekyll模版对项目,当然你可以从网上搜索任何你喜欢的主题风格,找到之后使用git clone到自己本地: git...至此,一个属于我们自己独立的个人站点就完成了,使用jekyll+github pages优缺点如下,借用阮一峰老师的总结: 优点: * 免费,无限流量。

    1.1K70

    为绑定域名GitHub Pages 启用 HTTPS

    Update 2018/05/01: GitHub 官方已经支持自定义域名启用 HTTPS 了,见 https://blog.github.com/2018-05-01-github-pages-custom-domains-https...恰逢知乎上有人邀我答题 Github Pages 绑定了个人域名,怎么使用 HTTPS 访问而证书不报错呢?。...缓存页面合并了 CSS 和 JS 文件,使用开发工具在线调试要找到样式源文件变困难了——可能看到全都在一个 CSS 文件里。...不过我大部分情况下都是用 Jekyll 本地调试好再上传,这点对我影响不大。 Update: 2016/6/16 现在貌似不会合并了。...:laughing: 其它做法 如果使用 GitLab 提供的 Pages 服务,那它直接支持添加自定义域名的 SSL 证书,可以配合免费申请的 SSL 证书一起使用

    2K20

    个人免费博客花式搭建指南

    按照规范化的文本内容标记编写,使用不同的 Markdown 语法翻译器和 CSS 样式,就可以带来丰富多彩的效果呈现。...这些网页在生成后,会被自动推送到 Netlify 的全球网络节点,并且会提供一个默认的 *.netlify.app 域名进行访问。这个默认的域名是可以完全自主定义的,只要与已有的域名冲突即可。...其实 Github 本身也是提供这样的服务的,可以使用 username.github.io 的域名进行访问。...当然,还有另外一个原因,Github 的原生支持静态生成器就是 Jekyll,这也意味着 Github 上部署 Jekyll 更加方便。   ...;当代码注释内容超过一行最好将注释放在代码的后一行,此时 # 号前不留空格; 使用图片进行解释的时候,在对应段落附近加载图片,并使用“下图”、“上图”这样的字眼进行描述; 图片可以使用 PPT 自行制作

    1.8K40

    为绑定域名GitHub Pages 启用 HTTPS

    Update 2018/05/01: GitHub 官方已经支持自定义域名启用 HTTPS 了,见 https://blog.github.com/2018-05-01-github-pages-custom-domains-https...恰逢知乎上有人邀我答题 Github Pages 绑定了个人域名,怎么使用 HTTPS 访问而证书不报错呢?。...缓存页面合并了 CSS 和 JS 文件,使用开发工具在线调试要找到样式源文件变困难了——可能看到全都在一个 CSS 文件里。...不过我大部分情况下都是用 Jekyll 本地调试好再上传,这点对我影响不大。 Update: 2016/6/16 现在貌似不会合并了。...其它做法 如果使用 GitLab 提供的 Pages 服务,那它直接支持添加自定义域名的 SSL 证书,可以配合免费申请的 SSL 证书一起使用。详情可见 零成本打造安全博客的简单办法。

    2.9K20

    基于JekyllGithub Pages搭建博客

    Jekyll 也可以运行在 GitHub Pages 上,也就是说,你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站,而且是完全免费的。...根据自己刚学到的知识,简单来说,GitHub Pages 可以被认为是用户编写的、托管 GitHub 上的静态网页,即可以当作一个小服务器使用。...而 Jekyll 是一个生成静态网页的工具, Github 上绑定自己的域名后可以当作个人博客访问。 那么接下来就开始用这两个工具搭建一个属于我们自己的博客吧。 1....我的博客选择的是 Github 上找的博客主题,它对目录中各个文件的内容、功能都有很详细地说明,适合我这样的小白学习使用 Jekyll 。...本地博客文件的根目录里打开命令行,使用命令rougify style github > css/syntax.css生成一个 github 风格的样式到css/syntax.css文件中。

    1.1K10

    《DDIA 逐章精读》小册

    GitHub Pages 使用 Jekyll[4] 渲染,但只支持寥寥几个免配置的主题,怎么说呢,就都挺丑的。...Docsify Docsify 一个文档向的静态网页生成工具,配合 GitHub Pages 使用,体验绝佳。...自定义域名 首先,你要有个域名。然后需要两个步骤: GitHub 仓库中 Settings > Pages > Custom domain,配置一个你喜欢的二级域名,当然顶级的也行。...例如:ddia.qtmuniao.com 在你的域名服务提供商的 DNS 解析页面里,添加一个 CNAME 记录,指向你的 github 个人或者组织名字即可,不需要指向具体仓库, GitHub Pages...例如: CNAME ddia distsyscorp.github.io. 1 小时 最后可以 Settings > Pages 中勾选下 Enforce HTTPS,使用 https 加密访问更佳

    82520

    新人如何搭建(copy)一个属于自己的博客

    我们的准备如下 拥有一个自己的域名 拥有Git基础知识(不懂没关系,跟着大伙走,学会Github即可) 拥有一个GitHub账号 一款心仪的jekyll模板 html & css(选择器是基本技能)...然后搜索一个你喜欢的域名,查询下是否以被注册,域名的话建议使用英文,如果我们要往下走,必须选择英文域名,此处为了做教程,我选了个很霸气的域名(反面教材) ?...域名到这里就先暂告一段落,后面将会用到操作中的-解析 # GitHub 学前端的怎能不会使用git呢,GitHub作为全球最大的代码托管(同性交流)平台,大牛发声,无数码农尽折腰 ? ? ?...,可点击黑箭头处,如果你是新人,建议这么做 ?.../editorial-jekyll-theme/assets/cssmain.css 这里需要说明下github实现页面的原理,当我们开启github pages的时候,我们域名所访问的是对应其自己

    48920

    Hexo系列(4) - NexT主题踩坑记录

    于是解决方式1对我来说就不存在了,接着联想到之前我对部署GitHub Pages上的个人站点进行了自定义域名绑定+域名解析设置,有些豁然开朗的感觉。...由于我的个人站点是同时部署到GitHub Pages和Coding Pages上的,接着阿里云域名解析里进行了配置:默认的解析线路将我的域名指向pages.coding.me,国外的解析路线则是指向了...你需要给这些文件指定正确的路径,万能的配置方式如下: 1 2 3 4 neat_css: enable: true exclude: - '**/*.min.css' 压缩html不要跳过...code.jpg 接下来重新运行 hexo g 和 hexo s,本地调试成功~ CNAME文件每次部署后就没了 一般我们会将Hexo博客搭建到Github上,如果在Github上为其配置一个自定义域名...首先我使用的是Hexo的next主题,而根据GitHub Pages的报错信息来看,是说source/high/index.md里使用到了一个不认识的cq标签。

    1.7K30

    Jekyll 文章侧边索引导航

    缺点在于 Github Pages 不支持这类自定义插件,你可能需要使用自定义的 workflow.yml 文件来指导 Github Action 来编译生成静态文件。...如果不怎么了解 Github Action,恐怕这种方式部署 Github Pages 上也不是很省心。...具体 post 模板页使用 toc 模块的代码如最后所示。 自适应   为了实现目标二,这里采用了最简单的 CSS 媒体查询,即在平常 PC 端宽屏采用如下 common.sass 中的样式。...没有 sass 编译环境下,此处的 sass 代码可以取出转换为 css 使用。 最终代码 <!...自动生成目录的几种方案 Runoob - CSS Position 定位 position:sticky 粘性定位的几种巧妙应用 css3 sticky生效怎么办 版权声明:如无特别声明,本文版权归

    1.6K30

    新人如何搭建(copy)一个属于自己的博客

    我们的准备如下: 拥有一个自己的域名 拥有Git基础知识(不懂没关系,跟着大伙走,学会Github即可) 拥有一个GitHub账号 一款心仪的jekyll模板 html & css(选择器是基本技能)...然后搜索一个你喜欢的域名,查询下是否以被注册,域名的话建议使用英文,如果我们要往下走,必须选择英文域名,此处为了做教程,我选了个很霸气的域名(反面教材)。 ?...域名到这里就先暂告一段落,后面将会用到操作中的-解析。 # GitHub 学前端的怎能不会使用git呢,GitHub作为全球最大的代码托管(同性交流)平台,大牛发声,无数码农尽折腰! ?...,可点击黑箭头处,如果你是新人,建议这么做 ?.../assets/cssmain.css 这里需要说明下github实现页面的原理,当我们开启github pages的时候,我们域名所访问的是对应其自己github下,博客仓库内根目录的index.html

    1K40
    领券