出目標(biāo)文件

語法格式: gitbook build [book] [output]

默認(rèn)情況下,gitbook 輸出方式是靜態(tài)網(wǎng)站,其實 gitbook 的輸出方式有三種: website, json,和 ebook.

只不過另外兩種不是很常用,更多情況下我們是使用靜態(tài)網(wǎng)頁搭建個人官網(wǎng),或托管到第三方平臺,或部署到私有云服務(wù)器,但不管怎么樣,還是離不開生成這一步.

示例:

默認(rèn)情況下輸出目錄: _book/,整個項目的入口文件是: index.html

集成 github 網(wǎng)站

本教程的電子書源碼和輸出文件均托管到 github 網(wǎng)站,所以這里介紹下如何利用 Github Pages 靜態(tài)網(wǎng)頁服務(wù)與 gitbook 進(jìn)行集成.

什么是 GitHub Pages ?

Github Pages 是 github 網(wǎng)站推出的一種免費的靜態(tài)網(wǎng)頁托管服務(wù),適合搭建靜態(tài)的項目主頁或個人官網(wǎng).

其中,網(wǎng)站項目的源碼直接托管在 github 倉庫中,當(dāng)倉庫文件更新后,該倉庫所關(guān)聯(lián)的網(wǎng)站自動更新,從而實現(xiàn)了源碼與官網(wǎng)的聯(lián)動更新.

如果想了解更多詳情,請參考官網(wǎng): https://pages.github.com/

怎么做 GitHub Pages ?

每個賬號有且只有一個主頁站點,但允許無限制多的項目站點.

啥是主頁站點,項目站點又是啥?

別急,讓我先舉個例子看一下最終效果.

假如用戶名: zhangsan 名下有四個公開倉庫,一個倉庫名叫做: zhangsan.github.io,另外三種分別是: project01,project02,project03 .

如果想要對外暴露上述四個倉庫作為我們的靜態(tài)網(wǎng)站,那么最終效果就是下面這樣的.

• 主頁站點:
• https://zhangsan.github.io
• 項目01站點:
• https://zhangsan.github.io/project01
• 項目02站點:
• https://zhangsan.github.io/project02
• 項目03站點:
• https://zhangsan.github.io/project03

注意將 zhangsan 替換成自己的 github 用戶名,否則八成是打不開網(wǎng)站,除非真的有 zhangsan 這個用戶.

其實上述規(guī)則很好理解,github 網(wǎng)站作為一個托管中心,有成千上萬的用戶在使用 github 并且每個用戶的用戶名都是唯一并且不同的,因此 *.github.io 通配符域名剛好充當(dāng)命名空間.

可以預(yù)料的是,不僅僅有 <username>.github.io 這種二級域名,說不定還有 api.github.io,docs.github.io 等等,畢竟只需要購買 *.github.io 通配符域名證書就可以支持任意多的二級域名了,感謝 github 贈送我們免費的 https 網(wǎng)站.

說到這里,不得不吐槽下 gitbook 的命名空間策略了,gitbook 也有自己的電子書托管服務(wù),但訪問地址是 <username>.gitbook.io/<namespace> .

很顯然,gitbook 沒有區(qū)分主頁站點和項目站點,相當(dāng)于全部都是項目站點,缺少主次之分.

閑言少敘,既然知道了輸入內(nèi)容和輸出效果,那么接下來的任務(wù)就是了解中間過程了,讓我們一起探討下怎么發(fā)布網(wǎng)站吧!

主頁站點

創(chuàng)建 <username>.github.io 公開倉庫

前往 https://github.com/ 網(wǎng)站創(chuàng)建名為 <username>.github.io 的公開倉庫.

比如我的用戶名是: snowdreams1006 ,那么我的主頁站點倉庫就是: snowdreams1006.github.io

創(chuàng)建首頁 index.html 文件

不管是在線直接創(chuàng)建 index.html 還是克隆到本地創(chuàng)建 index.html ,最終的 <username>.github.io 倉庫一定要有 index.html 首頁文件.

