精品国产人成在线_亚洲高清无码在线观看_国产在线视频国产永久2021_国产AV综合第一页一个的一区免费影院黑人_最近中文字幕MV高清在线视频

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

推薦十大開源的靜態網站生成工具,無須掌握HTML和CSS技能

如意 ? 來源:Linux中國 ? 作者:Xiaobin.Liu 譯 ? 2020-10-10 11:21 ? 次閱讀

在尋找部署靜態網頁的方法嗎?這幾個開源的靜態網站生成工具可以幫你迅速部署界面優美、功能強大的靜態網站,無需掌握復雜的 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 頁面 了解更多信息。

結語

還有很多文章中沒有列出的網站生成工具。然而,我試圖提到最好的靜態生成器,為您提供最快的加載時間,最好的安全性和令人印象深刻的靈活性。
責編AJX

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 開發工具
    +關注

    關注

    0

    文章

    209

    瀏覽量

    22240
  • 網站
    +關注

    關注

    1

    文章

    258

    瀏覽量

    23147
  • CSS
    CSS
    +關注

    關注

    0

    文章

    109

    瀏覽量

    14354
收藏 人收藏

    評論

    相關推薦

    誰成就了智能家居“十大”品牌

    網站到是做得漂亮,上邊一個蘿卜一個坑的把“十大”品牌給一一定好,下邊就用微小的文字交替代此行為不代表本網站觀點,這叫用自己的嘴引用別人的話,別人是誰不知道,就是“有人這樣說過”。 事已至此,若是對“誰
    發表于 10-06 11:10

    成都WEB技術培訓及WEB前端開發培訓

    使用PS切圖,使用Axure與Mockups設計原型圖和交互設計圖4 Web前端技術基礎 掌握HTMLCSS基礎技術5 網站后臺技術 掌握
    發表于 10-26 15:05

    Java程序員必逛的十大學習網站

    Java程序員每周必逛的十大學習網站
    發表于 06-17 11:09

    聊聊合格電氣自動化工程師必備十大技能

    很多年輕的朋友在四處求教如何才能成為一個合格的電氣自動化工程師,本文以圖文形式和大家聊聊合格電氣自動化工程師必備十大技能。1、電路電路對于普通電氣工程師來說真的很難!既然我們工控屬于應用型,都是直接那產品來用,掌握基本原理,至于
    發表于 09-08 08:15

    靜態網頁設計教程,下載

    靜態網頁設計教程 1.了解靜態網頁的特征及存取原理; 2. 了解HTML中各種標記的用法; 3.  掌握靜態網頁設計的基本
    發表于 04-28 16:37 ?0次下載

    十大電子行業網站及調查比較

    就我收集的十大電子行業網站列出來供大家分享。
    發表于 07-04 16:53 ?5850次閱讀
    <b class='flag-5'>十大</b>電子行業<b class='flag-5'>網站</b>及調查比較

    HTML5+CSS3在觸屏網站上的實踐

      純HTML5+CSS3方案:語義化更好,性能更優   混合方案:兼容性好,部分特效實現較復雜
    發表于 09-14 10:42 ?11次下載
    <b class='flag-5'>HTML5+CSS</b>3在觸屏<b class='flag-5'>網站</b>上的實踐

    基于響應式Web設計的HTML5和CSS3實際案例

    本文主要講述基于響應式Web設計的HTML5和CSS3實際案例,軟件開發工程師可以多學習其中的長處。
    發表于 09-14 11:42 ?6次下載

    幾款實用的HTML5/CSS3應用

    1、HTML5像素文字爆炸重組動畫特效 HTML5可以把文字效果做得非常酷,就像之前分享的HTML5/CSS3發光文字和HTML5/
    發表于 09-26 17:04 ?2次下載
    幾款實用的<b class='flag-5'>HTML</b>5/<b class='flag-5'>CSS</b>3應用

    網頁設計語言教程(HTML_CSS

    本書是網頁設計語言系列教材之《HTML/CSS教程》。 本教材通過大量典型實例介紹了HTML的基本知識,如何建立超級鏈接,如何插入圖形,如何建立框架、表單的使用,以及CSS語法定義及嵌
    發表于 11-24 10:25 ?0次下載
    網頁設計語言教程(<b class='flag-5'>HTML_CSS</b>)

    學習HTMLCSS的5大理由

    人們學習HTMLCSS最常見的原因是開始從事web開發。但并不是只有web開發人員才要學習HTMLCSS的核心技術。作為一個網絡用戶,你需要你
    發表于 04-12 17:24 ?4404次閱讀

    一名合格的HTML5開發工程師需要掌握哪些知識

    HTML5開發不同于網頁設計,是網頁設計的深化,更關注于網站如何交互和瀏覽。web前端開發人員使用的技術CSSHTML、JavaScript,根據設計師設計的雛形來編寫代碼。布局,框
    的頭像 發表于 04-17 16:29 ?3888次閱讀

    CSS555 EEPROM編程器開源分享

    電子發燒友網站提供《CSS555 EEPROM編程器開源分享.zip》資料免費下載
    發表于 11-02 09:27 ?0次下載
    <b class='flag-5'>CSS</b>555 EEPROM編程器<b class='flag-5'>開源</b>分享

    常用HTML、CSS那你知道ASP.NET嗎?

    簡單來說,ASP.NET 是一個使用 HTML、CSS、JavaScript 和服務器腳本創建網頁和網站的開發框架。 眾所周知,目前PHP和ASP.NET是最主流的使用最多的Web網站
    的頭像 發表于 03-29 11:12 ?951次閱讀

    VitePress 1.0正式發布:基于Vite與Vue構建的靜態網站生成

    VitePress允許用戶通過Markdown編輯內容,應用特定的主題并生成易于部署的靜態HTML頁面。值得注意的是,VitePress不僅僅適用于文檔制作領域,還能用于博客、檔案及營銷型網站
    的頭像 發表于 03-22 14:49 ?901次閱讀