Post on: Jul 19, 2023Last edited: Sep 13, 2024Words 10098Read Time 26 min

type
status
slug
tags
category
icon
password
summary
 

GitHub Pages使用Jekyll制作网站

 
  • GitHub Pages 使用Jekyll来处理幕后所有文件。Jekyll 可以将您的博客文章文件转换为可以在浏览器中查看的格式良好的 HTML。
  • 博客文章文件应始终使用以下格式命名:yyyy-mm-dd-your-blog-post-name.md
  • 一篇写于 2022 年 4 月 24 日的帖子将被命名为2022-04-24-my-blog-post.md. 请注意不要使用未来的日期,因为该帖子不会显示。
  • 文章内容是用Markdown语言写的,请参阅GitHub Markdown{:target="_blank“} 以了解一些基础知识。还可以看Markdown官方教程{:target=”_blank"} 来学习Markdown语法。
 

建一个网站的几个方式 Building a website

 
2、wordpress.org(还要另外购买主机)虽然Wordpress在市场上的竞争越来越激烈(例如,诸如Wix、Squarespace和Shopify等平台提供了更易于使用的构建工具),但Wordpress在建立功能丰富和高度定制的网站方面依然是一种强有力的选择。
4、Gatsby + MDX
5、GitHub Pages 和 Jekyll

什么是GitHub Pages?

GitHub Pages 是一个静态网站寄主服务,换言之就是一个静态网页托管的服务。 在使用GitHub Pages时,有以下限制:
  • GitHub Pages 源码仓库限制在1GB大小
  • 发布GibHub Pages 网站最好不要超过1GB
  • GitHub Pages网站有流量限制(每月100GB或者100,000次请求)
  • GitHub Page 网站每个小时限制10次重建
  • 不支持如.htaccess之类的密码验证功能,亦即不能针对gh-pages的页面设定密码保护。
  • 所有的gh-pages内的页面都是公开的,表示所有的人都可存取到相关的页面。 必须bundle exec jekyll build从主分支运行,然后切换到gh-pages分支推送最新的_site,可能会很乏味。幸运的是,有一个解决方案可以让我们自动化这个过程。我们可以使用GitHub Actions,这是一项允许您根据存储库中发生的某些事件自动化工作流程的功能。例如,我们可以创建一个工作流,在我们的项目中使用相同版本的 Jekyll 和其他 gem 自动构建站点,并在每次推送到main分支时部署它。它还可以自动创建gh-pages分支。

静态博客对比

CloudFlare Pages, Netlify, Vercel, Github Pages, and Gitlab Pages
Excluded AWS Amplify as they are “free for a year”. That is a while but it will cost you something every month after that year.
子域名cloudflare的pages.dev、vercel在国内访问全部被污染,被 reset。vercel注册要绑定手机号,不支持google voice 子域名netlify国内打不开,翻墙可以直接打开 pages.dev绑定域名后才可以打开,翻墙可以直接打开
根据编程工具公司JetBrains的数据,有77%的开发人员使用GitHub,而使用GitLab的为40%,使用BitBucket的为25%。
  • GitLab可以创建私人的免费仓库。要发布带有页面的网站,可以使用任何静态站点生成器(SSG),例如Jekyll、Hugo、Middleman、Harp、Hexo和Brunch等等。您还可以发布任何直接用普通HTML、CSS和JavaScript、shell脚本文件编写的网站。不支持动态的服务器端处理的网站信息,比如.php和.asp
  • GitHub Pages 免费版本:尚可,并不很慢。 自定义域名:一个。 限制: 单个文件大于50MB将受到警告。 单个文件大于100MB无法上传。 仓库大小「强烈建议」少于5GB。 每小时可构建10次。 每月流量100GB。
  • Cloudflare Pages免费版本 部署方式:GitHub仓库。 速度:与GitHub Pages相似。 自定义域名:最多10个; 限制: 每月构可构建500次。 文件数量最多2w个。 单个文件大小不得超过25MB。 详情可见:
  • Netlify免费版本。 部署方式:GitHub、GitLab、BitBucket仓库自动拉取以及本地CLI直接推送。 速度:较GitHub Pages要快,但是稳定性差上不少,部分时候可能直接出现无法访问。 自定义域名:多个。 限制: 对于每个账户: 同时只能构建一个站点。 每月流量100GB。 每月构建时间300分钟。 支持 Golang, JavaScript/Node.js, and Typescript. 详情可见:
  • Vercel免费版本:与Netlify相同。速度:在所有方案中最快且最稳定。 自定义域名:多个。 限制: 每日可构建100次,但每小时不超过32次。 单个Git仓库支持连接3个Vercel项目。 每次构建时长最多45min。每月总计不超过100h。