示例:

訪問主頁站點 https://username.github.io

打開瀏覽器,輸入網(wǎng)址: https://username.github.io 訪問主頁站點,顯示的內(nèi)容正是我們剛剛提交的 index.html 文件內(nèi)容.

如果沒有正常顯示,清除瀏覽器緩存強制刷新試試看!

項目站點

相比主頁站點來說,項目站點命名比較隨意了,作為靜態(tài)網(wǎng)站不可或缺的文件仍然是 index.html.

創(chuàng)建首頁 index.html 文件

創(chuàng)建首頁文件并添加測試內(nèi)容,方便待會在線訪問項目站點測試是否部署成功.

設(shè)置 GitHub Pages 選項

點擊倉庫首頁右上方設(shè)置(Settings)選項卡,往下翻到 GitHub Pages 選項,選擇源碼目錄,根據(jù)實際情況選擇源碼來源于 master 分支還是其他分支或者docs/ 目錄.

方便起見,選擇第一個 master 分支即可,注意下面的主題和這一步的來源只能兩者選其一,否則主題優(yōu)先級更高!

訪問主頁站點 https://username.github.io/<repository>

打開瀏覽器,輸入網(wǎng)址: https://username.github.io/repository 訪問項目站點,顯示的內(nèi)容正是我們剛剛提交的 index.html 文件內(nèi)容.

如果沒有正常顯示,清除瀏覽器緩存強制刷新試試看!

如何集成 gitbook ?

我們已經(jīng)知道 Github Pages 是提供靜態(tài)網(wǎng)站的免費托管,而 gitbook 默認(rèn)生成的內(nèi)容就是靜態(tài)網(wǎng)站,兩者如何結(jié)合自然不用我多說了吧?

gitbook 默認(rèn)輸出目錄 _book/ 包括了靜態(tài)網(wǎng)站所需的全部資源,其中就包括 index.html 首頁文件.

因此我們只需要每次生成后將 _book/ 整個目錄復(fù)制到項目根目錄,那么推送到遠(yuǎn)程倉庫時自然就是輸出后靜態(tài)網(wǎng)站了啊!

示例:

現(xiàn)在登錄 github 網(wǎng)站看一下靜態(tài)網(wǎng)站是否成功上傳以及訪問主頁站點或項目站點看一下最新內(nèi)容是否成功渲染吧!

小結(jié)

本節(jié)我們學(xué)習(xí) gitbook 有三種輸出方式,其中默認(rèn)的網(wǎng)頁輸出最為常用.

除此之外,還講解了如何與 github pages 進(jìn)行結(jié)合,從而實現(xiàn)源碼和網(wǎng)站的自動更新維護(hù).

如果源碼沒有托管到 github 這種第三方服務(wù)商,你也可以搭建自己的服務(wù)器,比如將 _book/ 目錄全部扔到 nginx 服務(wù)器做靜態(tài)資源服務(wù)器等.

畢竟,源碼和輸出內(nèi)容都在你手中,想怎么玩還不是自己說了算?

TML

本文，有很多很棘手的問題，例如使用sublime 編輯器可能安裝插件的時候會使用不了view in browser我公司的電腦可以安裝、結(jié)果家里的電腦就報編碼錯誤、需要改sublime插件源代碼解碼成utf8就可以了、還有一直連不上packagecontrol的網(wǎng)頁，可以群（526929231）使勁砸我得到解決~ sublime編輯器對于前端來說確實很好用！很好用！很好用！ SublimeText、Webstorm推薦這兩個編輯器

HTML起源

剛開始設(shè)計HTML語言是為了將文字圖像關(guān)聯(lián)在一起，用另一臺發(fā)送或接收

HTML(HyperTextMark-up Language)超文本標(biāo)記語言

HTML 不是一種編程語言，而是一中標(biāo)記語言(mark-up language),標(biāo)記語言是一套標(biāo)記標(biāo)簽(mark-up tag)

HTML標(biāo)簽

