整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
尋找部署靜態(tài)網(wǎng)頁(yè)的方法嗎？這幾個(gè)開源的靜態(tài)網(wǎng)站生成工具可以幫你迅速部署界面優(yōu)美、功能強(qiáng)大的靜態(tài)網(wǎng)站，無需掌握復(fù)雜的 HTML 和 CSS 技能。
? 來源：linux.cn ? 作者：Ankush Das ? 譯者：Xiaobin.Liu ?
（本文字?jǐn)?shù)：3396，閱讀時(shí)長(zhǎng)大約：5 分鐘）
在尋找部署靜態(tài)網(wǎng)頁(yè)的方法嗎？這幾個(gè)開源的靜態(tài)網(wǎng)站生成工具可以幫你迅速部署界面優(yōu)美、功能強(qiáng)大的靜態(tài)網(wǎng)站，無需掌握復(fù)雜的 HTML 和 CSS 技能。
技術(shù)上來講，靜態(tài)網(wǎng)站是指網(wǎng)頁(yè)不是由服務(wù)器動(dòng)態(tài)生成的。HTML、CSS 和 JavaScript 文件就靜靜地躺在服務(wù)器的某個(gè)路徑下，它們的內(nèi)容與終端用戶接收到的版本是一樣的。原始的源碼文件已經(jīng)提前編譯好了，源碼在每次請(qǐng)求后都不會(huì)變化。
Linux.CN 是一個(gè)依賴多個(gè)數(shù)據(jù)庫(kù)的動(dòng)態(tài)網(wǎng)站，當(dāng)有瀏覽器的請(qǐng)求時(shí)，網(wǎng)頁(yè)就會(huì)生成并提供服務(wù)。大部分網(wǎng)站是動(dòng)態(tài)的，你與這些網(wǎng)站互動(dòng)時(shí)，大量的內(nèi)容會(huì)經(jīng)常改變。
靜態(tài)網(wǎng)站有一些好處，比如加載時(shí)間更短，請(qǐng)求的服務(wù)器資源更少、更安全（值得商榷）。
傳統(tǒng)上，靜態(tài)網(wǎng)站更適合于創(chuàng)建只有少量網(wǎng)頁(yè)、內(nèi)容變化不頻繁的小網(wǎng)站。
然而，隨著靜態(tài)網(wǎng)站生成工具出現(xiàn)后，靜態(tài)網(wǎng)站的適用范圍越來越大。你還可以使用這些工具搭建博客網(wǎng)站。
我整理了幾個(gè)開源的靜態(tài)網(wǎng)站生成工具，這些工具可以幫你搭建界面優(yōu)美的網(wǎng)站。
請(qǐng)注意，靜態(tài)網(wǎng)站不會(huì)提供很復(fù)雜的功能。如果你需要復(fù)雜的功能，那么你可以參考適用于動(dòng)態(tài)網(wǎng)站的 最佳開源 CMS 列表。
1、Jekyll
Jekyll 是用 Ruby 寫的最受歡迎的開源靜態(tài)生成工具之一。實(shí)際上，Jekyll 是 GitHub 頁(yè)面 的引擎，它可以讓你免費(fèi)用 GitHub 托管網(wǎng)站。
你可以很輕松地跨平臺(tái)配置 Jekyll，包括 Ubuntu。它利用 Markdown 、 Liquid （模板語(yǔ)言）、HTML 和 CSS 來生成靜態(tài)的網(wǎng)頁(yè)文件。如果你要搭建一個(gè)沒有廣告或推廣自己工具或服務(wù)的產(chǎn)品頁(yè)的博客網(wǎng)站，它是個(gè)不錯(cuò)的選擇。
它還支持從常見的 CMS（ 內(nèi)容管理系統(tǒng)(Content management system)）如 Ghost、WordPress、Drupal 7 遷移你的博客。你可以管理永久鏈接、類別、頁(yè)面、文章，還可以自定義布局，這些功能都很強(qiáng)大。因此，即使你已經(jīng)有了一個(gè)網(wǎng)站，如果你想轉(zhuǎn)成靜態(tài)網(wǎng)站，Jekyll 會(huì)是一個(gè)完美的解決方案。你可以參考 官方文檔 或 GitHub 頁(yè)面 了解更多內(nèi)容。
2、Hugo
Hugo 是另一個(gè)很受歡迎的用于搭建靜態(tài)網(wǎng)站的開源框架。它是用 Go 語(yǔ)言 寫的。
它運(yùn)行速度快、使用簡(jiǎn)單、可靠性高。如果你需要，它也可以提供更高級(jí)的主題。它還提供了一些有用的快捷方式來幫助你輕松完成任務(wù)。無論是組合展示網(wǎng)站還是博客網(wǎng)站，Hogo 都有能力管理大量的內(nèi)容類型。
如果你想使用 Hugo，你可以參照它的 官方文檔 或它的 GitHub 頁(yè)面 來安裝以及了解更多相關(guān)的使用方法。如果需要的話，你還可以將 Hugo 部署在 GitHub 頁(yè)面或任何 CDN 上。
3、Hexo
Hexo 是一個(gè)有趣的開源框架，基于 Node.js 。像其他的工具一樣，你可以用它搭建相當(dāng)快速的網(wǎng)站，不僅如此，它還提供了豐富的主題和插件。
它還根據(jù)用戶的每個(gè)需求提供了強(qiáng)大的 API 來擴(kuò)展功能。如果你已經(jīng)有一個(gè)網(wǎng)站，你可以用它的 遷移 擴(kuò)展輕松完成遷移工作。
你可以參照 官方文檔 或 GitHub 頁(yè)面 來使用 Hexo。
4、Gatsby
Gatsby 是一個(gè)越來越流行的開源網(wǎng)站生成框架。它使用 React.js 來生成快速、界面優(yōu)美的網(wǎng)站。
幾年前在一個(gè)實(shí)驗(yàn)性的項(xiàng)目中，我曾經(jīng)非常想嘗試一下這個(gè)工具，它提供的成千上萬(wàn)的新插件和主題的能力讓我印象深刻。與其他靜態(tài)網(wǎng)站生成工具不同的是，你可以使用 Gatsby 生成一個(gè)網(wǎng)站，并在不損失任何功能的情況下獲得靜態(tài)網(wǎng)站的好處。
它提供了與很多流行的服務(wù)的整合功能。當(dāng)然，你可以不使用它的復(fù)雜的功能，或?qū)⑵渑c你選擇的流行 CMS 配合使用，這也會(huì)很有趣。你可以查看他們的 官方文檔 或它的 GitHub 頁(yè)面 了解更多內(nèi)容。
5、VuePress
VuePress 是由 Vue.js 支持的靜態(tài)網(wǎng)站生成工具，而 Vue.js 是一個(gè)開源的漸進(jìn)式 JavaScript 框架。
如果你了解 HTML、CSS 和 JavaScript，那么你可以無壓力地使用 VuePress。你應(yīng)該可以找到幾個(gè)有用的插件和主題來為你的網(wǎng)站建設(shè)開個(gè)頭。此外，看起來 Vue.js 的更新一直很活躍，很多開發(fā)者都在關(guān)注 Vue.js，這是一件好事。
你可以參照他們的 官方文檔 和 GitHub 頁(yè)面 了解更多。
6、Nuxt.js
Nuxt.js 使用了 Vue.js 和 Node.js，但它致力于模塊化，并且有能力依賴服務(wù)端而非客戶端。不僅如此，它的目標(biāo)是為開發(fā)者提供直觀的體驗(yàn)，并提供描述性錯(cuò)誤，以及詳細(xì)的文檔等。
正如它聲稱的那樣，在你用來搭建靜態(tài)網(wǎng)站的所有工具中，Nuxt.js 可以做到功能和靈活性兩全其美。他們還提供了一個(gè) Nuxt 線上沙盒 ，讓你不費(fèi)吹灰之力就能直接測(cè)試它。
你可以查看它的 GitHub 頁(yè)面 和 官方網(wǎng)站 了解更多。
7、Docusaurus
Docusaurus 是一個(gè)有趣的開源靜態(tài)網(wǎng)站生成工具，為搭建文檔類網(wǎng)站量身定制。它還是 Facebook 開源計(jì)劃 的一個(gè)項(xiàng)目。
Docusaurus 是用 React 構(gòu)建的。你可以使用所有的基本功能，像文檔版本管理、文檔搜索和翻譯大多是預(yù)先配置的。如果你想為你的產(chǎn)品或服務(wù)搭建一個(gè)文檔網(wǎng)站，那么可以試試 Docusaurus。
你可以從它的 GitHub 頁(yè)面 和它的 官網(wǎng) 獲取更多信息。
8、Eleventy
Eleventy 自稱是 Jekyll 的替代品，旨在以更簡(jiǎn)單的方法來制作更快的靜態(tài)網(wǎng)站。
它似乎很容易上手，而且它還提供了適當(dāng)?shù)奈臋n來幫助你。如果你想找一個(gè)簡(jiǎn)單的靜態(tài)網(wǎng)站生成工具，Eleventy 似乎會(huì)是一個(gè)有趣的選擇。
你可以參照它的 GitHub 頁(yè)面 和 官網(wǎng) 來了解更多的細(xì)節(jié)。
9、Publii
Publii 是一個(gè)令人印象深刻的開源 CMS，它能使生成一個(gè)靜態(tài)網(wǎng)站變得很容易。它是用 Electron 和 Vue.js 構(gòu)建的。如果有需要，你也可以把你的文章從 WorkPress 網(wǎng)站遷移過來。此外，它還提供了與 GitHub 頁(yè)面、Netlify 及其它類似服務(wù)的一鍵同步功能。
如果你利用 Publii 生成一個(gè)靜態(tài)網(wǎng)站，你還可以得到一個(gè)所見即所得的編輯器。你可以從 官網(wǎng) 下載它，或者從它的 GitHub 頁(yè)面 了解更多信息。
10、Primo
一個(gè)有趣的開源靜態(tài)網(wǎng)站生成工具，目前開發(fā)工作仍很活躍。雖然與其他的靜態(tài)生成工具相比，它還不是一個(gè)成熟的解決方案，有些功能還不完善，但它是一個(gè)獨(dú)特的項(xiàng)目。
Primo 旨在使用可視化的構(gòu)建器幫你構(gòu)建和搭建網(wǎng)站，這樣你就可以輕松編輯和部署到任意主機(jī)上。
你可以參照 官網(wǎng) 或查看它的 GitHub 頁(yè)面 了解更多信息。
還有很多文章中沒有列出的網(wǎng)站生成工具。然而，我試圖提到最好的靜態(tài)生成器，為您提供最快的加載時(shí)間，最好的安全性和令人印象深刻的靈活性。
列表中沒有你最喜歡的工具？在下面的評(píng)論中告訴我。
via: itsfoss.com
作者： Ankush Das 選題： lujun9972 譯者： lxbwolf 校對(duì)： wxy
本文由 LCTT 原創(chuàng)編譯， Linux中國(guó) 榮譽(yù)推出
多人學(xué)用python，用得最多的還是各類爬蟲腳本：有寫過抓代理本機(jī)驗(yàn)證的腳本，有寫過自動(dòng)收郵件的腳本，還有寫過簡(jiǎn)單的驗(yàn)證碼識(shí)別的腳本，那么我們今天就來總結(jié)下python爬蟲抓站的一些實(shí)用技巧。
對(duì)于靜態(tài)網(wǎng)頁(yè)的爬蟲不用多說大家也都知道，因?yàn)榕廊§o態(tài)網(wǎng)頁(yè)非常的簡(jiǎn)單，只要用requests直接把html爬取下來然后用正則表達(dá)式匹配就可以了。
相對(duì)于靜態(tài)網(wǎng)頁(yè)的簡(jiǎn)單，但是動(dòng)態(tài)網(wǎng)頁(yè)的就會(huì)相對(duì)而而言會(huì)復(fù)雜一下，而且現(xiàn)在互聯(lián)網(wǎng)的發(fā)展速度，動(dòng)態(tài)網(wǎng)頁(yè)是最多的，靜態(tài)網(wǎng)頁(yè)是比較少的，不過他有張良計(jì)，我有過墻梯。
動(dòng)態(tài)網(wǎng)頁(yè)的http請(qǐng)求分為兩種形式:
Get方法和post方法
如果知道一個(gè)網(wǎng)站的請(qǐng)求是形式，熟練使用F12開發(fā)者工具，里面查看network就可以了。
當(dāng)然了，并不是所有的網(wǎng)頁(yè)都是靠發(fā)送請(qǐng)求來得到數(shù)據(jù)的，也有非發(fā)送數(shù)據(jù)的動(dòng)態(tài)網(wǎng)頁(yè)。
對(duì)于這樣的網(wǎng)站，我們一般是用selenium來做模擬瀏覽器的行為，可以直接獲取瀏覽器渲染后的結(jié)果。不過selenium的速度比較慢。
所以無論網(wǎng)頁(yè)是靜態(tài)網(wǎng)頁(yè)還是動(dòng)態(tài)網(wǎng)頁(yè)都是方法爬取的，當(dāng)然了，很多網(wǎng)站是需要登錄和識(shí)別驗(yàn)證碼、反爬等，無論網(wǎng)站出什么樣的措施都是有應(yīng)對(duì)方法，關(guān)鍵在于你會(huì)不會(huì)。
多學(xué)習(xí)HTML5的小伙伴在學(xué)習(xí)的過程中都遇到過這樣的問題：為什么感覺能做出來的頁(yè)面，然而做起來卻總是諸多問題?千鋒廣州小編告訴你，其實(shí)這是正常現(xiàn)象，誰(shuí)也不能幾天就成為大師，你的實(shí)踐還太少了!練習(xí)多了，經(jīng)驗(yàn)多了，靜態(tài)網(wǎng)頁(yè)自然也就手到擒來。
靜態(tài)的網(wǎng)頁(yè)其實(shí)就是由兩部分組成，一個(gè)是底層結(jié)構(gòu)HTML，另外一個(gè)就是負(fù)責(zé)修飾結(jié)構(gòu)的CSS。其實(shí)書寫靜態(tài)網(wǎng)頁(yè)就像小時(shí)候過家家，首先得把需要的家庭成員找齊了，即首先考慮要做一個(gè)什么樣的網(wǎng)站，例如一個(gè)綜合類網(wǎng)站包括：搜索框、導(dǎo)航、文章類別模塊、文章標(biāo)題以及一部分廣告板塊;一個(gè)博客主頁(yè)包括：導(dǎo)航、文章縮略、文章搜索、文章導(dǎo)航以及沒有顯示但可能會(huì)有的評(píng)論區(qū)。
寫頁(yè)面的時(shí)候是有劇本的，這個(gè)劇本指網(wǎng)頁(yè)設(shè)計(jì)圖，或者某個(gè)現(xiàn)有網(wǎng)頁(yè)，建議大家在模仿網(wǎng)上現(xiàn)有網(wǎng)頁(yè)的時(shí)候利用瀏覽器自帶的截圖功能，把整個(gè)完整的頁(yè)面截取下來，QQ瀏覽器，360瀏覽器都可以做到。這樣的優(yōu)點(diǎn)在于可以利用PS自己一步步測(cè)量數(shù)據(jù)、切圖都做到親力親為，并且做到了頁(yè)面數(shù)據(jù)的精準(zhǔn)度，而不是隨意的給數(shù)據(jù)，或者是利用瀏覽器的F12功能查看原網(wǎng)頁(yè)的數(shù)據(jù)。
按照設(shè)計(jì)好的劇本接著就可以找對(duì)應(yīng)的成員了，例如百度網(wǎng)頁(yè)從上往下分為導(dǎo)航頭部、中間logo和表單、尾部二維碼和文字，相對(duì)來說頁(yè)面的整體布局是比較簡(jiǎn)單的，當(dāng)然還有很多不同類型的頁(yè)面，布局要復(fù)雜一些。
當(dāng)看到一個(gè)網(wǎng)頁(yè)時(shí)，需要在腦海當(dāng)中對(duì)頁(yè)面進(jìn)行一個(gè)簡(jiǎn)單的掃描，如果把頁(yè)面當(dāng)成一張紙，要怎么樣從大到小一點(diǎn)點(diǎn)分割。當(dāng)有了初步的認(rèn)識(shí)之后，就可以把這些東西轉(zhuǎn)化成HTML結(jié)構(gòu)，所有不同顏色的框框在寫的時(shí)候用的都是DIV。
從上往下，從大到小一點(diǎn)點(diǎn)先把某個(gè)模塊以不同的顏色色塊利用代碼堆積出來。保證大的模塊布局沒問題之后，在往里面放一些小的東西，比如圖片img、表單form input、文字、超鏈接a、列表ul li，這時(shí)候簡(jiǎn)單的頁(yè)面結(jié)構(gòu)就出來了。
接下來要把寫好的結(jié)構(gòu)進(jìn)行美化，不然頁(yè)面就會(huì)一團(tuán)亂麻，沒有美感，而網(wǎng)頁(yè)當(dāng)中潤(rùn)色部分是用CSS來做的。這個(gè)環(huán)節(jié)需要更加細(xì)心，例如百度首頁(yè)導(dǎo)航紅色框整體在綠色框的右邊，需要給紅色框添加float：right;紅色框里面文字的字號(hào)大小，字體，字體顏色，水平間距，垂直間距都需要一點(diǎn)點(diǎn)寫。如果在寫的過程中遇見了問題，可以借助Chrome瀏覽器的調(diào)試功能，哪里錯(cuò)了用箭頭點(diǎn)哪里，結(jié)構(gòu)看左邊，CSS看右邊，看看CSS屬性有沒有顯示，有沒有劃掉，有沒有黃色報(bào)錯(cuò)等等。
在做頁(yè)面時(shí)，需要大量的練習(xí)，才可以熟能生巧。一個(gè)頁(yè)面寫完之后，總結(jié)一下這個(gè)頁(yè)面在書寫過程中遇到了哪些問題，是怎么解決的，為什么這樣解決，深入思考這個(gè)模塊的這個(gè)效果可不可以用其他的方法來實(shí)現(xiàn)，以做到舉一反三。
千鋒廣州小編建議大家在HTML5的過程中輪與實(shí)踐要相結(jié)合，配合實(shí)戰(zhàn)項(xiàng)目講解網(wǎng)站頁(yè)面布局，一定要學(xué)好HTML、CSS，基礎(chǔ)打好了，才能更有信心面對(duì)之后的挑戰(zhàn)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
