本文主要讲的是GitHub、Gitee这样的代码存储网站上提供的个人博客建站的原理分析,需要注意的是,本文并不介绍GitHub、Gitee上建立个人blog的操作步骤,本文只介绍原理,不介绍实操步骤。

在交代本文主要内容之前需要说明几个概念,那就是动态网站、静态网站的区别,在这两个概念之上我又提出一个名词,那就是伪动态网站

静态网站,就是网站服务器只提供静态数据服务,说直白些就是Nginx服务器上只提供html的解析,不负责动态交互数据的存储、检索、展示等功能,更直白的说就是静态网站是没有数据库的网站。

动态网站,与静态网站最大的不同就是提供数据库服务,比如动态网站可以支持blog的用户注册,用户或游客的blog评价,blog的访问量计数等等功能,而这些功能的提供最主要的原因就是有数据库在做支撑,并且动态网站往往在服务器Nginx的后端运行着asp.net、php、python、JavaScript、C++这样的语言编写的动态网页解析服务,这样的网络服务器服务(asp.net、php等等)可以动态的从数据库中取出数据,然后和已有的html文件内容生产新的html文件内容发送给客户端的浏览器,而这个过程就是所谓的“动态”。

简单理解,静态服务器就是Nginx服务器程序+html文件所组成;动态服务器就是Nginx服务器程序+html文件+php这样的动态服务器程序+数据库,所组成。

然后说下我所提出的伪动态网站,其组成为Nginx服务器程序+html文件所组成+数据库;可以看到,这里的伪动态网站和静态网站的最大区别就是伪动态网站是有后端数据库的,伪动态网站和动态网站的最大区别是动态网站后端有php、asp.net等等动态服务器程序。

在静态网站中,Nginx对HTML文件的解析是完全按照服务器端存储的html文件的内容进行解析并发送给客户端浏览器的;而在动态服务器中,由于有php+数据库这类的组合,因此其服务器上存储的html文件往往只是页面的大致的布局和框架类的内容,而每个页面的最后发送给客户端的内容则是动态从数据库中取出然后由php进行解析然后再交给Nginx,Nginx再将其与静态存储的html文件内容组合再发送给客户端浏览器。举个例子:假设一个blogs网站,静态服务器需要存储1.html,2.html,......,100.html,这样的100个html页面,而动态服务器则可能只保存top.html,left.html,right.html,down.html,这样的四个html文件,然后100个blogs的内容存储在数据库中,然后当客户端浏览器访问时其url为https://cnblogs.com/xyz/1.html, 那么Nginx把请求发给php,php根据1.hml这个字段从数据库中取出该页面应该对应的页面内容并交给Nginx,Nginx再将其与top.html,left.html,right.html,down.html进行组合得到最终的1.html并发送给客户端浏览器。

而伪动态服务器在具体运行时比如也是有100个页面,其真实存储时也是保存1.html,2.html,......,100.html,这样的100个html页面在服务器上,但是每个页面对应的评论信息,IP访问信息则是保存在服务器的数据库中,由于伪动态服务器是没有php、asp.net这样的动态程序运行在服务器端的,因此其运行过程与动态网站还是有很大不同的,最大的一个区别就是这种的伪动态服务器上运行的是JavaScript、python这样的程序,这样的程序更适合作函数过程调用(阿里云、腾讯云、百度云,等等,都有这种函数调用的服务),也就是说在伪动态服务器中是通过服务器端运行的JavaScript或python这样的程序从数据库中取出数据,而且伪动态网站从数据库中取出的数据并不是直接交给Nginx服务的,而是绕过Nginx直接发送给客户端浏览器的,因为这样的伪动态网站所存储的1.html,2.html,......,100.html,这样的100个html页面都是有调用跨域的JavaScript脚本的,也正是这些最终运行在客户端浏览器中的JavaScript代码向伪动态网站的JavaScript或python发起数据库查询请求的。由于伪动态网站的html访问和动态数据访问时完全独立的,html访问时通过Nginx的,动态数据访问(blogs网站的评论数据)是客户端浏览器运行的JavaScript再次向服务器的JavaScript或python程序发起的请求,因此伪动态网站的服务器可以将Nginx服务进程与数据库服务的python/javascript进程完全独立到不同的物理服务器上,甚至很多公司会单独提供这种第三方的数据库服务的,比如腾讯云、阿里云的函数调用服务。