標(biāo)簽是由尖括號 < > 把關(guān)鍵詞括起來，標(biāo)簽通常是成對出現(xiàn)的

Web瀏覽器

讀取 HTML 文檔，使用標(biāo)簽來解析頁面的內(nèi)容，以網(wǎng)頁的形式現(xiàn)實，瀏覽器不會現(xiàn)實HTML標(biāo)簽

現(xiàn)在市場上主流五大瀏覽器

每種瀏覽器都有自己的內(nèi)核(引擎)（解析網(wǎng)頁的一個程序，io以什么方式去渲染它都要通過引擎去執(zhí)行）

目前主流的瀏覽器分為五種

• Chrome谷歌瀏覽器 （Webkit內(nèi)核，V8 js引擎）

• Firefox火狐瀏覽器 （Gecko內(nèi)核）

• Internet Explorer IE瀏覽器（ Trident內(nèi)核）

• Opera 歐朋瀏覽器 （Presto內(nèi)核） 主要市場：移動端

• Safari 蘋果瀏覽器 （Webkit內(nèi)核，但JS引擎為Nitro）

  不需要去記，簡單了解下

標(biāo)簽使用規(guī)范

1. 標(biāo)簽必須閉合

2. 所有標(biāo)簽名一律小寫

3. 代碼縮進(jìn)，使閱讀代碼更加易懂

4. 特殊符號規(guī)范使用

5. 命名規(guī)范，見名之意

PS: 所有的標(biāo)記符號都是半角英文

編輯器

眾說紛紜編輯器太多，最終只是一個工具，希望同學(xué)們能從萬千世界中找到適合自己的編輯器伙伴

Sublime插件列表

注：Github 網(wǎng)頁中 下面是有詳細(xì)的使用方法 packagecontrol.io官網(wǎng) 里面search 可以進(jìn)行搜索插件名字來找到具體使用方法，還有什么不懂或者安裝出現(xiàn)編碼錯誤以及安裝不上的可以拍打我~

模板的配置

HTML模板

簡單了解，并不需要熟練掌握

HTML樹狀結(jié)構(gòu)

Dom節(jié)點樹

HTML網(wǎng)頁擴展名

.html .htm這兩種是比較常見的

在早期系統(tǒng)中文件名是有8+3組成 三個擴展名所以不支持四個字母的擴展采用.htm

現(xiàn)在通常使用.html作為擴展名

標(biāo)簽的學(xué)習(xí)

接下來所有的標(biāo)簽元素學(xué)習(xí)都在body標(biāo)簽里面去敲打?qū)崿F(xiàn)、

H標(biāo)簽

為了突出標(biāo)題，字體大小和加粗發(fā)生相應(yīng)的改變

<h1>我是大主題</h1>
<h2>我是大主題</h2>
<h3>我是大主題</h3>
<h4>我是大主題</h4>
<h5>我是大主題</h5>
<h6>我是大主題</h6>

<!doctype html><!-- 讓瀏覽器使用html5的標(biāo)準(zhǔn)解析 -->
<html>
 <head>
 <!-- 設(shè)置字符編碼集讓瀏覽器使用utf8解析當(dāng)前網(wǎng)頁 -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <meta name="keywords" content="SEO搜索引擎，關(guān)鍵詞，多個請用逗號分開" />
 <meta name="description" content="網(wǎng)頁描述，八十字內(nèi)" />
 <title>瀏覽器標(biāo)簽頁上的網(wǎng)頁標(biāo)題</title>
 </head>
 <body> <!-- 所有的標(biāo)簽學(xué)習(xí)都在這body里面去敲，上面head元素里面的內(nèi)容做個了解就可以了 -->
 
 <h1>我是大標(biāo)題</h1>
 <h2>我是主題2</h2>
 <h3>我是主題3</h3>
 <h4>我是主題4</h4>
 <h5>我是主題5</h5>
 <h6>我是主題6</h6>
 
 </body>
</html>

