标签 静态网站 下的文章

Eleventy 是一个基于 JavaScript 的 Jekyll 和 Hugo 的替代品，用于构建静态网站。

title=

静态网站生成器是一种基于原始数据和一组模板生成完整的静态 HTML 网站的工具。它可以自动完成单个 HTML 页面的编码任务，并让这些页面准备好为用户服务。由于 HTML 页面是预先建立的，它们在用户的浏览器中加载得非常快。

静态网站对文档也很友好，因为静态网站很容易扩展，而且它们是生成、维护和部署项目文档的一种简单方法。由于这些原因，企业经常使用它们来记录应用编程接口 （API）、数据库模式和其他信息。文档是软件开发、设计和其他方面技术的一个重要组成部分。所有的代码库都需要某种形式的文档，选择范围从简单的 README 到完整的文档。

Eleventy: 一个静态网站生成器

Eleventy（11ty）是一个简单的静态网站生成器，是 Jekyll 和 Hugo 的替代品。它是用 JavaScript 编写的，它将一个（不同类型的）模板目录转化为 HTML。它也是开源的，在 MIT 许可下发布。

Eleventy 可以与 HTML、Markdown、Liquid、Nunjucks、Handlebars、Mustache、EJS、Haml、Pug 和 JavaScript Template Literals 协同工作。

它的特点包括：

  • 易于设置
  • 支持多种模板语言（如 Nunjucks、HTML、JavaScript、Markdown、Liquid）
  • 可定制
  • 基于 JavaScript，这是许多网络开发者所熟悉的，新用户也容易学习

安装 Eleventy

Eleventy 需要 Node.js。在 Linux 上，你可以使用你的包管理器安装 Node.js：

$ sudo dnf install nodejs

如果你的包管理器没有 Node.js，或者你不在 Linux 上，你可以从 Node.js 网站安装它。

Node.js 安装完毕后，就用它来安装 Eleventy：

$ npm install -g @11ty/eleventy

这就完成了！

为你的文档建立一个静态网站

现在你可以开始使用 Eleventy 来建立你的静态文档网站。以下是需要遵循的步骤。

1、创建一个 package.json 文件

要将 Eleventy 安装到你的项目中，你需要一个 package.json 文件：

$ npm init -y

2、将 Eleventy 安装到 package.json 中

安装 Eleventy 并保存到你的项目的 package.json 中。运行：

$ npm install-save-dev @11ty/eleventy

3、运行 Eleventy

使用 npx 命令来运行你本地项目的 Eleventy 版本。在你确认安装完成后，尝试运行 Eleventy：

$ npx @11ty/eleventy

4、创建一些模板

现在运行两个命令来创建两个新的模板文件（一个 HTML 和一个 Markdown 文件）：

$ cat << EOF >> index.html
<!doctype html><html>
<head>
<title>Page title</title>
</head><body>
<p>Hello world</p>
</body></html>
EOF
$ echo '# Page header' > index.md

这就把当前目录或子目录中的任何内容模板编译到输出文件夹中（默认为 _site）。

运行 eleventy --serve 来启动一个开发网络服务器。

$ npx @11ty/eleventy-serve

在你的网络浏览器中打开 http://localhost:8080/README/，看你的 Eleventy 输出。

然后把 _site 中的文件上传到你的 Web 服务器，发布你的网站给世界看。

尝试 Eleventy

Eleventy 是一个静态网站生成器，它易于使用，有模板和主题。如果你已经在你的开发流程中使用 Node.js，Eleventy 可能比 Jekyll 或 Hugo 更自然。它能快速提供很好的结果，并使你免于复杂的网站设计和维护。要了解更多关于使用 Eleventy 的信息，请仔细阅读它的文档。

本文基于 为开源项目建立技术文档静态网站，首次发布在 Nwokocha Wisdom Maduabuchi 的 Medium 上，经授权转载。

via: https://opensource.com/article/21/6/static-site-builder

作者：Nwokocha Wisdom 选题：lujun9972 译者：geekpi 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

在寻找部署静态网页的方法吗？这几个开源的静态网站生成工具可以帮你迅速部署界面优美、功能强大的静态网站，无需掌握复杂的 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: https://itsfoss.com/open-source-static-site-generators/

作者：Ankush Das 选题：lujun9972 译者：lxbwolf 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出

Pelican 是那些想要自我托管简单网站或博客的 Python 用户的绝佳选择。

如果你想创建一个自定义网站或博客，有很多选择。许多提供商可以托管你的网站并为你完成大部分工作。（WordPress 是一个非常受欢迎的选项。）但是使用托管方式，你会失去一些灵活性。作为一名软件开发人员，我更喜欢管理我自己的服务器，并在我的网站如何运行方面保持更多的自由。

