动态瑜伽 静态瑜伽 初学者

动态瑜伽 静态瑜伽 初学者

Let’s say your next project is going to be a simple HTML website for a resumé, marketing a product or service, documenting your software, or something along those lines. A great option for you is to build your website using static site generators (SSG).

假设您的下一个项目将是一个简单HTML网站，用于简历，营销产品或服务，记录软件或类似内容。 一个不错的选择是使用静态网站生成器(SSG)构建您的网站。

There are tons of static site generators in a range of programming languages, such as JavaScript, Ruby, Go — the list goes on.

各种编程语言(例如JavaScript，Ruby，Go)中都有大量的静态站点生成器-清单还在继续。

In this article, I’m going to list five popular static site generators and their main features, so that you can form a better idea of which one among them would be a good fit for your project.

在本文中，我将列出五个流行的静态站点生成器及其主要功能，以便您可以更好地了解其中一个最适合您的项目。

I’m not claiming that I’ve provided the definitive list of SSGs or that I personally favor any of the software I include in my list over any other that’s available out there. However, all of the products in the list are popular, performant, well-documented and well-supported.

我并不是说我已经提供了SSG的确切列表，也不是说我个人更喜欢列表中包括的任何软件，而不是那里提供的其他任何软件。 但是，列表中的所有产品都很受欢迎，性能良好，有据可查并且得到了良好的支持。

什么是静态网站生成器？ (What Are Static Site Generators?)

A common CMS (Content Management System), like WordPress for instance, builds the web page dynamically as it is being requested by the client: it assembles all the data from the database, and processes the content through a template engine.

常见的CMS(内容管理系统)，例如WordPress，会根据客户端的请求动态构建网页：它会组装来自数据库的所有数据，并通过模板引擎处理内容。

On the other hand, a static site generator:

另一方面，静态站点生成器：

takes a different approach and generates all the pages of the website once when there’s actually changes to the site. This means there’s no moving parts in the deployed website. Caching gets much easier, performance goes up and static sites are far more secure. – StaticGen.

采用一种不同的方法，并在网站实际发生更改时生成一次网站的所有页面。 这意味着已部署的网站中没有活动部件。 缓存变得更加容易，性能提高，静态站点更加安全。 – StaticGen 。

If you’re curious and would like to learn more, this great article by Brian Rinaldi looks closely at the inner workings of static site generators.

如果您好奇并想了解更多信息， Brian Rinaldi的这篇精彩文章将仔细研究静态站点生成器的内部工作原理。

Now, let’s go through some options.

现在，让我们来看一些选项。

1.雨果 (1. Hugo)

Hugo is a very popular static site generator with over 32,000 stars on GitHub right now. It is written in Go, and advertises itself as being the fastest framework for building websites. In fact, Hugo comes with a fast build process, which makes building static websites a breeze and works great for blogs with lots of posts.

Hugo是一个非常受欢迎的静态站点生成器，目前在GitHub上拥有32,000多颗星。 它是用Go语言编写的，并宣传自己是构建网站最快的框架。 实际上，Hugo具有快速的构建过程，这使构建静态网站变得轻而易举，并且非常适合发布大量文章的博客。

The docs are great and the Hugo website offers a fantastic quickstart guide that gets you up and running with the software in no time.

这些文档很棒，而且Hugo网站提供了出色的快速入门指南 ，可让您立即启动并运行该软件。

Here are some of Hugo’s best features:

以下是雨果的一些最佳功能 ：

Designed and optimized for speed: as a rule of thumb, each piece of content renders in about 1 millisecond

针对速度进行了设计和优化：根据经验，每条内容的渲染时间约为1毫秒 No need to install extra plugins for things like pagination, redirection, multiple content types, and more

无需安装额外的插件来进行分页，重定向，多种内容类型等等 Rich theming system

丰富的主题系统 Shortcodes available as an alternative to using Markdown

可以使用简码代替Markdown

Since July 2018, Hugo offers a powerful assets pipeline, Hugo Pipes.

自2018年7月以来，Hugo提供了强大的资产管道Hugo Pipes 。

2. Next.js (2. Next.js)

Next is a versatile framework for the creation of server-rendered or statically exported JavaScript apps. It’s built on top of React and is created by Zeit.