可以發(fā)現(xiàn)h標(biāo)簽從h1到h6會隨著數(shù)值越小字越小，并且都是會加粗和各占一行的狀態(tài)（前后的元素都會被換行）

h1標(biāo)簽一般一個頁面里面只會寫一次，為了讓搜索引擎爬取到 (寫一次利于SEO搜索引擎優(yōu)化)

p段落標(biāo)簽

<p>
 冬著一身素衣，緩緩而來，季節(jié)沒有了往日的姹紫嫣紅，卻用簡單的線條，勾勒出一幅潔白的畫，純潔通透，輕盈自然。
</p>

特殊符號

剛我們了解到了瀏覽器是識別尖括號的，如果要在頁面中顯示html標(biāo)記那要怎么做呢？這時候就需要特殊符號的表示來顯示

加粗標(biāo)簽

<b>物理加粗，頁面呈現(xiàn)加粗狀態(tài).</b>

<strong>不僅能加粗，還利于搜索引擎優(yōu)化，就是類似于百度、谷歌這種搜索引擎爬取你的網(wǎng)頁的時候會查找這個標(biāo)簽里面的內(nèi)容來優(yōu)化顯示網(wǎng)頁的排名</strong>

可以根據(jù)word文檔上面發(fā)現(xiàn) b是加粗 u是下劃線 i是傾斜 同樣適用于標(biāo)簽

<i>我是傾斜</i> <u>我加了下劃線</u>

A標(biāo)簽

• 鏈接一個頁面,點擊則會跳轉(zhuǎn)這個鏈接頁面

• 使用錨點滾動到設(shè)定的位置

<a href=""></a> a標(biāo)簽中的href控制點擊的時候跳轉(zhuǎn)到哪里如果沒寫表示刷新當(dāng)前頁面


<a href="#"></a> 跳轉(zhuǎn)到當(dāng)前頁面(回歸到頁面頂部)


<a href="javascript： void(0);"></a> 死鏈接，不會跳轉(zhuǎn)，一般用于js特效


<a href="#name">錨點到一個標(biāo)簽上所對應(yīng)的ID名字，點擊則跳到那個標(biāo)簽位置</a>


<a >跳轉(zhuǎn)到百度</a> 跳轉(zhuǎn)到百度 需要注意的是 http 協(xié)議不能少

點擊#flag的a標(biāo)簽的時候會跳到到上面h2標(biāo)簽

只有擁有name屬性的

a標(biāo)簽

才能錨點,還有一種方式是通過ID標(biāo)識唯一元素，也可以跳轉(zhuǎn)(不僅僅是a標(biāo)簽)

補充標(biāo)簽

滾動標(biāo)簽

marquee

behivior

Font標(biāo)簽

hr水平線

與font相似，擁有color和size屬性

hr標(biāo)簽沒有結(jié)束標(biāo)簽 按照早期的習(xí)慣也H5也遵循XHTML的解析 所以統(tǒng)一會加一個反斜杠表示結(jié)束這個標(biāo)簽，不加也能夠正確顯示，但是養(yǎng)成一個良好的習(xí)慣確實重要，比如微信小程序就是沒有結(jié)束標(biāo)簽必須要使用一個反斜杠結(jié)尾否則直接報錯、

練習(xí)一、

結(jié)合今天所學(xué)，寫一個簡單的網(wǎng)頁

內(nèi)容如下：

• 寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫，網(wǎng)上一大把哈哈，可以自己寫下，鍛煉下思維

• 需要包括h、p、a、加粗

• 題材不限，至少200字

練習(xí)二、

在習(xí)題一的文章底部，使用滾動標(biāo)簽進(jìn)行滾動方向為45°

可以在頭部找到我，如有勘誤、錯別字、盡情見諒很用心的檢查了 碼了這么久

們會有這種需求，看到有個網(wǎng)站很多文章內(nèi)容不錯，想把它們?nèi)勘４嫦聛碓谑謾C上或電腦上有空看，但是不想聯(lián)網(wǎng)看，或者我們想在公司內(nèi)網(wǎng)搭個網(wǎng)站，和這個網(wǎng)站內(nèi)容一模一樣，方便公司人員閱讀，這時候我們?nèi)绾巫鲞@個網(wǎng)站的鏡像呢？