然而，管理 Web 服务器需要大量的工作。安装它并获得一个简单的应用程序来提供内容是非常容易的。但是，维护安全补丁和更新是非常耗时得。如果你只想提供静态网页，那么拥有一个 Web 服务器和一系列应用程序可能会得不偿失。手动创建 HTML 页面也不是一个好选择。

这是静态网站生成器的用武之地。这些应用程序使用模板来创建所需的静态页面，并将它们与关联的元数据交叉链接。（例如，所有显示的页面都带有公共标签或关键词。）静态网站生成器可以帮助你使用导航区域、页眉和页脚等元素创建一个具有公共外观的网站。

我使用 Pyhton 已经很多年了，所以，当我第一次开始寻找生成静态 HTML 页面的东西时，我想要用 Python 编写的东西。主要原因是我经常想要了解应用程序如何工作的内部细节，而使用一种我已经了解的语言使这一点更容易。（如果这对你不重要或者你不使用 Python，那么还有一些其他很棒的静态网站生成器，它们使用 Ruby、JavaScript 和其它语言。）

我决定试试 Pelican。它是一个用 Python 编写的常用静态网站生成器。它支持 reStructuredText（LCTT 译注：这是一种用于文本数据的文件格式，主要用于 Python 社区的技术文档），并且也支持 Markdown，这需要通过安装必需的包来完成。所有任务都是通过命令行界面（CLI）工具执行的，这使得熟悉命令行的任何人都可以轻松完成。它简单的 quickstart CLI 工具使得创建一个网站非常容易。

在本文中，我将介绍如何安装 Pelican 4，添加一篇文章以及更改默认主题。（注意：我是在 MacOS 上开发的，使用其它 Unix/Linux 实验结果都将相同，但我没有 Windows 主机可以测试。）

安装和配置

第一步是创建一个虚拟环境，在虚拟环境中安装 Pelican。

$ mkdir test-site
$ cd test-site
$ python3 -m venv venv
$ ./venv/bin/pip install --upgrade pip
...
Successfully installed pip-18.1
$ ./venv/bin/pip install pelican
Collecting pelican
...
Successfully installed MarkupSafe-1.1.0 blinker-1.4 docutils-0.14 feedgenerator-1.9 jinja2-2.10 pelican-4.0.1 pygments-2.3.1 python-dateutil-2.7.5 pytz-2018.7 six-1.12.0 unidecode-1.0.23

Pelican 的 quickstart CLI 工具将创建基本布局和一些文件来帮助你开始，运行 pelican-quickstart 命令。为了简单起见，我输入了网站标题和作者的名字，并对 URL 前缀和文章分页选择了 “N”。（对于其它选项，我使用了默认值。）稍后在配置文件中更改这些设置非常容易。

$ ./venv/bin/pelicanquickstart
Welcome to pelicanquickstart v4.0.1.

This script will help you create a new Pelican-based website.

Please answer the following questions so this script can generate the files needed by Pelican.

> Where do you want to create your new web site? [.]
> What will be the title of this web site? My Test Blog
> Who will be the author of this web site? Craig
> What will be the default language of this web site? [en]
> Do you want to specify a URL prefix? e.g., https://example.com (Y/n) n
> Do you want to enable article pagination? (Y/n) n
> What is your time zone? [Europe/Paris]
> Do you want to generate a tasks.py/Makefile to automate generation and publishing? (Y/n)
> Do you want to upload your website using FTP? (y/N)
> Do you want to upload your website using SSH? (y/N)
> Do you want to upload your website using Dropbox? (y/N)
> Do you want to upload your website using S3? (y/N)
> Do you want to upload your website using Rackspace Cloud Files? (y/N)
> Do you want to upload your website using GitHub Pages? (y/N)
Done. Your new project is available at /Users/craig/tmp/pelican/test-site

你需要启动的所有文件都准备好了。

quickstart 默认为欧洲/巴黎时区，所以在继续之前更改一下。在你喜欢的文本编辑器中打开 pelicanconf.py 文件，寻找 TIMEZONE 变量。

TIMEZONE = 'Europe/Paris'

将其改为 UTC。

TIMEZONE = 'UTC'

要更新公共设置，在 pelicanconf.py 中查找 SOCIAL 变量。

SOCIAL = (('You can add links in your config file', '#'),
          ('Another social link', '#'),)

我将添加一个我的 Twitter 账户链接。

