创建一个静态网站
#javascript #html #staticwebapps #ssg

我将首先简要概述三个受欢迎的静态网站发电机：Jekyll，Hugo和Gatsby。请记住，特定说明可能会根据您的操作系统和个人喜好而有所不同。

  1. jook：

    • 如果尚未安装Ruby在您的系统上安装。
    • 打开终端并通过运行以下命令安装jekyll：gem install jekyll bundler。
    • 通过导航到所需目录并运行jekyll new mysite。
      • 来创建一个新的jekyll网站
    • 转到项目目录：cd mysite。
    • 建立网站并在本地提供网站：bundle exec jekyll serve。
    • 访问您的网络浏览器中的http://localhost:4000以查看您的jekyll网站。

  2. 雨果：

    • 从您的操作系统的官方网站下载雨果二进制文件。
    • 提取下载的文件并将二进制文件添加到系统路径中。
    • 打开终端并导航到所需的目录。
    • 通过运行hugo new site mysite创建一个新的Hugo网站。
    • 转到项目目录：cd mysite。
    • 从Hugo主题目录中选择一个主题，然后将其添加到网站的配置文件（config.toml）。
    • 运行雨果服务器：hugo server -D。
    • 访问您的网络浏览器中的http://localhost:1313以查看您的Hugo网站。

  3. 盖茨比：

    • 如果尚未安装系统，请在系统上安装node.js。
    • 打开终端并在全球安装盖茨比：npm install -g gatsby-cli。
    • 通过运行gatsby new mysite创建一个新的Gatsby网站。
    • 转到项目目录：cd mysite。
    • 启动开发服务器：gatsby develop。
    • 访问您的网络浏览器中的http://localhost:8000以查看您的盖茨比网站。

这些只是让您开始使用每个静态网站生成器的基本说明。每个发电机都有自己的文档和功能，因此我鼓励您探索他们各自的网站以获取更详细的信息和高级用法。

这里还有更多详细信息和每个静态网站生成器的其他步骤：

  1. jook：

    • Jekyll使用液体（模板语言）来生成静态内容。您可以使用液体语法创建模板和布局。
    • 通过编辑HTML，CSS和YAML数据文件来自定义网站的外观和感觉。
    • jekyll将内容组织成藏品，例如博客文章或页面。您可以在网站的配置文件中定义自定义集合。
    • 要添加一个新页面，在_pages目录中创建Markdown（.MD）或HTML文件。
    • 要创建一个博客文章，请使用文件名格式在_posts目录中创建一个Markdown文件：YYYY-MM-DD-title.md。
    • Jekyll提供了扩展其功能的各种插件。您可以在Jekyll插件目录中找到插件。
    • 当您准备发布网站时，通过运行bundle exec jekyll build生成静态文件。输出将在_site目录中。

  2. 雨果：

    • Hugo使用GO模板来生成静态内容。您可以使用模板语法创建模板和部分。
    • 在config.toml文件中自定义您的网站的配置。您可以指定各种设置，包括站点标题，主题，菜单项等。
    • 通过运行hugo new <path>/<page>.md创建新的内容页面。该页面将使用一些默认的前面事项创建。
    • Hugo将内容组织为帖子或页面等部分。您可以定义自定义部分及其相应的模板。
    • 雨果提供了广泛的主题库。您可以通过将其git存储库克隆到themes目录中并在config.toml文件中指定。
    • 要构建您的网站，请在项目目录中运行hugo。静态文件将在public目录中生成。
    • 要查看网站的实时草稿，请使用--buildDrafts命令使用--buildDrafts标志。

  3. 盖茨比：

    • Gatsby使用React和GraphQl创建动态和交互式静态网站。
    • Gatsby具有一个插件生态系统，可让您扩展其功能。您可以在盖茨比插件库上找到插件。
    • 在gatsby-config.js文件中自定义您的网站的配置。您可以指定元数据，插件和其他设置。
    • 盖茨比使用基于文件的路由系统。通过在src/pages目录中添加JavaScript文件来创建新页面。
    • 要创建博客，您可以在content/blog目录或配置中指定的任何其他源目录中创建Markdown文件。
    • Gatsby支持GraphQl查询以获取和操纵数据。您可以在React组件中编写GraphQl查询以从各种来源获取数据。
    • 要构建您的盖茨比网站，请在项目目录中运行gatsby build。静态文件将在public目录中生成。
    • 要在本地启动生产服务器，请使用gatsby serve。

这些是一些其他详细信息，可帮助您开始使用每个静态网站生成器。当您进一步探索时，请确保参考每个工具的官方文档和社区资源，以释放其全部潜力。

这是每个静态网站生成器的一些更高级的功能和概念：

  1. jook：

    • Jekyll支持数据文件，使您可以在YAML，JSON或CSV格式中定义自定义数据。可以在模板或布局中访问此数据。
    • 使用Incoval创建可重复使用的组件。使用{% include %}标签在模板中包含代码段。
    • Jekyll支持博客文章或其他收藏的分页。您可以在“配置文件”中指定每个页面的帖子数。
    • 使用前物质默认设置前物质变量的默认值。这使您可以避免在每个页面或帖子中重复元数据。
    • Jekyll对语法突出显示具有内置支持。您可以通过在网站的配置文件中指定代码荧光笔来启用它。

  2. 雨果：

    • 雨果提供分类法，使您可以对内容进行分类。您可以定义自定义分类法，例如标签或类别，并将其分配给您的内容。
    • 雨果中的短代码使您可以创建可重复使用的内容或功能片段。您可以创建自己的自定义快捷代码或使用内置的快捷代码。
    • 雨果支持多语言网站。您可以用多种语言创建内容，并在网站的配置中指定特定语言的设置。
    • 使用Hugo模块来管理外部依赖关系和主题。模块使您的网站更加最新，以了解依赖关系的最新更改。
    • 雨果具有强大的模板语言，可让您以各种方式自定义内容的输出。探索Hugo中可用的模板功能和变量。

  3. 盖茨比：

    • Gatsby允许您使用插件从各种CMS，API或Markdown文件中获取数据。您可以找到与不同数据源集成的各种插件。
    • Gatsby通过盖茨比功能功能支持无服务器功能。您可以创建无服务器端点来处理网站上的动态功能。
    • Gatsby Image是一个插件，可在您的网站上进行优化并提供响应式图像。它会自动生成用于不同屏幕尺寸的图像的多个版本。
    • Gatsby提供了丰富的SEO功能，具有gatsby-plugin-react-helmet之类的插件。您可以定义元数据并自定义页面的HTML头部。
    • Gatsby允许您使用gatsby-plugin-netlify-forms或gatsby-plugin-formik等插件在网站上创建和管理表单。

这些只是您可以使用每个静态网站生成器探索的一些高级功能和概念。可能性是巨大的，围绕这些工具的文档和社区可以提供更多的见解和指导。快乐探索！

关于作者。 Geoffrey Callaghan是Fabform.io的程序员，在form backend团队中工作。