什么是Jekyll?

notion image
Jekyll 是用 Ruby 编写的,可以将您的纯文本转换为静态网站和博客。 由于 Jekyll 是由GitHub的联合创始人Tom Preston-Werner构建的,因此 Jekyll 与GitHub Pages配合得非常好。
简单地说,Jekyll是一个用ruby写的解析引擎,用于从动态的组件中生成静态的网站。 Jekyll 是迄今为止最受欢迎的静态生成器,因为它由 GitHub 构建和支持,并用于流行的服务 GitHub Pages,免费用于托管个人或项目网站的静态页面。 Jekyll 拥有其他静态生成器中最大的社区,提供了大量优秀的教程、开源主题和插件。 它被视为 WordPress 在静态世界中的竞争者,许多博主已经将他们的博客从 WordPress 迁移到 Jekyll。 Jekyll 是一个静态站点生成器,内置 GitHub Pages 支持和简化的构建过程。 Jekyll 使用 Markdown 和 HTML 文件,并根据您选择的布局创建完整静态网站。 Jekyll 支持 Markdown 和 Lick,这是一种可在网站上加载动态内容的模板语言。 在 StackOverflow 中,Jekyll 的相关Q&a比 Hugo 和 Hexo 都多

开始用GitHub Pages制作Jekyll静态网站

新的流行方法,使用模板仓库

访问模板仓库,点击此仓库右侧的 Use this template,仓库名字命名为:***.github.io 如果模板默认内置了vssue的评论组件,也是基于github的issue作为评论的存储数据。参考官方文档创建一个GitHub OAuth App进行配置
注:在存储库名称下,单击 “设置”。勾选“模板存储库”可以将当前库设置成模板仓库
feed不用本地主题,远程主题能使用,remote_theme意味着不必fork主题, 只要RubyGems.org网站有,即可用remote_theme,只提取layouts, includes, CSS文件。

【安装】Ruby开发环境和Jekyll