接下来是用于创建服务器渲染或静态导出JavaScript应用程序的通用框架。 它建立在React之上，由Zeit创建。

To install Next, run the following command in your terminal:

要安装Next，请在终端中运行以下命令：

npm install --save next react react-dom

Then add this script to your package.json file:

然后将此脚本添加到您的package.json文件中：

{ "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

With this in place, every .js file becomes a route which gets processed and rendered automatically.

有了这个，每个.js文件都会变成一条路由，该路由会被自动处理和呈现。

Next.js has great docs, where you can learn more about building and customizing your Next-based apps.

Next.js具有出色的文档，您可以在其中了解有关构建和自定义基于Next的应用程序的更多信息。

Here are a few things Next is very good at:

以下是几项非常擅长的事项：

Next renders on the server by default, which is great for performance. For a discussion of the pros and cons of server-side rendering, check out this article by Alex Grigoryan on Medium

默认情况下，Next在服务器上呈现，这对性能非常有用。 有关服务器端渲染的优缺点的讨论，请查看Alex Grigoryan在Medium上的这篇文章 。

No setup necessary: automatic code-splitting, routing and hot reload out of the box

无需设置：开箱即用的自动代码拆分，路由和热重装 Extensibility: feel free to customize your setup by taking control of Webpack and Babel, routing and plugins

可扩展性：通过控制Webpack和Babel，路由和插件，可以随意自定义设置

Great docs, tutorials, quizzes and examples to get you up and running from beginner to advanced user

出色的文档 ， 教程，测验和示例 ，帮助您从初学者到高级用户入门

Official and community plugins available

提供官方和社区插件

Tons of example apps to get you started.

大量示例应用程序可帮助您入门。

3.盖茨比 (3. Gatsby)

Gatsby works great for documentation and blogs, it’s built in React and leverages GraphQL for manipulating data. If you’re curious and want to delve deeper, check out How to Build Your Static Site with Gatsby and the docs on the Gatsby website.

Gatsby非常适合用于文档和博客，它内置在React中，并利用GraphQL来处理数据。 如果您好奇并想深入研究，请查看如何使用Gatsby和Gatsby网站上的文档 来构建静态站点 。

Here are some of Gatsby’s strong points:

以下是盖茨比的优点：

With Gatsby you get to work with the latest web technologies. React, Webpack, modern JS, CSS, etc. all ready for you to just start coding your site

使用Gatsby，您可以使用最新的Web技术。 React，Webpack，现代JS，CSS等都已准备就绪，您可以开始对网站进行编码 Gatsby’s rich plugin ecosystem allows you to use any kind of data you prefer from one or more sources

Gatsby丰富的插件生态系统允许您使用一个或多个来源中喜欢的任何类型的数据 Easy deployment and scalability, which is mainly due to the fact that Gatsby builds static pages, which don’t require complicated setups

易于部署和可扩展性，这主要是由于Gatsby构建了静态页面，而这些页面不需要复杂的设置

Gatsby is a Progressive Web Apps (PWA) generator. “You get code and data splitting out-of-the-box. Gatsby loads only the critical HTML, CSS, data, and JavaScript so your site loads as fast as possible. Once loaded, Gatsby prefetches resources for other pages so clicking around the site feels incredibly fast.” (Gatsby website)

Gatsby是渐进式Web应用程序(PWA)生成器。 “您可以立即获得代码和数据拆分。 Gatsby仅加载关键HTML，CSS，数据和JavaScript，因此您的网站将尽快加载。 加载后，盖茨比(Gatsby)会预取其他页面的资源，因此在网站上单击的速度非常快。” ( 盖茨比网站 )

Plenty of starter sites are available for you to grab freely and customize.

大量的入门网站可供您自由获取和自定义。

Check out our tutorial that shows you how to build your first static site with Gatsby.

查看我们的教程，该教程向您展示如何使用Gatsby构建第一个静态站点 。

4. Nuxt.js (4. Nuxt.js)

Nuxt.js is a higher level framework built with Vue.js that lets you build production-ready web apps. With Nuxt you can choose among:

Nuxt.js是使用Vue.js构建的更高级别的框架，可让您构建可用于生产环境的Web应用程序。 使用Nuxt，您可以选择：

Server-side rendering for your website, also called universal or isomorphic mode. Nuxt uses a Node server to deliver HTML based on Vue components

网站的服务器端渲染，也称为通用或同构模式。 Nuxt使用节点服务器交付基于Vue组件HTML

Static site generation. With Nuxt you can build static websites based on your Vue application

静态网站生成。 使用Nuxt，您可以基于Vue应用程序构建静态网站 Single Page Apps (SPAs). Nuxt gives you the configuration and the framework to build your Vue-based SPA.

单页应用程序(SPA)。 Nuxt为您提供了构建基于Vue的SPA的配置和框架。

Creating Nuxt-based websites can be done super quickly. Here’s the Hello World example on the Nuxt website. You can download it on your machine or play with it on Codesandbox to get started.

创建基于Nuxt的网站可以非常快速地完成。 这是Nuxt网站上的Hello World示例 。 您可以将其下载到计算机上，也可以在Codesandbox上使用它以开始使用。

Here are some of Nuxt.js’s features:

以下是Nuxt.js的一些功能：

Great performance: Nuxt-based apps are optimized out of the box

出色的性能：基于Nuxt的应用程序开箱即用地进行了优化 Modular: Nuxt is built using a powerful modular structure. There are more than 50 modules you can choose from to speed up your development experience

模块化：Nuxt使用强大的模块化结构构建。 您可以选择50多个模块来加快开发体验 Relatively easy learning curve. Nuxt is based on Vue, which is a framework that makes it quick and painless to get started

相对容易学习的曲线。 Nuxt基于Vue，Vue是一个框架，可让您快速而轻松地上手 Integrated state management with Vuex

与Vuex集成状态管理 Automatic Code Splitting

自动代码分割 ES6/ES7 Transpilation

ES6 / ES7移植 Bundling and minifying of JS & CSS

JS和CSS的捆绑和最小化

Managing <head> element (<title>, <meta>, etc.)

管理<head>元素( <title> ， <meta>等)

Pre-processor: Sass, Less, Stylus, etc.

预处理器：Sass，Less，手写笔等

5. VuePress (5. VuePress)

VuePress is a Vue-powered static site generator. Its default theme is optimized for writing technical docs, therefore it works great for this type of site right out of the box.

VuePress是Vue支持的静态站点生成器。 它的默认主题已针对编写技术文档进行了优化，因此对于开箱即用的此类网站非常有用。

A VuePress site works as a Single Page App (SPA) that leverages the power of Vue, Vue Router and Webpack.

VuePress站点可作为单页应用程序(SPA)来利用Vue，Vue Router和Webpack的功能。

To install VuePress globally, just run this command in your terminal:

要全局安装VuePress，只需在终端中运行以下命令：

npm install -g vuepress

Then, to create a markdown file, run:

然后，要创建降价文件，请运行：

echo '# Hello VuePress' > README.md

To start writing, run:

要开始编写，请运行：

vuepress dev

To build your site, run:

要构建您的网站，请运行：

vuepress build

Here are some great features that VuePress has to offer:

以下是VuePress必须提供的一些出色功能：

Setting up your VuePress-based site is quick and you can write your content using Markdown

设置基于VuePress的网站很快，您可以使用Markdown编写内容 VuePress is built on Vue, which means that you can enjoy the web experience of Vue, Webpack, the possibility of using Vue components inside Markdown files and of developing custom themes with Vue

VuePress是基于Vue构建的，这意味着您可以享受Vue，Webpack的Web体验，在Markdown文件中使用Vue组件以及使用Vue开发自定义主题的可能性 Fast loading experience: VuePress static sites are made of pre-rendered static HTML and run as a SPA once they’re loaded in the browser

快速的加载体验：VuePress静态站点由预渲染的静态HTML组成，并在加载到浏览器中后作为SPA运行

Multilanguage support by default with i18n. Setting up other languages is also quite straightforward by adding a locales object to the themeConfig object inside your VuePress-based project’s config.js file.

i18n默认支持多语言。 设置其他语言也蛮通过添加一个简单的locales反对themeConfig您的基于VuePress项目的内部对象config.js文件。

Nuxt.js还是VuePress？ (Nuxt.js or VuePress?)

Both Nuxt.js and VuePress are built on top of Vue.js and let you create static websites. So, which one is to be preferred over the other?

Nuxt.js和VuePress都是基于Vue.js构建的，可让您创建静态网站。 那么，哪个优先于另一个？

Let’s say that Nuxt.js can do everything VuePress does. However, in essence, Nuxt is best suited for building applications. VuePress, on the other hand, is ideal for creating static documentation websites that display content written in Markdown. A discussion on the project’s GitHub repo is being carried out in view of making VuePress also suited for feature-rich blogging sites. To learn more about how you can set up a simple blog with VuePress, head over to Creating a Blog with VuePress by Adam Collier.

假设Nuxt.js可以完成VuePress的所有工作。 但是，从本质上讲，Nuxt最适合建筑应用。 另一方面，VuePress是创建显示以Markdown编写的内容的静态文档网站的理想选择。 鉴于VuePress也适用于功能丰富的博客网站，正在对该项目的GitHub回购进行讨论。 要了解有关如何使用VuePress设置简单博客的更多信息，请转到 Adam Collier的使用VuePress创建博客 。

In short, if all you need is a documentation site or a very simple blog in Vue.js, consider reaching out for VuePress — Nuxt would be overkill.

简而言之，如果您只需要一个文档站点或Vue.js中的一个非常简单的博客，请考虑接触VuePress-Nuxt会显得过大。

如何选择静态网站生成器 (How to Choose a Static Site Generator)

With all the options available, it’s easy to feel paralyzed when it comes to choosing a static site generator that fits the bill. There are some considerations that could help you sieve through what’s on offer.

有了所有可用的选项，在选择符合要求的静态网站生成器时，很容易感到瘫痪。 有一些注意事项可以帮助您筛选所提供的内容。

Your project’s requirements should throw some light on the features you should be looking for in your SSG.

您的项目要求应阐明您在SSG中应寻找的功能。

If your project needs lots of dynamic capabilities out of the box, then Hugo and Gatsby could be a good choice. As for build and deploy time, all of the SSGs listed above perform very well, although Hugo seems to be the favorite, especially if your website has a lot of content.

如果您的项目需要开箱即用的动态功能，那么Hugo和Gatsby可能是一个不错的选择。 至于构建和部署时间，上面列出的所有SSG的表现都很好，尽管Hugo似乎是最喜欢的，尤其是在您的网站内容很多的情况下。

Is your project a blog or a personal website? In this case, Hugo and Gatsby could be excellent choices, while for a simple documentation website VuePress would be a great fit. If you’re planning an e-commerce website, then you might want to consider which SSG fits in well with a headless CMS for store management. In this case, Gatsby and Nuxt could work pretty well.

您的项目是博客还是个人网站？ 在这种情况下，Hugo和Gatsby可能是绝佳的选择，而对于简单的文档网站VuePress则非常合适。 如果您正在计划一个电子商务网站，那么您可能要考虑哪种SSG与无头CMS一起用于商店管理。 在这种情况下，Gatsby和Nuxt可以很好地工作。

One more thing you might want to consider is your familiarity with each of the SSG languages. If you program in Go, then Hugo is most likely your preferred choice. As for the remaining options, they’re either built on top of React (Next and Gatsby) or Vue (Nuxt and VuePress).

您可能还需要考虑的另一件事是您熟悉每种SSG语言。 如果您使用Go编程，那么Hugo最有可能是您的首选。 至于其余选项，它们要么建立在React(Next和Gatsby)之上，要么建立在Vue(Nuxt和VuePress)之上。

With regard to stuff like great documentation, strong community and support, all of the static site generators I listed figure among the most popular, or rapidly gaining in popularity like VuePress.

关于出色的文档，强大的社区和支持之类的东西，我列出的所有静态网站生成器都跻身于最受欢迎或Swift流行的VuePress之列。

Have you used static site generators for a project? Which one? How did you like the experience?

您是否为项目使用了静态网站生成器？ 哪一个？ 您觉得这次体验如何？

翻译自: https://www.sitepoint.com/static-site-generators/

动态瑜伽 静态瑜伽 初学者

相关资源：瑜伽app_ui_界面设计_xd素材下载.xd