1.3 把网站配置到 GitHub Pages

现在就让我们开始着手把我们的宣传网站配置到 GitHub Pages 。当然 GitHub Pages 是基于 GitHub 的。（废话）所以您最好对 GitHub/Git 有一些了解。也就是说笔者不必要给您讲解如何注册一个 Github 的账号，如果您使用的是 Windows 或 Mac，笔者也不需要带着您安装 GitHub Desktop。那么记得给我们的网站建立一个项目根目录，并且对它进行初始化（git init）。

您知道吗？

gh-pages 是 GitHub Pages 的默认分支。所以有些人认为如果想使用 GitHub Pages 就必须建立一个没有父节点的 gh-pages 分支。不过实际上是不是要建立一个 gh-pages 分支这一点随您自己的喜欢。您可以在设置（Settings）里面修改 GitHub Pages 的分支。

好了，在您的项目根目录中建立以下这些文件和文件夹。
文件夹：_data、 _drafts、 _includes、 _layouts、 _posts 和 _site
文件：_config.yml 和 index.html

暂时我们只会用到 _layouts 这个文件夹以及 _config.yml 和 index.html 这两个文件。所以其他文件夹等到我们用到的时候再说。在 _config.yml 这个文件夹中填入以下代码：

baseurl: /您的项目根目录

譬如说笔者的项目根目录叫做 mypage，所以对应的代码就是：

baseurl: /mypage

至于 index.html 则是首页的文件，我们暂时先不去管它。我们现在先来把之前做的网页模板整理好。由于 GitHub Pages 目前并不支持 CDN ，您需要下载 Foundation6 和 jQuery ，借此机会我们顺便来整理一下我们之前写的网页模板。

在根目录下建立分别建立名为 css 和 js 的文件夹，其中 css 文件夹用来保存 层叠样式表文件（css文件），js 文件夹用来保存 JavaScript 脚本文件（js文件）。

在 _layouts 文件夹中把我们之前做好的模板网页拷贝进来，并进行整理。命名为： default.html。_layouts 文件夹就是为了保存我们的模板页面的文件夹。

     
         
         
         
         
         
         
         
     
     
         

            
Liu's Homepage
            

                
Index
                
Works
                
Notes
                 
Resume
            
         
         
     

记得把之前的样式标签整理成一个 css 文件保存到 css 文件夹的 style-header.css 文件里面：

.header {
       text-align:  center;
       background:  #990000;
       background-size:  cover;
       position:  relative;
       overflow:  visible;
       padding-top:  2.5rem;
       padding-bottom:  4.9rem;
}

.header .headline {
       color:  #ffe;
}

.header-subnav {
       float:  none;
       position:  absolute;
       text-align:  center;
       margin:  0 auto;
       bottom:  0;
       width:  100%;
}

.header-subnav li {
       float:  none;
       display:  inline-block;
}

.header-subnav li a {
       padding:  0.9rem 1rem;
       font-size:  0.75rem;
       color:  #ffe;
       text-transform:  uppercase;
       display:  block;
       font-weight:  bold;
       letter-spacing:  1px;
       transition:  all 0.35s ease-in-out;
}

.header-subnav li a.is-active {
       background:  rgba(250, 250, 250, 0.15);
}

.header-subnav li a:hover {
       background:  rgba(250, 250, 250, 0.15);
       transition:  all 0.35s ease-in-out;
}

在 Dreamweaver 中您可以通过打开实时视图来调整您的代码。

在 header 标签之后加入以下代码：

{{ content }}

在应用这个模板时，这一部分将会被替换成网页的文本。当然您也可以把标题标签改为以下代码，从而修改每个页面的标题。

现在我们来制作我们网站的首页，我们打开 index.html 文件为它添加 YAML 头：

---
layout: default
title: 示例网页
---

这里 title 是指您网站的标题。layout 则是指您需要使用的网页模板，即我们保存在 _layouts 文件夹中的内容。

您知道吗？

Jekyll 支持的是无BOM头的 UTF-8 格式的编码，如果您正在使用的是 Windows 操作系统自带的记事本来编辑网页，请注意这一点。

我们在 index.html 文件中添加以下代码，使其对应的按钮加亮显示。

这里我们用到了 JQuery ，请在模板 default.html 模板的 head 标签中添加对 JQuery 的引用。

您知道吗？

一般来说，我们习惯把所有的 JavaScript 脚本放在页面的最后。因为它往往会拖慢浏览器对网页的加载速度。然而在这里我们因为要在 index.html 中使用 JQuery 所以才将它放在 head 标签中的。您必须要在使用 JQuery 之前先加载它。也就是说您把它放在 {{ content }} 之前的任意位置都是可行的。

好了，您现在可以按照您自己的想法随心所欲的设计您的网页了。