GitHub、Gitee这样的代码存储网站上提供的个人博客建站其实就是静态网站服务,是GitHub、Gitee公司单独搭建的一个Nginx服务器,由于静态服务器对性能要求低,不提供数据动态交互服务,安全性高等等特点,因此GitHub、Gitee这样的公司才有能力向所有用户提供这种blogs静态建站服务。GitHub、Gitee提供的这种静态建站服务就是将html文件或者markdown写的.md文件存储到自己网站上的代码仓库中,然后再将Nginx服务器中的对应的连接地址执行这个代码仓库即可。

说明一下:

GitHub提供的静态页面解析服务可以解析md和HTML文件格式,md文件的内容的语法其实是html语法的一个删减版,因此md文件可以被翻译成html文件格式,这也是为什么在GitHub、Gitee中可以直接在代码仓库中点击md文件从而打开一个对应的解析网页的原因。

关于个人blogs的链接地址:

github.com为github.io结尾,gitee.com为 gitee.io结尾。

由于伪动态网站可以通过在静态网站的html文件中声明调用的JavaScript代码的形式实现,因此为了给GitHub、Gitee个人blogs建站增加功能,因此很多人采用这样的方式将其改为伪动态网站的形式,为GitHub、Gitee个人blogs静态网站加入了用户评价、用户注册、IP统计,等等功能。

很多人为了更好的给静态网站增加更好的页面效果,比如设置字体、页面框架等等功能,于是使用一些静态博客写作客户端来自动生成对应的静态的html文件,这样的工具都是可以直接使用html语言或markdown语言进行编写的,不过为了更好管理和更方便使用,这样的工具最好都是用来写md文件的。常见的静态博客写作客户端有: hugo heox Gridea Jekyll 这样的博客形态的静态站点生产器。

在这样的静态博客写作工具中使用markdown格式编写.md文件(也可以直接编写html文件),但是都是需要在指定文件夹下编写文件,然后再在这些工具中调用对应的命令生成html格式的静态文件格式,然后再将生成的静态html文件上传到GitHub的对应代码仓库中。

在这些工具(hugo heox Gridea Jekyll )中,往往提供更换html页面主体、布局、字体等等功能,而这些功能都可以在工具的_config.yml文件中进行设置和调整的,以便于生成更符合用户满意的静态html页面的。

对于这些工具根据用户设置和用户编写的.md文件自动生成的html文件,用户可以通过这些工具在本地调试,下面给出这些工具的配置和用户编写md文件和其他资源(图片)的存储文件夹名称:

需要注意的是,不论md还是html文件,在使用这些工具编写blog时都需要在文件开头写声明格式:每篇文章的头部,必须有一个yaml文件头,用来设置一些元数据。它用三根短划线"---",标记开始和结束,里面每一行设置一种元数据,这种声明的要求和cnblogs.com中使用GitHub同步到blogs的要求是相似的,这里给出本文所用的声明格式:

我们可以在GitHub、Gitee中个人blogs内容所对应的代码仓库的设置中指定这个仓库内容在交给Nginx解析时的入口文件的:

在GitHub对应仓库设置个人blogs首页,即网站入口:index.html 或者是 readme.md,如:

可以看到,GitHub、Gitee个人blogs的默认主页文件为index.html,index.md,README.md,在我的个人建站:

https://devilmaycry812839668.github.io/中使用的就是README.md文件:

md文件本身是html语法的删减版本,本身markdown语法就兼容html语法,因此markdown语法可以直接被HTML服务器(Nginx)解析为html语言的格式发送给客户端(浏览器),而这些工具(hugo heox Gridea Jekyll )都是JavaScript编写的,自带本地静态服务器功能和md文件转HTML文件功能(渲染),这些工具编写的md文件转成html文件后可以在本地的工具中进行查看,这些工具都是自带浏览器内核的(JavaScript的运行环境就是浏览器内核)。

这些工具(hugo heox Gridea Jekyll )在生成html文件时可以指定添加伪动态网站的JavaScript代码的,这样伪动态网站的数据库服务一方可以直接接受GitHub、Gitee个人建站blogs的JavaScript请求,也可以通过中间方,如果通过中间方的话就需要在提供数据库服务的函数调用服务器上配置access token。

比如Leancloud网站就提供这种函数调用功能给伪动态网站,以实现GitHub、Gitee这种个人建站的静态网站的点击计数、IP统计、评论等功能。