Jekyll是由Ruby脚本语言编写的,所以在运行jekyll之前,需要先安装Ruby运行环境。(推荐使用 Windows 子系统 for Linux安装Ruby:sudo apt install ruby-full。)
  • 默认运行:ridk install ,询问您要安装哪些组件,选择3.自动下载安装msys2和mingw (必需的开发工具)
  • 打开cmd命令窗口,执行gem install jekyll bundler安装jekyll和bundler(等一会,国内访问可能比较慢)
  • 查看是否正确安装了jekyll:jekyll -v (重新打开vs code)
  • 查看是否正确安装了bundler:bundler -v
    • (查看ruby的版本:ruby -v)
    • (查看安装的RubyGems:gem list )
      • jekyll 更新到最新版本:gem update jekyll(gem install jekyll -v x.x.x )
      • 更新Bundler:gem update bundler
      • 更新所有gem:gem update
      • 更新gem自己的版本:gem update --system 3.4.8
        • gem update --system 3.4.12
  • 文件夹目录下建网站:jekyll new myblog ,到文件目录下:cd myblog (建文件夹:mkdir myblog,为当前文件夹建站:jekyll new . )
  • 如果是网上拷贝的主题模板,运行:bundle
  • 安装主题:gem install just-the-docs
  • 将主题添加到Jekyll站点。Gemfile文件:gem “just-the-docs”,_config.yml文件:theme: just-the-docs
    • 更新主题:bundle update just-the-docs (Any new files or updates the theme developer has made (such as to stylesheets or includes) will be pulled into your project automatically.
  • 全部更新:bundle update
绕过Gemfile用jekyll serve ,使用Gemfile运行用bundle exec jekyll serve。如果出现bundle exec jekyll serve能启动,而jekyll serve不能启动,则删除Gemfile和Gemfile.lock重新运行jekyll serve即可。 如果端口被占用 bundle exec jekyll server –port 5000 (本地hello world的html运行 jekyll serve)
注意:内链目录的文件夹区分大小写,以/开头
_config.yml 修改后要关闭程序重新运行 jekyll serve
 
 

Jekyll插件plugins有哪些?

要安装 Jekyll插件,需要在两个地方添加插件名称。一个在_config.yml文件的plugins部分,第二个在Gemfile文件 jekyll-titles-from-headings

使用CSS属性自定义网站

我们只在我们极其简单的网页上使用了几个 CSS 属性,但有很多。这个来自 MDN 网络文档的 CSS 参考包含每个标准 CSS 属性的列表。如果我想知道如何做某事,我通常只是谷歌“css”和我想做的事情。例如,尝试在搜索引擎上搜索“css change font family”来了解如何更改您网站上的文本字体。 说到字体,一个很好的网站字体资源是Google Fonts。有许多免费字体可供您轻松参考并应用于您的网站。 正如我之前提到的,您可以使用Google 颜色选择器来选择网页颜色并找到它们的十六进制十进制代码。 通过引用其他人编写的代码库,我们可以轻松地应用他们的样式和布局。一个流行的框架是Bootstrap。本网站使用 Bootstrap 创建响应式布局或可根据窗口大小变化的布局。这很重要,因为您的网站需要在不同的屏幕尺寸和设备上看起来不错。最后,我建议您熟悉使用Chrome DevTools来测试您的网页并排除故障。您是否曾经在使用 Chrome 时右键单击并单击“检查”?这将打开 DevTools 窗口,您可以在其中编辑页面上的元素并实时查看更改,而无需实际编辑文件。

上传,GitHub Pages托管网站

方法一、使用GitHub desktop完成
有许多图形git软件,如GitHub Desktop,不必再辛苦地利用git指令来执行。
方法三、使用代码完成Git
以仓库的远程地址(可以在GitHub desktop看到)
来取得GitHub档案库内的档案。成功执行后,在本地端会产生一个名称为「pagedemo」的工作目录。 接着,在此工作目录内执行「git branch gh-pages」指令,新建一个名称为「gh-pages」的分支。在建立分支成功后,以「git checkout gh-pages」指令切换到gh-pages分支上。在切换过后,即可在工作目录内简单地新增一个网页档(以index.html为档名)。
接着,执行「git add .」指令将此档案储存到暂存区,并利用「git commit -m “test page”」指令(其中-m参数为本次提交的说明文字)提交到本地端的档案库上。
最后,使用「git push origin gh-pages」指令将本地端档案库内的档案上传至GitHub网站上。在上传的过程中,会要求输入GitHub上所注册的帐号及密码内执行「git branch gh-pages」指令,新建一个名称为「gh-pages」的分支。

深入Jekyll主题

改造自己的主题
  • 加入html、css、js等需要的文件
  • 提取相同的内容到_includes目录
  • 需要复用的页面框架,比如post文章页,放到_layouts目录
  • 一些配置字符串,放在_config.yml文件内
  • 使用Liquid语法在页面中访问site,page等信息组织内容
  • 调整html页面标签的css定制自己的Markdown样式
  • 调整语法高亮的css定制自己的语法高亮颜色值
  • 你可能需要一个MarkdownDemo来测试站点的样式

Jekyll模板的结构

下面是用tree命令输出的目录结构(cmd,输入tree即可)

简化Jekyll模板

/assets 文件要保留:SCSS、图像、网络字体。.git 文件夹要保留 简化当前模板后得到结构:
要安装 Jekyll插件,需要在两个地方添加插件名称。一个在_config.yml文件的plugins部分,第二个在Gemfile文件

_includes目录详解

该目录下的片段是“被包含”的关系,可以是任何格式的文件,片段也可以include片段。 include的语法:{% raw %} {% include head.html %} {% endraw %}
注意:default.html里访问index.html生成的内容是直接访问content,而不是page.content或post.content,这两者的关系大概是前者才是经过处理后的html片段,而后者是原始的文本,包含未解析的liquid语法。

_config.yml文件详解

Jekyll站点的配置文件,可以存储数据,用于配置Jekyll的插件和运行环境

什么是Gems?Gems详解

Gems 是可以包含在 Ruby 项目中的代码。Gems 封装了特定的功能。您可以跨多个项目或与其他人共享 gem。 Gems 可以执行以下操作:
  • 将 Ruby 对象转换为 JSON
  • 分页
  • 与 GitHub 等 API 交互 Jekyll is a gem。许多 Jekyll插件也是 gem,包括 jekyll-feed、 jekyll-seo-tag和 jekyll-archives。 e.g. ~> 2.3 means "equal to 2.3 or greater than 2.3 jekyll也是一个gem,4.3.1 - October 26, 2022 (125 KB) bundler也是一个gem,2.3.26 - November 17, 2022 (402 KB) Bootstrap也是一个gem,5.2.2 - October 15, 2022 (160 KB)

Gemsfile里frozen_string_literal: true代码

Ruby 中冻结的对象只会创建一次,以后遇到相同的对象会复用之前创建的对象,这样可以减少对象创建次数和垃圾回收次数。Ruby 中的符号、整数、浮点数默认都是冻结的,字符串字面量目前还不是。 为了提高程序性能,在 Ruby 3 中,字符串字面量在所有文件中默认被冻结。 为了过渡,Ruby2.3 增加了一个魔法注释: frozen_string_literal: true

Gemfile和Gemfile.lock文件详解

为什么有了 Gemfile 文件还需要一个 Gemfile.lock 文件,我知道是为了在多种场合下保持 gem 版本一致,比如在开发和部署时,或者你有多台不同的开发机器,或者项目有多人开发。但是它到底是如何保持的,一直比较迷惑。下面简要记录一下: 首先,Gemfile 文件所列的 gem 只是项目依赖的一部分,gem 本身也有自己的依赖,不同的 gem 本身可能依赖了某一 gem 不同的版本,如何让这么多不同版本的依赖相安无事,不发生冲突,这就是 bundle 的发挥作用的时候了。bundle 不仅用来安装 gem,更重要的是还负责计算出不同 gem 的依赖版本,最终生成 Gemfile.lock 文件,该文件记录了确切的 gem 名称和版本号,以及他们所依赖的 gem 的名称和版本号。 第一次运行 bundle install 时自动生成 Gemfile.lock 文件。 以后每次运行 bundle install 时,如果 Gemfile 中的条目不变 bundle 就不会再次计算 gem 依赖版本号,直接根据 Gemfile.lock 检查和安装 gem。 如果出现依赖冲突时可以通过 bundle update 更新 Gemfile.lock。
bundle exec jekyll serve- 运行您的 Gemfile/Gemfile.lock 中指定的确切 jekyll 服务器版本。 jekyll serve- 运行某些版本的 jekyll 服务器

Gemfile里面的gemspec代码

gemspec 定义了 gem 中的内容、制作者以及 gem 的版本。它也是您访问 RubyGems.org 的界面。您在 gem 页面上看到的所有信息(例如jekyll的)都来自 gemspec。 创建页面 方式一 | 某路径下添加xxx.html,访问地址为该路径/xxx.html 方式二 | 某路径下添加xxx/index.html,访问地址为该路径/xxx,无需后缀

front matter(Yaml头信息)

每个页面都可以有自己的头信息,可以覆盖Jekyll和_config.yml里面的值

Site变量

来自_config.yml配置文件和Jekyll内置变量,下面是常用的属性:
  • site.posts 从新到旧排序的 posts 文章列表集合
  • site.categories 以目录分类的文章列表 Map{cate1:[post1, post2], cate2:[post3, post4]}
  • site.tags 以 tags 分类的文章列表 Map{tag1:[post1, post2], tag2:[post3, post4]}
  • site.XXX _config.yml配置文件中XXX: val的 val 值,val 可以是字符串/数组/集合

page变量

指代当前页面的变量,在index.html里使用page,page指的就是index.html这个页面,常用属性:
  • page.content 页面源码(含有 markdown/liquid 等语句)
  • page.title 页面标题
  • page.excerpt 页面摘要源码,可通过_config.yml 配置摘要算法
  • page.url 页面的相对路径
  • page.date 页面的时间和日期
  • page.categories 页面的 categories 数组,linux/ruby/_posts/ruby.md文章会把 linux 和 ruby 加入 - categories,和上面的 site.categories 不同!
  • page.tags 页面的 tags 数组
  • page.path 页面的实际路径(源码路径)
注意:当前页面的 Front Matter 中设置的 xxx: val 可以通过 page.xxx 访问 val 值 另外:site.posts 数组的元素 post 和 page 具有几乎一样的属性

liquid语法

Jekyll内变量操作是使用Liquid语法
主要有:
1、显示变量的值 {{ 变量名 }}
如果要组成字符串,可以这样:“字符串头部{{ 变量名 }}字符串尾部”
也可以使用 Filter:{{ “字符串头部” | append : 变量名 | append : “字符串尾部” }}
如,显示文章的标题:{{ page.title }}
2、使用变量的值进行计算 文章的标题计算 {% assign titleAndDate = page.title | append: page.date %}
assign x = y是声明一个变量并赋值,声明必须赋值!
xxx | append: “str”是 Liquid 语法中的 Filter,可以理解为管道,也可以简单理解为对象|方法:参数
Filter 可以连续执行:xxx | append: “str1” | append: “str2”
3、if 语句
4、for 语句
5、访问 map 的 key 和 value 像site.categories其实是一个 map,访问分类是 linux 的文章集合有两种方式:

Bundler详解

Bundler使用Ruby语言写的,通过跟踪和安装运行Ruby项目所需要的确切的gem和版本,为Ruby项目提供了完整的可运行环境。 Bundler跳出了复杂的环境依赖,并且确保下载你在development, staging, and productionBundler这三个阶段所需要的gem源。开始一个项目的工作只需要一个简单的命令:bundle install Bundler是一种有用的工具,它能使你更方便地跟踪某个应用程序所依赖的gem(以及这些gem的版本)。它通过安装应用程序的Gemfile中的所有gem来做到这一点。
卸载Bundler目前的版本 gem uninstall bundler 安装Bundler gem install bundler

Bootstrap详解

一个用于快速开发 Web 应用程序和网站的前端框架 基于html和JavaScript、css三者开发的框架,主要用于响应式网站上的结构和布局,Bootstrap的出现主要是简化Web工作者的工作,其中还包括对JavaScript中的动态调整。 只需要写HTML标签调用它的类你就可以很快速的做一个高大上的网页,你不用担心兼容问题,提供了很多样式供你选择!
使用bootstrap框架可以响应式网站,bootstrap能使用适用pc和手机等不同分辨率的设备,我们不需要根据设备的不同而去担心显示效果。目前所有的浏览器都支持Bootstrap,所以我们在做网站的时候,也不要考虑浏览器的兼容问题。

Q&A 常见问题

UTF-8格式、Repository仓库、

比较常见的可能导致编译出错的问题

.yml 文件里有语法错误
.md 文件里有无意识引入的 Liquid 语法标记
有时候github action服务器出错,修改.md 文件多试几次
如果你希望 Jekyll 在帖子准备好发布之前忽略它:published: false

插件:显示修改日期

{{ page.last_modified_at | date: '%Y-%m-%d' }}
2023-03-19

目录 (toc )table of contents

常用 Windows CMD 命令

dir 则显示所有文件 (使用方法可以用 help dir 来查看。相当于linux系统下的命令 ls ) mkdir [-p] dirName mkdir -p runoob2/test 若 runoob2 目录原本不存在,则建立一个。 mkdir [-p] dirName 创建文件夹(命令 -p 确保目录名称存在,不存在的就建一个。 mkdir -p runoob2/test 若 runoob2 目录原本不存在,则建立一个。 cd d: 到D盘 cd Downloads 到D盘下的Downloads文件夹 cd .. 返回上一级目录 cls 清屏
Windows PowerShell 启动Python输入:py 退出Python输入:Ctrl + Z,可以使用exit() 或者quit()
查看Git的版本号,打开终端—输入命令git –version

gh-pages分支什么作用

通过git-add -A、git -commit -m “…” 命令把完成的项目上传到GitHub上以后,默认的是处于master分支,这个主要用来展示项目,然后新建gh-pages分支:git push origin gh-pages,展示.GitHub.io网站。

webrick是什么

jekyll启动时出现的问题 bundle add webrick,添加完这段代码终于可以运行了!webrick是用Ruby写的 web server,这是因为 webrick 不再是 Ruby 3.0 中的捆绑 gem,我们需要手动添加 webrick 到 Gemfile 中作为依赖。

如何创建一个新的文章

  1. 导航到GitHub 上的 _posts 上的文件夹
  1. 点击 Add file > Create new file
  1. 命名文件 {{ site.time | date: ‘%Y-%m-%d’ }}-your-new-blog-post.md
  1. 使用 Markdown 语法设置博客文章的标题。(第一行: ## 这是标题)
  1. 单击该 Preview 选项卡,您可以预览文章。写好后提交保存即可!

隐藏仓库并使用 GitHub Pages?

GitHub Pro, 一个月 4 美元, 支持私有仓库 GitHub Pages充钱,或者使用组织账户。 cdn+对象存储
  1. 源码放在私有仓库里,action 编译好 push 到.GitHub.io 的仓库
  1. 选择 gitlab, 或者 cloudflare page 私有仓库部署到 cloudflare pages 、Vercel,都有免费额度,相对来说 Vercel 的访问速度还是不错的
可以写个 Action 从私有仓库拉代码 build 然后 push 到 Pages 分支 某些人最担心的是, 通过使用GitHub上的免费公共存储库, 想要分叉或下载它的任何人都可以使用你的网站和源代码。因此, 我认为这里的关注点放错了地方。
静态内容不是源代码, 因为它在被提供给用户之前没有经过编译或作为脚本处理。如果用户运行指向你网站的网络爬网程序, 则他们将获得与该网站完全相同的静态副本。虽然将代码托管在GitHub存储库中无疑可以使你更轻松地下载网站的副本, 但它不会暴露尚未公开的任何内容。

插入gjf 不要自动播放

{:data-gifffer=“/img/****.gif”}

Jekyll Sitemaps生成器插件

Jekyll插件可为您的Jekyll网站静默生成与sitemaps.org兼容的站点地图
将gem’jekyll gem ’jekyll-sitemap’添加到您站点的Gemfile并运行bundle 将以下内容添加到您网站的_config.yml : url : “https://example.com” # the base hostname & protocol for your site plugins : - jekyll-sitemap :light_bulb: 如果您使用的Jekyll版本低于3.5.0,请使用gems键而不是plugin

GitHub换行符的问题

git如何避免”warning: the endings will be changed form LF to CRLF“提示?
假如你正在Windows上写程序,又或者你正在和其他人合作,他们在Windows上编程,而你却在其他系统上,在这些情况下,你可能会遇到行尾 结束符问题。 这是因为Windows使用回车和换行两个字符来结束一行,而Mac和Linux只使用换行一个字符。 虽然这是小问题,但它会极大地扰乱跨平台协作。Git可以在你提交时自动地把行结束符CRLF转换成LF,而在签出代码时把LF转换成CRLF。用core.autocrlf来打开此项功能, 如果是在Windows系统上,把它设置成true,这样当签出代码时,LF会被转换成CRLF:
Uinx/Linux采用换行符LF表示下一行(LF:LineFeed,中文意思是换行); Dos和Windows采用回车+换行CRLF表示下一行(CRLF:CarriageReturn LineFeed,中文意思是回车换行); Mac OS采用回车CR表示下一行(CR:CarriageReturn,中文意思是回车)。
CR为回车符,LF为换行符。Windows结束一行用CRLF,Mac和Linux用LF。 core.autocrlf false表示取消自动转换功能。适合纯Windows true表示提交代码时把CRLF转换成LF,签出时LF转换成CRLF。适合多平台协作 input表示提交时把CRLF转换成LF,检出时不转换。适合纯Linux或Mac
在Git中,可以通过以下命令来显示当前Git中采取哪种对待换行符的方式
$ git config core.autocrlf 此命令会有三个输出,“true”,“false”或者“input”
为true时,Git会将要提交的文件视为文本文件,将行尾(line endings)的CRLF转换为LF,而检出时会再将文件的LF格式转为CRLF格式 为false时,行尾不做任何改变,文件换行符保持其原来的格式 为input时,Git会将要提交文件行尾的CRLF转换为LF,而检出时不做处理
warning级别的警告都是可以忽略的,这个警告也是。 如果你是一个强迫症,非要去掉所有warning,也是可以。如果你可以保证你的代码不会跨平台开发,(比如你和你的合作者用不同的系统进行开发时,关掉这个自动转换的功能可能会导致代码显示异常),你可以设置关掉自动转换的功能。 当然,结合实际情况来说,你不能保证你的所有代码都不会跨平台开发,因为你不能保证你的合作者用的是跟你一样的系统,这个时候,最好就是只针对当前仓库设置,你只要保证当前仓库的代码不会跨平台开发就行。 就我现在来说,比较建议忽略这个警告。

Git Guides 常见的git指令用法 git命令

notion image

GitHub Desktop报错Author identity unknown,提交出现错误

答:到git里面切换一下邮箱,点击软件Options——Git,确认用户名邮箱正确,点击OK即可

绑定GitHub上的个人博客到Godaddy域名

GitHub已与Let’s Encrypt合作,为GitHub Pages自定义域名提供官方的HTTPS 支持。首先在Godaddy域名解析提供商网站修改DNS,然后修改GitHub项目Custom domain。
  • www域名:xxx.GitHub.io → www.yyy.com and yyy.com
    • CNAME:name写www(或@,@表示空),记录值写xxx.GitHub.io,用不用www都能访问。(www是最稳定的自定义域类型,因为www不受GitHub服务器IP地址更改的影响。CNAME记录的_domainconnect不用管,是GoDaddy’s implementation of the Domain Connect standard。)
    • A记录:name写@,记录值Data写185.199.108.153,(使用A记录,IP地址会更改导致解析不正确,GoDaddy的A记录的值默认为“Parked”)
    • 网站的GitHub项目上,设置Settings,Pages,Custom domain,填入域名www.xxx.com,并保存。
  • 自定义域名:xxx.GitHub.io/web → web.yyy.com
    • CNAME:name写web(主机记录也可以是二级域名news或blog),记录值写xxx.GitHub.io
    • A记录:name写@,记录值Data写185.199.108.153
    • Custom domain填入域名web.xxx.com保存。
其他方法:修改GitHub项目的根目录CNAME文件,自定义域和GitHub页面故障排除

GitHub page 套上 Cloudflare

我有一个秘诀, 可以为客户节省大量资金, 保持他们的网站安全, 并具有内置备份。秘诀:我将他们的网站设为静态。然后, 我使用GitHub存储和托管它, 并使用Cloudflare通过HTTPS提供服务, 并使其变得更快。先在cloudflare上添加域名,然后在域名服务商修改域名的name servers,这样可以免费使用cloudflare的域名解析了,cloudflare接管了域名的cname和A记录。
Cloudflare Pages比免费版的GitHub Pages多的功能:全球CDN、DDOS防护、集成WebAnalytics
一个GitHub账户只能绑定一个域名,aaa.github.io项目到bbb.com(),此后,项目ccc生成的pages会变成bbb.com/ccc(可以修改为blog.bbb.com)。 托管一个 GitHub pages 的github.io项目到 Cloudflare
想要给 GitHub page 套上 Cloudflare 我们需要两样东西,一样是个人域名,一样是 Cloudflare 账号。 Cloudflare 是基于反向代理的 CDN,也就是说用户在访问套有 Cloudflare 的网站时访问的并不是网站真实所在的服务器,而是一台反向代理服务器,代理服务器将请求转发给真正的服务器,然后将相应返回给用户,这样就可以达到隐藏服务器真实 ip 地址的目的,更重要的是可以防止来自网络上的攻击,这也正是 Cloudflare 这家公司的目的。并且使用 Cloudflare 的 CDN 是免费的 Cloudflare缓存你的网站, 并通过地理位置临近的服务器将其提供给用户, 从而使你的网站速度更快。这样做还有一个好处, 那就是使你不受GitHub的100GB带宽限制, 因为即使你的网站变得异常流行, 大多数请求也会进入缓存, 而永远不会到达服务器。 最重要的是, Cloudflare提供了一项称为”通用SSL”的服务, 该服务会向其CA合作伙伴颁发免费的SSL证书, 因此你可以永久免费获得HTTPS。
状态 Proxied 表示经过 Cloudflare 代理访问以达到 CDN 加速和伪装 ip 的功能, HTTPS 加密。 状态 DNS only 表示只提供 DNS 解析的功能,只有不安全的 HTTP 通信 DNS only - reserved IP (reserved IP 就是局域网 ip 的意思)
GitHub page文件不要超过25M,Cloudflare Pages限制 26.2 MB,免费的 Cloudflare Pages 账户每月最多只能构建 500 次,对于个人博客或小网站来说已经足够。

使用A记录和CNAME哪个好?

CNAME有一个好处就是稳定,就好像一个IP与一个域名的区别。服务商从方便维护的角度,一般也建议用户使用CNAME记录绑定域名的。如果主机使用了双线IP,显然使用CNAME也要方便一些。 A记录也有一些好处,例如可以在输入域名时不用输入WWW.来访问网站哦!从SEO优化角度来看,一些搜索引擎如alex或一些搜索查询工具网站等等则默认是自动去掉WWW.来辨别网站,CNAME记录是必须有。如:WWW(别名)前缀的域名,有时候会遇到这样的麻烦,前缀去掉了默认网站无法访问。
 

网站常见功能

国际化 (i18n) • 夜晚模式 • 二级导航菜单 • 文章目录 Table of contents • 文章阅读进度条 • 文章置顶 • 代码高亮 • 标签云 • 评论系统 (Gitalk) • 搜索系统 • 数学公式支持 (KaTex) • Nest 特效。文章置顶(文章排序)
 

参考文档

 
 
几个Jekyll主题(Ruby),主题gems
Jekyll:just the docs⭐5.6k、beautiful-jekyll⭐4.6k 2020年更新 免费版有广告、mmistakes 2022年7月8日 、chirpy⭐3.7k、freelancer-theme⭐1.3k、bulma-clean-theme⭐300 built with Bulma、documentation-theme-jekyll⭐1.1k、 feeling-responsive⭐790 、minima⭐2.9k、moonwalk⭐230、minimal-mistakes-jekyll⭐10.8k(搜索技术提供algolia)、jekyll-theme-yatjekyll-serif-themejekyll-theme-chirpy⭐3.7k、jekyll-theme-minimal⭐1.1k、chulapa
 
 
end
 
 
 

Loading...
本地环境配置 node npm yarn python

本地环境配置 node npm yarn python