文章目录

  • 一、为什么要用静态网站
  • 二、推荐
    • 1. Gatsby
    • 2. Next.js
    • 3. VuePress
    • 4. MkDocs
    • 5. Docsify
    • 6. GitBook
    • 7.docusaurus
    • 8. Jekyll
  • 三、总结

一、为什么要用静态网站

作为技术人,谁不想拥有一个自己的网站的呢?

一般市面上成熟的个人博客产品,比如wordpress,缺点是太重了。

太重的代价就是服务器配置不高就会比较卡,但是静态网站就没有这个问题,经过build出来的网页文件,可以放在任何地方,包括Github Pages、web服务器、CDN,服务器的成本一下子就省下来了。

二、推荐

1. Gatsby

https://www.gatsbyjs.com/

Gatsby 使开发人员能够使用基于 React 的框架和创新的数据层构建快速、安全且功能强大的网站,这使得将不同的内容、API 和服务集成到一个 Web 体验中非常简单。

2. Next.js

https://nextjs.org/

Next.js 是另一款极为热门的 React 混合框架。 它可以帮助您构建出色的文档站点,但并不着重于文档功能本身。

3. VuePress

https://vuepress.vuejs.org/

VuePress 由两部分组成:带有 Vue 驱动的主题系统和插件 API 的简约静态站点生成器 (opens new window),以及为编写技术文档而优化的默认主题。 它的创建是为了支持 Vue 自己的子项目的文档需求。

4. MkDocs

https://www.mkdocs.org/

MkDocs 是一个快速、简单、华丽的静态站点生成器,用于构建项目文档。 文档源文件用 Markdown 编写,并使用单个 YAML 配置文件进行配置。

5. Docsify

https://docsify.js.org/

docsify 即时生成您的文档网站。 与 GitBook 不同的是,它不会生成静态 html 文件。 相反,它会巧妙地加载和解析您的 Markdown 文件并将它们显示为网站。 要开始使用它,您需要做的就是创建一个 index.html 并将其部署在 GitHub Pages 上。

6. GitBook

https://www.gitbook.com/

GitBook 是一个现代文档平台,团队可以在其中记录从产品到内部知识库和 API 的所有内容。

7.docusaurus

https://www.docusaurus.io/

Docusaurus 是一款静态站点生成器。 可以搭建带有快速客户端导航的单页应用,充分利用了React让你的网站具有交互能力。 它提供了开箱即用的文档功能,不过也可用于搭建各种网站(个人网站,产品,博客,营销登陆页,等)。

8. Jekyll

https://jekyllrb.com/

Jekyll 是一个静态站点生成器。 它采用您最喜欢的标记语言编写的文本,并使用布局创建一个静态网站。 您可以调整网站的外观、URL、页面上显示的数据等等。

三、总结

本文非常简略地介绍了一些静态网站产品。

市面上的静态网站的开源产品很多,对于自己用来说,选择适合自己的就好。

那么,如何做到适合自己呢?大概以下几点:

  • 熟悉背后的语言,比如是选react还是vue;
  • 能自己编写插件甚至主题;
  • 能配置自动化部署。

祝各位都能找到适合自己的静态网站,并越做越好!