需要注意的是这种数据库功能(云服务的函数调用功能)的提供方(阿里云、腾讯云、Leancloud网站,等等)提供动态数据库功能,由于跨域的安全限制,本地的服务器(hugo heox Gridea Jekyll 工具自带的本地浏览器内核)无法查看这些信息,上传GitHub后访问GitHub.io上对应的地址可以在浏览器的JavaScript中访问对应的动态服务功能,从而获得这些信息,并在本地浏览器中得到展示。

上面的内容就是本文对GitHub、Gitee上生成的个人blogs静态网站及升级的伪动态网站所给出的原理解释,可以说这样的blog网站其本质依然是静态网站,其数据库的存储功能都是托管给第三方的(阿里云、腾讯云、Leancloud网站,等等),可以说我们通过这种的方式只能把网页静态数据掌握在自己手里(html静态文件资源存储在个人代码仓库中),当然,如果你在这样的网站中加入了第三方图库/图床上的图片资源,那么html中只有文字内容是保存在自己手上的,图片也是托管给第三方的。

需要注意的是,虽然GitHub、Gitee上生成的个人blogs静态网站是免费的,但是托管的第三方图库的访问是有免费限额的,而免费的第三方函数调用也是有免费限额的,也就是说这样的个人blogs网站上页面的图片数据和评论数据(第三方提供的数据库远程函数调用功能)都是有每日的免费访问次数的,如果超过免费限制则无法正常访问,不过一般在GitHub、Gitee上建站的blog其访问量都是十分有限的,个人的经验就是一些搞学术的researcher才喜欢通过这种方式搞blogs。

这种个人建站的方式,自己搭建blog网站,更自由,可以使用更新更炫的技术,如:Ajax,等等,可以加页面音乐,加动漫形象,搞半透明页面,网站页面格式可以自定义,模板可以自由更换,可以说有更高的定制化和个性化的功能,比csdn、cnblogs有很多的自由度,不过缺点就是极为麻烦,需要个人维护,唯一的好处是这种使用GitHub、Gitee建站的html文件的物理存储是免费的,不过对于不是很喜欢折腾的人来说还是建议使用csdn、cnblogs的网站,不过如果你是researcher,使用GitHub个人blogs完整只是发发个人的publication的话,那也不用太麻烦,很多国外的学者就是使用这样的方式建站的,上面的blog页面一般也都是个人发表了什么CCF A B C的期刊和会议论文的,这样的做法也是常见的。

不过对于搞技术的用户,不是那种学术researcher,而且不喜欢csdn、cnblogs这样的网站的用户,如果希望自己掌握所有的网站数据,希望发布到自己搭建的云服务器Nginx上(阿里云、腾讯云、百度云、华为云,等等),那么使用WordPress这样的方式建站也是不错的选择。

我个人认为GitHub、Gitee建站除了麻烦、繁琐,需要个人维护以外,最大的缺点就是动态数据的解析依旧是托管在第三方,不同于WordPress是可以把所有数据都自己掌握的。

如果GitHub、Gitee建站使用第三方数据库(实现评论功能等等)和图床服务,那么严格来说就不是完全把网站数据掌握在个人手中。

github官方给出个人建站的教程:

https://docs.github.com/en/pages

相关:

零基础在Github上搭建个人博客

在Github搭建个人博客-详细步骤整理

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

https://gitee.com/skylee/gitblog/

搭建个人博客(四):如何实现评论系统

搭建个人博客(二):如何详细配置 Hexo + 使用 Redefine 主题美化博客

欢迎使用 Waline,只需几个步骤,你就可以在你的网站中启用 Waline 提供评论与浏览量服务

