使用github搭建网站

  • 时间:
  • 浏览:553
  • 来源:成都艾邦软件开发

/pipisorry/article/details/51707366

使用github建站

github设计了Pages功能允许用户自定义项目首页用来替代默认的源码列表。所以github Pages可以被认为是用户编写的、托管在github上的静态网页。github提供模板允许站内生成网页但也允许用户自己编写网页然后上传。有意思的是这种上传并不是单纯的上传而是会经过Jekyll程序的再处理。

Jekyll发音/dʒiːk əl/杰克尔是一个静态站点生成器它会根据网页源码生成静态文件。它提供了模板、变量、插件等功能所以实际上可以用来编写整个网站。

和传统的个人博客系统不同传统的个人博客只能提供博文的发表、评论等等而在Github上面建站就好比一幅油画的白纸很纯净很自由人们可以自定义上面的内容尽情挥洒自己的创意。

使用github建站思路

先在本地编写符合Jekyll规范的网站源码然后上传到github由github生成并托管整个网站。
这种做法的好处是
* 免费无限流量。
* 享受git的版本管理功能不用担心文章遗失。
* 你只要用自己喜欢的编辑器写文章就可以了其他事情一概不用操心都由github处理。
它的缺点是
* 有一定技术门槛你必须要懂一点git和网页开发。
* 它生成的是静态网页添加动态功能必须使用外部服务比如评论功能就只能用disqus。
* 它不适合大型网站因为没有用到数据库每运行一次都必须遍历全部的文本文件网站越大生成时间越长。

皮皮blog

轻松使用github.io搭建个人网站

{绝对是最简单的建站方式一个用户只能创建一个}

安装了git并且有github账户。

创建一个新库名称必须为username.github.io。#username是你的github用户名。

创建好之后将其Clone到本地。

在Clone出来的本地目录下建立一个index.html保存上传。

打开浏览器在地址栏处输入你的username.github.io。就可以看到刚刚上传的html网页了。

修改indel.html文件后有时需要好久才能看到效果。

Note: index.html中是可以调用javascript和css文件的。

皮皮blog

使用github建站

{github建站方式2}

安装了git并且有github账户。

第一步创建项目

在你的电脑上建立一个目录作为项目的主目录。我们假定它的名称为pipi_ghpages。

  $ mkdir pipi_ghpages

对该目录进行git初始化。

  $ cd pipi_ghpages

  $ git init

然后创建一个没有父节点的分支gh-pages。因为github规定只有该分支中的页面才会生成网页文件。

  $ git checkout --orphan gh-pages

以下所有动作都在该分支下完成。

第二步创建设置文件

在项目根目录下建立一个名为_config.yml的文本文件。它是jekyll的设置文件我们在里面填入如下内容其他设置都可以用默认选项具体解释参见官方网页。

$ vi _config.yml

  baseurl: /pipi_ghpages

目录结构变成

  /pipi_ghpages

|-- _config.yml

第三步创建模板文件

在项目根目录下创建一个_layouts目录用于存放模板文件。

  $ mkdir _layouts

cd !$

进入该目录创建一个default.html文件作为Blog的默认模板。并在该文件中填入以下内容。

$ vi default.html

!DOCTYPE html
html
head
  meta http-equivcontent-type contenttext/html; charsetutf-8 /
  title{{ page.title }}/title
/head
body
  {{ content }}
/body
/html

Jekyll使用Liquid模板语言{{ page.title }}表示文章标题{{ content }}表示文章内容更多模板变量请参考官方文档。

目录结构变成

  /pipi_ghpages
|-- _config.yml
|-- _layouts
|   |-- default.html

第四步创建文章

回到项目根目录创建一个_posts目录用于存放blog文章。

$ cd ..

  $ mkdir _posts

$ cd !$

