修改网站内容( 一个.github.io：如何在任何地方都能够被访问)

　　修改网站内容(

一个.github.io：如何在任何地方都能够被访问)

　　

　　图片

　　第一步网站hosting

　　我们知道如果一个网站可以在任何地方访问，它需要部署在服务器上。其实github就提供了这样的功能。只要按照github格式要求新建一个仓库，上传你的网站代码到里面，就可以随时随地访问了，那么这个代码托管仓库羊毛布怎么搭建呢？

　　可以参考官方链接，我也会在这里写步骤。

　　1.首先要在GitHub上注册一个账号，比如我注册的用户名：lease-chen（用户名可以在设置里改）

　　2.点击新建仓库-->输入仓库名称格式：username.github.io（如lease-chen.github.io）->点击创建仓库

　　

　　图片

　　

　　图片

　　3.在浏览器中访问，可以发现这个url是可以访问的，可以把修改后的仓库拉到本地，然后在里面新建一个index.html文件，在里面输入任意内容，然后将代码push到git，然后访问change链接，可以发现index.html中的内容已经被访问了。

　　这里创建了一个免费且无限制的github代码托管仓库。

　　第二步 Jekyll 安装

　　先解释一下jekyll是什么。 Jekyll 相当于一个编译工具。安装jekyll后，可以通过jekyll创建网站模板。创建完成后，我们可以通过：4000/@了访问新创建的网站（jekyll的具体用法后面会介绍），我们可以实时修改刚刚创建的模板中的内容，预览效果通过本地 url 实时更改。我们将这个博客推送到上一步创建的代码仓库，然后我们就可以访问博客中的内容了。使用Jekyll，我们不需要每次改动一点就将代码推送到仓库进行预览，而是可以在本地进行预览。 GitHub 支持 jekyll、hexo 等语法分析。

　　那么如何安装je​​kyll呢？暂时只讲解windows下的安装步骤。

　　首先点击下载安装Ruby installer；

　　点击下载RubyGems，下载完成后解压到你想要的位置，比如我放在E:\Software\Install\StudySoftware\rubygems-2.7.4。打开命令行执行：

　　cd E:\Software\Install\StudySoftware\rubygems-2.7.4 //转到解压包所在位置

　　E：

　　ruby setup.rb

　　在命令行执行 gem install jekyll;

　　安装完成后，我们可以使用jekyll命令创建博客模板并打开命令行执行：

　　cd:

　　d:

　　jekyll 新测试博客

　　cd testblog

　　jekyll 服务器

　　在浏览器中输入：4000/浏览刚刚创建的博客

　　现在jekyll的安装已经完成了。

　　第三步 Jekyll 主题选择

　　在上一步中，我们完成了 jekyll 的安装。默认的博客模板通常很简单。 jekyll 官网提供了大量的博客模板。我们可以选择一个自己喜欢的博客模板，然后根据这个博客进行修改，让自己满意。需求博客

　　点击进入jekyll主题官网

　　我选择了adam-blog这个话题

　　点击首页链接博客Github页面，点击下载下载博客源码，点击demo预览博客效果

　　

　　图片

　　我们点击下载，下载源码，在命令行进入目录执行jekyll服务器，执行成功，在控制台可以看到运行路径：

　　

　　图片

　　如果下载的主题jekyll服务器执行失败，请使用步骤2中创建的testblog目录下的Gemfile和Gemfile.lock文件替换下载的主题中的文件。如果不成功，按照控制台提示的错误进行操作，可以百度解决。至此，我们选择了一个博客主题模板，接下来讲解一下jekyll主题的目录结构

　　第四步 Jekyll 目录结构

　　jekyll 目录结构主要包括以下目录：

　　_posts 博客内容

　　_pages 其他需要生成的网页，如关于页面

　　_layouts 网页布局模板

　　_includes 模板收录的HTML片段，可以在_config.yml中修改位置

　　assets 辅助资源css布局js脚本图片等

　　_data 动态数据

　　最终由_sites生成的静态网页

　　_config.yml 网站的一些配置信息

　　index.html 网站的入口

　　那么这些目录是如何工作的？

　　如果我们打开根目录下的index.html，可以看到：

　　—

　　布局：首页

　　—

　　html 代码片段

　　上面的主页可以在_layouts目录中找到：

　　

　　图片

　　其实根目录下的index.html就是运行后首页的代码内容。 1中的html代码段会填上上图中的内容位置

　　上图的默认布局也可以在_layouts目录下找到：

　　

　　图片

　　其实根目录下的index.html运行后，home-page.html中的代码内容会被填充到上图中的content位置

　　jekyll 是拼接运行分散在各个目录下的html文件。

　　文章链接这里有更好的文章，跟着文章中的操作让你更熟悉

　　步骤 5 Jekyll 语法

　　最后一步大概解释了 Jekyll 的目录结构。现在我们解释 Jekyll 下一部分的语法。也可以到官方网站了解更详细的官方链接

　　{% for post in paginator.posts %} {% endfor %} 代表一个for循环，百分号之间的语句就是要执行的语句，这段代码代表分页输出文章，页数是_config.yml中的配置，注意：分页只在根目录下的index.html中有效

　　{site.custom field name} 表示获取_config.yml中自定义字段名称的值

　　{% for post in site.posts limit:2 %} {% endfor %} 循环输出 2 个帖子文章

　　{% for post in site.posts offset: 0 limit: 2 %} 循环输出最新的2个posts文章

　　{% for tag in post.tags %} {% endfor %} 输出本文中的标签文章

　　{% if link.type == site.blog_1 %} {% endfor %} 字符串比较

　　| {% 分配计数 = 0 %}****{% 分配计数 = 计数 | plus: 1 %}定义赋值变量加1 |

　　{{post.content | strip_html | strip_newlines | truncate: 100 }} 获取文章摘要，取前100个字符

　　2018-02-10-你要添加的描述.markdown，文章name格式，否则无法识别

　　{{ page.date |日期：'%Y, %b %d' }} 输出文章日

　　{{page.title}} 输出文章title

　　{% if post.jekyll %} 判断文章中的jekyll字段是否为真

　　{% if paginator.previous_page %}有上一页吗？

　　{% if paginator.next_page %}是否有下一页

　　{{ paginator.previous_page_path }}上一页网址

　　{{ paginator.next_page_path }}下一页网址

　　| {{ post.url |前置：site.baseurl }} 要访问的文章 的url |

　　第六步修改博客模板

　　发现第四步下载的博客模板不能完全满足我的需求，所以做了如下修改

　　1.添加文章分类功能：

　　一个。在_config.yml 中添加以下类别

　　

　　图片

　　B.在_includes目录下的header.html中加入如下代码，该目录下是循环输出类别和文章quantity

　　

　　图片

　　c.在根目录下创建blog文件夹，在里面创建对应的目录，目录名对应步骤a中的url路径

　　

　　图片

　　d。在每个目录下创建index.html，并添加如下代码，这样就可以按类别文章

　　输出

　　

　　图片