github/gitee个人博客到底是什么一个运行原理?的更多相关文章

  1. Hexo+github如何搭建博客

    前言 博客有第三方平台,也可以自建,比较早的有博客园.CSDN,近几年新兴的也比较多诸如:WordPress.segmentFault.简书.掘金.知乎专栏.Github Page 等等. 这次我要说 ...

  2. Hugo+Github 搭建个人博客(Windows环境下)

    目录 Hugo+Github 搭建个人博客(Windows环境下) 1.前言 2.Differences 2.1 https vs SSH 2.2 新建的github的仓库名必须为 用户名+githu ...

  3. Github pages + jekyll 博客快速搭建

    Github pages + jekyll 博客快速搭建 寻找喜欢的模版 https://github.com/jekyll/jekyll/wiki/sites http://jekyllthemes ...

  4. github生成静态博客

    github生成静态博客很简单. 1.确认你知道你github的用户名,我的叫做chenxing12 2.创建一个项目名字叫做:用户名.github.io 我的用户名叫做chenxing12,所以我创 ...

  5. 用Jekyll在github上写博客——《搭建一个免费的,无限流量的Blog》的注脚

    本来打算买域名,买空间,用wordpress写博客的.后来问了一个师兄,他说他是用github的空间,用Jekyll写博客,说很多人都这么做.于是我就研究了一下. 比较有价值的文章有这么几篇: htt ...

  6. 利用github page搭建博客

    为什么选择GitHub Pages? 很多人用 wordpress,你为什么要用 github pages 来搭建? 1.github pages有300M免费空间,资料自己管理,保存可靠: 2.学着 ...

  7. 本博客不再更新,欢迎访问本人托管在GitHub上的博客:www.wshunli.com

    本博客不再更新. 欢迎访问本人托管在GitHub上的博客:www.wshunli.com

  8. 使用Github建立个人博客

    总的说来 这个当有node.js 和gitbub的账号后,搭建一个自己的博客,想想还是挺美的事! 由于要把整个流程说清楚 估计lz还没这个实力,所以都是继承前辈们的经验,自己再添加一点遇到的问题和解决 ...

  9. 在github上搭建博客(使用Jekyll)

    简单说,只需要三步,就可以在 Github 搭建起一个博客: 在 Github 上建一个名为 xxx.github.io 的库: 把看中了的 Jekyll 模板 clone 到本地: 把这个模板 pu ...

  10. 使用Jekyll搭建免费的Github Pages个人博客

    一.Git 1.Git概述 Git is a free and open source distributed version control system designed to handle ev ...

随机推荐

  1. DMS:直接可微的网络搜索方法,最快仅需单卡10分钟 | ICML 2024

    Differentiable Model Scaling(DMS)以直接.完全可微的方式对宽度和深度进行建模,是一种高效且多功能的模型缩放方法.与先前的NAS方法相比具有三个优点:1)DMS在搜索方面 ...

  2. SQL中解决i+1 & values中插入变量

    基于JDBC环境下使用mysql插入数据的一些小问题 下方代码用于实现 批量向数据库中插入数据 一般为"垃圾"数据 代码例子实现i+1的效果 i=1 i+1=2 for (int ...

  3. React挂载dom无效的问题

    话不多说,先上代码. 根据我的猜测,ReactDOM.render()这个函数,也就是挂载的意思是将内容进行替换,所以我的vdom1在调试的时候没有展示出来. 然后我创建了两个div块,分别挂载vdo ...

  4. PCSR:已开源,三星提出像素级路由的超分辨率方法 | ECCV 2024

    基于像素级分类器的单图像超分辨率方法(PCSR)是一种针对大图像高效超分辨率的新方法,在像素级别分配计算资源,处理不同的恢复难度,并通过更精细的粒度减少冗余计算.它还在推断过程中提供可调节性,平衡性能 ...

  5. spm 一阶分析的Microtime onset应该如何填写?

    1. 如果对数据进行了slice timing, 那么在进行一阶分析时应该修改microtime onset和 microtime resolution这两个参数, 假设数据的slice order= ...

  6. vue3 如何获取 dom

    1. 通过 ref     1. 在 html 标签上指定 ref 属性     2. 在 setup 中定义并返回.注意:标签上的 ref 属性名需要跟 setup 中的对应 <h1 ref= ...

  7. 鸿蒙(HarmonyOS)常见的三种弹窗方式

    最近有一个想法,做一个针对鸿蒙官方API的工具箱项目,介绍常用的控件,以及在项目中如何使用,今天介绍Harmony中如何实现弹窗功能. 警告弹窗 警告弹窗是一个App中非常常用的弹窗,例如: 删除一条 ...

  8. 微信js-sdk接入原理

    1.有一个微信公众号,并获取到该公众号的AppID和AppSecret. 其中AppID是可以对外公开的,AppSecret是该公众号的密钥,是需要绝对保密的 2.向微信服务器发送一个GET请求,获取 ...

  9. @vue/cli typescript插件使用指南

    步骤 使用 yarn add 安装 @vue/cli-service 对应版本的 @vue/cli-plugin-typescript 例如:"@vue/cli-service": ...

  10. dfs 【XR-2】奇迹——洛谷5440

    问题描述: 现有一个八位数,从左往右分别代表年月日,例如20240919,代表2024年9月19日,现将该八位数蒙住几位数,问填入数字之后有几种情况是的日为质数,月+日为质数,年+月+日为质数 输入: ...