SOCIAL = (('Twitter (#craigs55)', 'https://twitter.com/craigs55'),)

注意末尾的逗号，它很重要。这个逗号将帮助 Python 识别变量实际上是一个集合。确保你没有删除这个逗号。

现在你已经有了网站的基本知识。quickstart 创建了一个包含许多目标的 Makefile。将 devserver 传给 make 命令将在你的计算机上启动一个开发服务器，以便你可以预览所有内容。Makefile 中使用的 CLI 命令假定放在 PATH 搜索路径中，因此你需要首先激活该虚拟环境。

$ source ./venv/bin/activate
$ make devserver
pelican -lr /Users/craig/tmp/pelican/test-site/content o
/Users/craig/tmp/pelican/test-site/output -s /Users/craig/tmp/pelican/test-site/pelicanconf.py

-> Modified: theme, settings. regenerating...
WARNING: No valid files found in content for the active readers:
   | BaseReader (static)
   | HTMLReader (htm, html)
   | RstReader (rst)
Done: Processed 0 articles, 0 drafts, 0 pages, 0 hidden pages and 0 draft pages in 0.18 seconds.

在你最喜欢的浏览器中打开 http://localhost:8000 来查看你的简单测试博客。

你可以在右侧看到 Twitter 链接，左侧有 Pelican、Python 和 Jinja 的一些链接。（Jinja 是 Pelican 可以使用的一种很棒的模板语言。你可以在 Jinja 的文档中了解更多相关信息。）

添加内容

现在你又了一个基本的网站，试着添加一些内容。首先，将名为 welcome.rst 的文件添加到网站的 content 目录中。在你喜欢的文本编辑器中，使用以下文本创建一个文件：

$ pwd
/Users/craig/tmp/pelican/test-site
$ cat content/welcome.rst

Welcome to my blog!
###################

:date: 20181216 08:30
:tags: welcome
:category: Intro
:slug: welcome
:author: Craig
:summary: Welcome document

Welcome to my blog.
This is a short page just to show how to put up a static page.

Pelican 会自动解析元数据行，包括日期、标签等。

编写完文件后，开发服务器应该输出以下内容：

-> Modified: content. regenerating...
Done: Processed 1 article, 0 drafts, 0 pages, 0 hidden pages and 0 draft pages in 0.10 seconds.

在浏览器中刷新你的测试网站来查看更改。

元数据（例如日期和标签）会自动添加到页面中。此外，Pelican 会自动检测到 intro 栏目，并将该部分添加到顶部导航中。

更改主题

使用像 Pelican 这样流行的开源软件的好处之一是，非常多的用户会做出更改并将其贡献给项目。许多都是以主题形式贡献的。

网站的主题会设置颜色、布局选项等。尝试一个新主题非常容易，你可以在 Pelican 主题中预览其中的许多内容。

首先，克隆 GitHub 仓库:

$ cd ..
$ git clone --recursive https://github.com/getpelican/pelicanthemes
Cloning into 'pelicanthemes'...

我喜欢蓝色，那么试试 blueidea。

编辑 pelicanconf.py，添加以下行：

THEME = '/Users/craig/tmp/pelican/pelican-themes/blueidea/'

开发服务器将重新生成你的输出。在浏览器中刷新网页来查看新主题。

主题控制布局的方方面面。例如，在默认主题中，你可以看到文章旁边带有元标记的栏目（Intro），但这个栏目并未显示在 blueidea 主题中。

其他考虑因素

本文是对 Pelican 的快速介绍，所以我并没有涉及一些重要的主题。

首先，我对迁移到静态站点犹豫不决的一个原因是它无法对文章评论。幸运的是，有一些第三方服务商将为你提供评论功能。我目前正在关注的是 Disqus。

接下来，上面的所有内容都是在我的本地机器上完成的。如果我希望其他人查看我的网站，我将不得不将预先生成的 HTML 文件上传到某个地方。如果你查看 pelican-quickstart 输出，你将看到使用 FTP、 SSH、S3 甚至 GitHub 页面的选项，每个选项都有其优点和缺点。但是，如果我必须选择一个，那么我可能会选择发布到 GitHub 页面。

Pelican 还有许多其他功能，我每天都在学习它。如果你想自托管一个网站或博客，内容简单并且是静态内容，同时你想使用 Python，那么 Pelican 是一个很好的选择。它有一个活跃的用户社区，可以修复 bug，添加特性，而且还会创建新的和有趣的主题。试试看吧！

via: https://opensource.com/article/19/1/getting-started-pelican

作者：Craig Sebenik 选题：lujun9972 译者：MjSeven 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出