網(wǎng)上當(dāng)然有很多工具能用，但很多都是收費的，我們考慮一個免費小巧的工具來實現(xiàn)我們的要求，那就是Linux上一個有名的工具wget。

一、用WGET做網(wǎng)站鏡像

這個工具有windows版本，網(wǎng)上搜一下wget for windows，找到合適地址下載。

因為我是64位系統(tǒng)，所以下載了上面標(biāo)紅的地址

下載下來后，為了能在命令行中方便使用，我把它放到了C:\Windows\System32目錄下（如果你會設(shè)置環(huán)境變量可以設(shè)置上，你也可以用cd命令切換到wget所在目錄操作）。

把wget.exe放到C:\Windows\System32以方便命令行使用

我們WIN+R，輸入cmd進(jìn)入到命令行界面

輸入wget -h看下幫助信息

wget的命令行參數(shù)太多了，我們只考慮做網(wǎng)站鏡像的有用參數(shù)。

標(biāo)紅的即為做鏡像的參數(shù)

我們來看一個學(xué)習(xí)編程的網(wǎng)站w3school

假如我們想做這個網(wǎng)站的鏡像怎么辦呢？

直接用wget -m http://www.w3school.com.cn/

這種是最簡單暴力的用法，但是如果網(wǎng)站引用了外部的鏈接，這個下載下來的東西太多了，而且有些asp后綴的頁面，我們?nèi)绻朐诒镜赜脼g覽器打開看沒法直接打開，而且有時候我們可能只想下載某個網(wǎng)站目錄下的文件，不想下載太多。

我們需要限制下。

我們用-np參數(shù)來限制只拉取當(dāng)前目錄不拉取父目錄的網(wǎng)址數(shù)據(jù)

我們用-k參數(shù)鏈接指向本地，便于瀏覽

我們用-p參數(shù)讓圖片等信息需要來展示在HTML上的我們?nèi)螺d

假如我們只想下載w3school上的JS教程，我們用如下命令即可：

wget -m -k -np -p http://www.w3school.com.cn/js/index.asp

但是這個命令還是缺少一些東西，比如后綴有ASP，其它的還有斷點續(xù)傳，文件后綴，模擬瀏覽器，https下是否檢查證書等。

我們最后總結(jié)下最合適的鏡像網(wǎng)站語法，假如想對網(wǎng)站http://www.XXXX.com做鏡像，而且做出來的鏡像方便本地瀏覽器直接打開查看，用如下命令：

wget -c -m -k -np -p -E -U Mozilla --no-check-certificate http://www.XXXX.com

二、WGET做鏡像演示

我們先實際操作一下，我們下載下JS的教程.。

wget -c -m -k -np -p -E -U Mozilla --no-check-certificate http://www.w3school.com.cn/js/index.asp

下載中……

下載完成

鏡像放在單獨的目錄，以網(wǎng)址命名

網(wǎng)站目錄結(jié)構(gòu)

我們用瀏覽器直接雙擊打開上面標(biāo)紅的index.asp.html，如下圖：

我們在左側(cè)標(biāo)紅區(qū)域點擊，跳轉(zhuǎn)到的頁面還是本地

測試看來，我們成功的鏡像了JS教程的頁面，而且頁面顯示完好。

總結(jié)：最終用到的命令如下：

wget -c -m -k -np -p -E -U Mozilla --no-check-certificate 欲鏡像的網(wǎng)址

你也可以用一些CHM制作軟件把鏡像完的本地HTML制成CHM格式的教程發(fā)布出去。

如果你想進(jìn)行限速，間隔下載等特殊需求可以網(wǎng)上查找下wget的命令幫助進(jìn)行解決，這個比較簡單，就不一一介紹了。

如果命令語法在實際測試中有問題，歡迎提出建議。