进入该目录创建第一篇文章。文章就是普通的文本文件文件名假定为2016-06-18-hello-world.html。(注意文件名必须为年-月-日-文章标题.后缀名的格式。如果网页代码采用html格式后缀名为html如果采用markdown格式后缀名为md。

在该文件中填入以下内容注意行首不能有空格

$ vi 2016-06-18-hello-world.html

---
layout: default
title: 你好世界
---
h2{{ page.title }}/h2
p我的第一篇文章/p
p{{ page.date | date_to_string }}/p

yaml文件头每篇文章的头部必须有一个yaml文件头用来设置一些元数据。它用三根短划线---标记开始和结束里面每一行设置一种元数据。三根短划线前面是不能有空格的如果你用windows必须确认保存文件的时候不带BOM。

layout:default表示该文章的模板使用_layouts目录下的default.html文件

title: 你好世界表示该文章的标题是你好世界如果不设置这个值默认使用嵌入文件名的标题即hello world。

在yaml文件头后面就是文章的正式内容里面可以使用模板变量。{{ page.title }}就是文件头中设置的你好世界{{ page.date }}则是嵌入文件名的日期也可以在文件头重新定义date变量| date_to_string表示将page.date变量转化成人类可读的格式。

目录结构变成

  /pipi_ghpages
|-- _config.yml
|-- _layouts
|   |-- default.html 
|-- _posts
|   |-- 2012-08-25-hello-world.html

第五步创建首页

有了文章以后还需要有一个首页。

回到根目录创建一个index.html文件填入以下内容。

$ cd ..

$ vi index.html

---
layout: default
title: 我的Blog
---
h2{{ page.title }}/h2
p最新文章/p
ul
  {% for post in site.posts %}
li{{ post.date | date_to_string }} a href{{ site.baseurl }}{{ post.url }}{{ post.title }}/a/li
  {% endfor %}
/ul

它的Yaml文件头表示首页使用default模板标题为我的Blog。然后首页使用了{% for post in site.posts %}表示对所有帖子进行一个遍历。这里要注意的是Liquid模板语言规定输出内容使用两层大括号单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml中设置的baseurl变量。

目录结构变成

  /pipi_ghpages
|-- _config.yml
|-- _layouts
|   |-- default.html 
|-- _posts
|   |-- 2012-08-25-hello-world.html
|-- index.html

第六步发布内容

现在这个简单的Blog就可以发布了。先把所有内容加入本地git库。

$ git add .

$ git commit -m first post

然后前往github网站创建一个名为pipi_ghpages的库。接着再将本地内容推送到github上你刚创建的库。注意下面命令中的username要替换成你的username。

$ git remote add origin /username/pipi_ghpages.git

$ git push origin gh-pages

Note: 要想git push成功至少要先配置一下github。[Git版本控制教程 - Git远程仓库 :Git远程仓库ssh设置]

上传成功之后等10分钟左右访问/pipi_ghpages/就可以看到Blog已经生成了将username换成你的用户名。

第七步绑定域名(optional)

如果你不想用/pipi_ghpages/这个域名可以换成自己的域名。

具体方法是在repo的根目录下面新建一个名为CNAME的文本文件里面写入你要绑定的域名比如example.com或者xxx.example.com。

如果绑定的是顶级域名则DNS要新建一条A记录指向204.232.175.78。如果绑定的是二级域名则DNS要新建一条CNAME记录指向username.github.com请将username换成你的用户名。此外别忘了将_config.yml文件中的baseurl改成根目录/。

至此最简单的Blog就算搭建完成了。进一步的完善请参考Jekyll创始人的示例库以及其他用Jekyll搭建的blog。

[搭建一个免费的无限流量的Bloggithub Pages和Jekyll入门]

from: /pipisorry/article/details/51707366

ref: /categories/github-pages-basics/

[从零开始搭建论坛1Web服务器与Web框架]

[/post/2017/03/jekyll-introduction.html]

用github hexo next主题建了一个新网站[我将会换一个平台写技术类文章]

写在前面本博客为本人原创严禁任何形式的转载本博客只允许放在博客园.cnblogs.com如果您在其他网站看到这篇博文请通过下面这个唯一的合法链接转到原文

本博客全网唯一合法URL

 

  互联网上有许多非常优质的资源一不小心发现一个都会让你惊喜很久

  上个学期选了一门前端开发技术的课程课程final是搭建一个自己的个人网页。这个作业着实让我头疼了很久写html和css是很简单的js也不难学但是做网站一定要有服务器做出来了网站但是只在自己的电脑上跑有什么意思呢更何况搭网站最大的收获不是写代码而是体会在服务器上部署网站的快感。租服务器最好的厂家当然是Amazon国内的几家大厂的云计算服务器也还行但是都太贵了而且注册手续太麻烦。所以想了想还是决定直接使用github自带的GitHub Pages来搭网站。

  用GitHub Pages来搭网站我使用后总结出以下几个优点

  1、可以使用.github.io这一个精简的永久域名

  2、由于使用.github.io这个域名省去了申请和管理域名的开销。

  3、由于是挂在github上所以可以直接使用http协议

  4、挂在github上安全性好不容易被攻击

  5、由于github的本身特性修改、撤回修改很容易。

 

  当然了万事有利就有弊用GitHub Pages来搭网站亦有缺点

  1、不能在GitHub Pages上配置软件但是跑js没有问题所以网站很难带数据库至少部署任何一种的数据库管理程序都是没有办法的因为github pages限制了上传文件的最大体积为25MB有哪个网站的DBMS会小于25MB呢。所以一开始我想到了使用js的I/O流来对部署在服务端的一个txt文件进行读写以实现数据的基本存储功能但是这会有一个非常大的安全问题众所周知js的读文件操作非常容易实现但是js的写操作非常难实现因为浏览器制造厂商害怕js的编写者通过I/O功能向访问网页的客户机内写入病毒所以主流浏览器Chrome和FireFox无一例外的完全封杀了js的I/O功能即使是最原始的IE浏览器在运行到js的I/O语句时也会询问用户是否执行语句。但是我还是尝试写了一段js代码来了解一下js的I/O功能

htmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /title客户端攻击代码/titlescript src/cityjson?ieutf-8/scriptscript languagejavascript typetext/javascriptvar fsonew ActiveXObject(Scripting.FileSystemObject); //实例化var f1 fso.OpenTextFile(data.txt,8,true);//这样就能继续写了。分清WriteLine和Write//f1.WriteLine(); //enter//f1.Write(这才是一行文字);var now new Date();var yearnow.getFullYear();var monthnow.getMonth();var datenow.getDate();var hournow.getHours();var minutenow.getMinutes();var secondnow.getSeconds();//写入f1.WriteLine();f1.WriteLine();f1.WriteLine(RECORD:);f1.WriteLine(year年(month1)月date日hour时minute分second秒);f1.WriteLine(IP: returnCitySN[cip]);f1.WriteLine(地区代码: returnCitySN[cid] );f1.WriteLine(所在地: returnCitySN[cname]);f1.WriteLine(userAgent: navigator.userAgent);f1.WriteLine(appName: navigator.appName);f1.WriteLine(appCodeName: navigator.appCodeName);f1.WriteLine(appVersion: navigator.appVersion);f1.WriteLine(appMinorVersion: navigator.appMinorVersion);f1.WriteLine(platform: navigator.platform);f1.WriteLine(cookieEnabled: navigator.cookieEnabled);f1.WriteLine(onLine: navigator.onLine);f1.WriteLine(userLanguage: navigator.language);f1.WriteLine(mimeTypes.description: navigator.mimeTypes[1].description);f1.WriteLine(mimeTypes.type: navigator.mimeTypes[1].type br);f1.WriteLine(plugins.description: navigator.plugins[3].description);f1.Close();/script/head/html

 这段代码是很可怕的为什么因为只要用户访问到这个web page后一旦用户的浏览器执行了我嵌入在html内部的js代码那么用户的所有信息就全部被暴露在我面前了相当于用户already naked下面放一下运行后的结果我是使用IE6浏览器运行的代码

可以看到这会生成一个data.txt文件暴露用户的IP和用户计算机的所有信息如看不清可以右键在新页面内查看上图

RECORD:2018年2月14日12时15分44秒IP: 115.150.174.242地区代码: 360100所在地: 江西省南昌市userAgent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Win64; x64; Trident/6.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Tablet PC 2.0)appName: Microsoft Internet ExplorerappCodeName: MozillaappVersion: 5.0 (compatible; MSIE 10.0; Windows NT 6.1; Win64; x64; Trident/6.0; .NET CLR 2.0.50727; SLCC2; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C; .NET4.0E; Tablet PC 2.0)appMinorVersion: 0platform: Win64cookieEnabled: trueonLine: trueuserLanguage: undefined

  2、网站挂在github上 而github的服务器部署在US根据计算机网络DNS系统的工作原理可以知道这对位于中国内地第一次登陆我的网站的用户的网络带宽有一定的要求访问速度比较慢但是多访问几次就会好很多因为DNS的解析结果会被存放在计算机的网络cache中即省去了解析域名的时间。

