现在就让我们开始着手把我们的宣传网站配置到 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 文件夹就是为了保存我们的模板页面的文件夹。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="HTML, CSS, XML, JavaScript, Front-end">
<meta name="author" content="刘祺">
<title>Yevgeny Liu</title>
<link rel="stylesheet" href="/css/foundation.min.css">
<link rel="stylesheet" href="/css/style-header.css">
</head>
<body>
<header>
<h1>Liu's Homepage</h1>
<ul>
<li><a href="#" id="sub_index">Index</a></li>
<li><a href="#" id="sub_works">Works</a></li>
<li><a href="#" id="sub_notes">Notes</a></li>
<li><a href="#" id="sub_resume">Resume</a></li>
</ul>
</header>
<script>
$(document).foundation();
</script>
</body>
</html>
记得把之前的样式标签整理成一个 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 }}
在应用这个模板时，这一部分将会被替换成网页的文本。当然您也可以把标题标签改为以下代码，从而修改每个页面的标题。
<title>{{ page.title }}</title>
现在我们来制作我们网站的首页，我们打开 index.html 文件为它添加 YAML 头：
---
layout: default
title: 示例网页
---
这里 title 是指您网站的标题。layout 则是指您需要使用的网页模板，即我们保存在 _layouts 文件夹中的内容。
您知道吗？
Jekyll 支持的是无BOM头的 UTF-8 格式的编码，如果您正在使用的是 Windows 操作系统自带的记事本来编辑网页，请注意这一点。
我们在 index.html 文件中添加以下代码，使其对应的按钮加亮显示。
<script>
$(document).ready(function(){
$("#sub_index").addClass("is-active");
});
</script>
这里我们用到了 JQuery ，请在模板 default.html 模板的 head 标签中添加对 JQuery 的引用。
<script src="/js/jquery-3.2.1.min.js"></script>
您知道吗？
一般来说，我们习惯把所有的 JavaScript 脚本放在页面的最后。因为它往往会拖慢浏览器对网页的加载速度。然而在这里我们因为要在 index.html 中使用 JQuery 所以才将它放在 head 标签中的。您必须要在使用 JQuery 之前先加载它。也就是说您把它放在 {{ content }} 之前的任意位置都是可行的。
好了，您现在可以按照您自己的想法随心所欲的设计您的网页了。
网友评论