現(xiàn)在就讓我們開(kāi)始著手把我們的宣傳網(wǎng)站配置到 GitHub Pages 斋竞。當(dāng)然 GitHub Pages 是基于 GitHub 的焚辅。（廢話）所以您最好對(duì) GitHub/Git 有一些了解隧熙。也就是說(shuō)筆者不必要給您講解如何注冊(cè)一個(gè) Github 的賬號(hào)杖小，如果您使用的是 Windows 或 Mac奶赔，筆者也不需要帶著您安裝 GitHub Desktop。那么記得給我們的網(wǎng)站建立一個(gè)項(xiàng)目根目錄痰滋，并且對(duì)它進(jìn)行初始化（git init）摘能。
您知道嗎？
gh-pages 是 GitHub Pages 的默認(rèn)分支即寡。所以有些人認(rèn)為如果想使用 GitHub Pages 就必須建立一個(gè)沒(méi)有父節(jié)點(diǎn)的 gh-pages 分支徊哑。不過(guò)實(shí)際上是不是要建立一個(gè) gh-pages 分支這一點(diǎn)隨您自己的喜歡。您可以在設(shè)置（Settings）里面修改 GitHub Pages 的分支聪富。
好了，在您的項(xiàng)目根目錄中建立以下這些文件和文件夾著蟹。
文件夾：_data墩蔓、 _drafts梢莽、 _includes、 _layouts奸披、 _posts 和 _site
文件：_config.yml 和 index.html
暫時(shí)我們只會(huì)用到 _layouts 這個(gè)文件夾以及 _config.yml 和 index.html 這兩個(gè)文件昏名。所以其他文件夾等到我們用到的時(shí)候再說(shuō)。在 _config.yml 這個(gè)文件夾中填入以下代碼：
baseurl: /您的項(xiàng)目根目錄
譬如說(shuō)筆者的項(xiàng)目根目錄叫做 mypage阵面，所以對(duì)應(yīng)的代碼就是：
baseurl: /mypage
至于 index.html 則是首頁(yè)的文件轻局，我們暫時(shí)先不去管它。我們現(xiàn)在先來(lái)把之前做的網(wǎng)頁(yè)模板整理好样刷。由于 GitHub Pages 目前并不支持 CDN 仑扑，您需要下載 Foundation6 和 jQuery ，借此機(jī)會(huì)我們順便來(lái)整理一下我們之前寫的網(wǎng)頁(yè)模板置鼻。
在根目錄下建立分別建立名為 css 和 js 的文件夾镇饮，其中 css 文件夾用來(lái)保存 層疊樣式表文件（css文件），js 文件夾用來(lái)保存 JavaScript 腳本文件（js文件）箕母。
在 _layouts 文件夾中把我們之前做好的模板網(wǎng)頁(yè)拷貝進(jìn)來(lái)储藐，并進(jìn)行整理。命名為： default.html嘶是。_layouts 文件夾就是為了保存我們的模板頁(yè)面的文件夾钙勃。
<!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>
記得把之前的樣式標(biāo)簽整理成一個(gè) 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 中您可以通過(guò)打開(kāi)實(shí)時(shí)視圖來(lái)調(diào)整您的代碼。
在 header 標(biāo)簽之后加入以下代碼：
{{ content }}
在應(yīng)用這個(gè)模板時(shí)聂喇，這一部分將會(huì)被替換成網(wǎng)頁(yè)的文本辖源。當(dāng)然您也可以把標(biāo)題標(biāo)簽改為以下代碼，從而修改每個(gè)頁(yè)面的標(biāo)題授帕。
<title>{{ page.title }}</title>
現(xiàn)在我們來(lái)制作我們網(wǎng)站的首頁(yè)同木，我們打開(kāi) index.html 文件為它添加 YAML 頭：
---
layout: default
title: 示例網(wǎng)頁(yè)
---
這里 title 是指您網(wǎng)站的標(biāo)題。layout 則是指您需要使用的網(wǎng)頁(yè)模板跛十，即我們保存在 _layouts 文件夾中的內(nèi)容彤路。
您知道嗎？
Jekyll 支持的是無(wú)BOM頭的 UTF-8 格式的編碼芥映，如果您正在使用的是 Windows 操作系統(tǒng)自帶的記事本來(lái)編輯網(wǎng)頁(yè)洲尊，請(qǐng)注意這一點(diǎn)。
我們?cè)?index.html 文件中添加以下代碼奈偏，使其對(duì)應(yīng)的按鈕加亮顯示坞嘀。
<script>
$(document).ready(function(){
$("#sub_index").addClass("is-active");
});
</script>
這里我們用到了 JQuery ，請(qǐng)?jiān)谀０?default.html 模板的 head 標(biāo)簽中添加對(duì) JQuery 的引用惊来。
<script src="/js/jquery-3.2.1.min.js"></script>
您知道嗎丽涩？
一般來(lái)說(shuō)，我們習(xí)慣把所有的 JavaScript 腳本放在頁(yè)面的最后。因?yàn)樗鶗?huì)拖慢瀏覽器對(duì)網(wǎng)頁(yè)的加載速度矢渊。然而在這里我們因?yàn)橐?index.html 中使用 JQuery 所以才將它放在 head 標(biāo)簽中的继准。您必須要在使用 JQuery 之前先加載它。也就是說(shuō)您把它放在 {{ content }} 之前的任意位置都是可行的矮男。
好了移必，您現(xiàn)在可以按照您自己的想法隨心所欲的設(shè)計(jì)您的網(wǎng)頁(yè)了。