【工具推荐】常用前端开源静态网站推荐相关推荐

  1. 搭建博客、自己的小窝?快来看看这些开源静态网站生成器

    点击关注上方"五分钟学算法", 设为"置顶或星标",第一时间送达干货. 作者:HelloGitHub-ChungZH 相信很多人都想要搭建一个自己的博客或是给项 ...

  2. 最热开源静态网站生成器 TOP 20

    最热开源静态网站生成器 TOP 20 1.静态站点生成器 Jekyll Jekyll 是一个简单的免费的Blog生成工具,类似WordPress.但是和WordPress又有很大的不同,原因是jeky ...

  3. 常用的开源镜像网站收集与备忘

    常用的开源镜像网站收集与备忘 开源软件,英文表示是open source software,简称为OSS,直接的字面意思是公开源代码的软件,开源软件具备可以免费使用和公布源代码的主要特征,是赋予任何人 ...

  4. 个人精心整理的前端开发必备网站推荐

    本人是一个纯正的小白,在学习的过程中搜集了一些关于前端开发的网站,希望对大家能够有所帮助!授人以鱼不如授人以渔! 1.MDN开发者文档网址:https://developer.mozilla.org/ ...

  5. 精心整理的前端开发必备网站推荐

    本人是一个纯正的小白,在学习的过程中搜集了一些关于前端开发的网站,希望对大家能够有所帮助!授人以鱼不如授人以渔! 1.MDN开发者文档网址:https://developer.mozilla.org/ ...

  6. 用Gitee Pages服务在线预览vue3前端项目:静态网站+多级路由+history模式(踩坑)

    目录 目标与前提 vue打包.预览遇到的坑以及原因 坑①:静态网站打开一片空白 坑②:子路由刷新或直接输入时,网页一片空白或404 坑③:首页加载时间过长 坑④:线上预览地址出错时,不显示404页面 ...

  7. 前端工具:好用的配色网站推荐

    1.flatui colors https://flatuicolors.com/ 选择喜欢的颜色.点一下就自动复制成功了.拿去粘贴即可使用.

  8. 前端网页配色网站推荐

    作为前端(没有UI的苦逼前端),有时候(绝大多时候)需要自己去确定网站的基本颜色基调,光靠大脑想像可不太行,于是去找了一些帮助与确定颜色基调的网站. Material Palette(http://w ...

  9. 开源数据集网站推荐,持续更新!

    学习机器学习时,最好使用真实数据,而不是人工数据集.幸运的是,有上千个开源数据集可以进行选择,涵盖多个领域.以下是一些可以查找的数据的地方: 流行的开源数据仓库: UC Irvine Machine ...

最新文章

  1. WPF布局(2) 使用的DockPanel面板进行简单的布局
  2. #pragma once 是什么意思?
  3. 深度学习面试题09:一维卷积(Full卷积、Same卷积、Valid卷积、带深度的一维卷积)...
  4. 安装完Oracle 11g之后启动SQL Developer 时报cannot find a j2se sdk错误的解决办法
  5. React Router路由详解
  6. win8计算机丢失xinput1+3.dll,xinput1 3.dll丢失怎么办 win8下xinput1 3.dll丢失解决方法
  7. php 嵌套函数公式解析,Pyparsing,使用嵌套解析器解析php函数注释块的内容
  8. 蓝桥 PREV-34 历届试题 矩阵翻硬币
  9. vasp 模拟退火_vasp的分子动力学模拟
  10. 中孚计算机保密 卸载,智华计算机终端保密检查系统怎样卸载
  11. Internet Explorer无法打开internet站点,已终止操作的解决方法合集
  12. java怎么做映射_Java 映射实例
  13. 什么是javaweb开发?
  14. Python赋值语句的多种形式
  15. Effective C++ 条款10_不止于此
  16. RMAN准备目录数据库
  17. Spring 事务的传播属性
  18. 【字符串比较函数】strcmp,stricmp,strcmpi区别
  19. STM32CUBEIDE使用盗版jlink仿真器
  20. Freemarker生成HTML静态页面

热门文章

  1. 贝塞尔曲线想到的--真的很美,但是有时很丑
  2. 关闭oracle job定时任务,oracle job 定时任务,定时执行
  3. 太合音乐领千千音乐突围:在线音乐铜墙铁壁难闯
  4. 十大优秀编程项目,让你的简历金光闪闪
  5. 拉丁超立方——样本点空间转换
  6. Windows/Ubuntu双系统磁盘管理中删除Ubuntu分区后Ubuntu EFI分区无法删除卷解决办法
  7. 安卓手游脚本开发!闭关在家37天“吃透”这份345页PDF,已开源
  8. 大学计算机高海波目录,《大学计算机基础》TOC课程教学大纲(定稿3ok).doc
  9. 软件开发中常见知识总结
  10. 块元素盒子内容被撑开