阐述完了GitHub Pages的特点接下来讲讲怎么使用GitHub Pages来部署网站

  1、你要注册一个github账号估计能看到这里的童鞋不会没有github嘻嘻。

  2、create a new repository。命名自己决定。

  3、在repository内放入你网站所涉及到的所有文件推荐这样放

  为什么 因为这样的话根目录就只有一个可读文件即网站主页html文件其他都是不可直接读的文件夹那么用户通过域名访问你的网站时就不会产生域名解析的二义性。同时必须记住这样做的话当代码涉及到资源定位时你必须使用相对路径而不是绝对路径

  4、部署好网站的所有资源文件后进入该repository点击Settings

5、滚到下面的github pages选项

  6、点击None会弹出复选框选择启动github pages成功后如下图

  7、成功后会自动显示你的域名[string].github.io[string]是你注册github的用户名。

  OK主要工作到此结束网站就这样激活了。

总结一下

  github pages工作原理其实和云服务器是一致的即你并不在物理上持有服务器但是你却通过互联网在逻辑上享有服务器的所有权。因此你并不能面向服务器的硬件或者操作系统编程而只能通过云计算平台提供的一个界面对服务器进行操作我不知道从本质上来讲这个界面属不属于一种操作系统似乎这种界面与Chrome OS这样的基于浏览器的操作系统还是有很大不同的。

TZhome

2018/2/14