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