mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
选题[tech]: 20200926 10 Open Source Static Site Generators to Create Fast and Resource-Friendly Websites
sources/tech/20200926 10 Open Source Static Site Generators to Create Fast and Resource-Friendly Websites.md
This commit is contained in:
DarkSun
parent
2ad207dc21
commit
b26f751866
@ -0,0 +1,214 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: ( )
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (10 Open Source Static Site Generators to Create Fast and Resource-Friendly Websites)
|
||||
[#]: via: (https://itsfoss.com/open-source-static-site-generators/)
|
||||
[#]: author: (Ankush Das https://itsfoss.com/author/ankush/)
|
||||
|
||||
10 Open Source Static Site Generators to Create Fast and Resource-Friendly Websites
|
||||
======
|
||||
|
||||
_**Brief: Looking to deploy a static web-page? No need to fiddle with HTML and CSS. These open source static website generators will help you deploy beautiful, functional static websites in no time.**_
|
||||
|
||||
### What is a static website?
|
||||
|
||||
Technically, a static website means the webpages are not generated on the server dynamically. The HTML, CSS, JavaScript lie on the server in the version the end user receives it. The raw source code files are already prebuilt, the source code doesn’t change with the next server request.
|
||||
|
||||
It’s FOSS is a dynamic website which depends on several databases and the web pages are generated and served when there’s a request from your browser. Majority of the web is powered by dynamic sites where you interact with the websites and there are plenty of content that often change.
|
||||
|
||||
Static websites give you a few benefits like faster loading times, less server resource requirements, and better security (debatable?).
|
||||
|
||||
Traditionally, static websites are more suitable for creating small websites with only a few pages and where the content doesn’t change too often.
|
||||
|
||||
This, however, is changing thanks to static website generator tools and you can use them to create blogs as well.
|
||||
|
||||
I have compiled a list of open source static site generators that can help you build a beautiful website.
|
||||
|
||||
### Best Open Source Static Site Generators
|
||||
|
||||
It’s worth noting that you will not get complex functionality on a static website. In that case, you might want to check out our list of [best open source CMS][1] for dynamic websites.
|
||||
|
||||
#### 1\. Jekyll
|
||||
|
||||
![][2]
|
||||
|
||||
Jekyll is one of the most popular open source static generator built using [Ruby][3]. In fact, Jekyll is the engine behind [GitHub pages][4] which lets you host websites using GitHub for free.
|
||||
|
||||
Setting up Jekyll is easy across multiple platforms which includes Ubuntu as well. It utilizes [Markdown][5], [Liquid][5] (for template), HTML, and CSS to generate the static site files. It is also a pretty good option if you want to build a blog without advertisements or a product page to promote your tool or service.
|
||||
|
||||
Also, it supports migrating your blog from popular CMSs like Ghost, WordPress, Drupal 7, and more. You get to manage permalinks, categories, pages, posts, and custom layouts, which is nice. So, even if you already have an existing website that you want to convert to a static site, Jekyll should be a perfect solution. You can learn more about it by exploring the [official documentation][6] or its [GitHub page][7].
|
||||
|
||||
[Jekyll][8]
|
||||
|
||||
#### 2\. Hugo
|
||||
|
||||
![][9]
|
||||
|
||||
Hugo is yet another popular open source framework for building static sites. It’s built using the [Go programming language][10].
|
||||
|
||||
It is fast, simple, and reliable. You also get some advanced theming support if you need it. It also offers some useful shortcuts to help you get things done easily. No matter whether it’s a portfolio site or a blog, Hugo is capable enough to manage a variety of content types.
|
||||
|
||||
To get started, you can follow its [official documentation][11] or go through its [GitHub page][12] to install it and learn more about its usage. You can also deploy Hugo on GitHub pages or any CDN if required.
|
||||
|
||||
[Hugo][13]
|
||||
|
||||
#### 3\. Hexo
|
||||
|
||||
![][14]
|
||||
|
||||
Hexo is an interesting open-source framework powered by [Node.js][15]. Similar to others, you will end up creating blazing fast websites but you will also get a good collection of themes and plugins.
|
||||
|
||||
You do get a powerful API here to extend functionality as per your requirements as well. If you already have a website, you can simply use its [Migrator][16] extension as well.
|
||||
|
||||
To get started, you can go through the [official documentation][17] or just explore their [GitHub page][18].
|
||||
|
||||
[Hexo][19]
|
||||
|
||||
#### 4\. Gatsby
|
||||
|
||||
![][20]
|
||||
|
||||
Gatsby is an increasingly open-source popular site generator framework. It utilizes [React.js][21] for creating fast and beautiful websites.
|
||||
|
||||
I was quite interested to give this a try for some experimental projects a few years back and it is impressive to see the availability thousands of new plugins and themes. Unlike other static site generators, you can use Gatsby to generate a site and get the benefits of static sites without losing any features.
|
||||
|
||||
It offers a lot of useful integrations from popular services. Of course, you can keep it simple or use it coupled with a popular CMS of your choice, which should be interesting. You can take a look at their [official documentation][22] and its [GitHub page][23] to find out more on it.
|
||||
|
||||
[Gatsby][24]
|
||||
|
||||
#### 5\. VuePress
|
||||
|
||||
![][25]
|
||||
|
||||
VuePress is a static site generator powered by [Vue.js][26] which happens to be an open-source progressive JavaScript framework.
|
||||
|
||||
If you know HTML, CSS, and JavaScript, you can easily get started using VuePress. You should find several useful plugins and themes to get a head start on building your site. Also, it seems like Vue.js is being actively improved and has the attention of more developers, which is a good thing.
|
||||
|
||||
You can learn more about it through their [official guide][27] and the [GitHub page][28].
|
||||
|
||||
[VuePress][29]
|
||||
|
||||
#### 6\. Nuxt.js
|
||||
|
||||
![][30]
|
||||
|
||||
Nuxt.js utilizes Vue.js and Node.js but it focuses on providing modularity and has the ability to rely on the server-side instead of the client-side. Not just that, it aims to provide an intuitive experience to the developers with descriptive errors, and detailed documentations among other things.
|
||||
|
||||
As it claims, Nuxt.js should be the best of both world with all of its features and flexibility that you get to build a static website. They also offer a [Nuxt Online sandbox][31] to let you directly test it without a lot of effort.
|
||||
|
||||
You can explore its [GitHub page][32] or visit the [official][33] [][33][site][33] to get more details.
|
||||
|
||||
#### 7\. Docusaurus
|
||||
|
||||
![][34]
|
||||
|
||||
Docusaurus is an interesting open-source static site generator tailored for building documentation websites. It happens to be a part of [Facebook’s open source initiative][35].
|
||||
|
||||
It is built using React. You get all the essential features like document versioning, document search, and translation mostly pre-configured. If you’re planning to build a documentation website for any of your products/services, this should be a good start.
|
||||
|
||||
You can learn more about it on its [GitHub page][36] and its [official website][37].
|
||||
|
||||
[Docusaurus][37]
|
||||
|
||||
#### 8\. Eleventy
|
||||
|
||||
![][38]
|
||||
|
||||
Eleventy describes itself as an alternative to Jekyll and aims for a simpler approach to make faster static websites.
|
||||
|
||||
It seems easy to get started and it also offers proper documentation to help you out. If you want a simple static site generator that gets the job done, Eleventy seems to be an interesting choice.
|
||||
|
||||
You can explore more about it on its [GitHub page][39] and visit the [official website][40] for more details.
|
||||
|
||||
[Eleventy][40]
|
||||
|
||||
#### 9\. Publii
|
||||
|
||||
![][41]
|
||||
|
||||
Publii is an impressive open-source CMS that makes it easy to generate a static site. It’s built using [Electron][42] and Vue.js. You can also migrate your posts from a WordPress site if needed. In addition to that, it offers several one-click synchronizations with GitHub Pages, Netlify, and similar services.
|
||||
|
||||
You also get a WYSIWYG editor if you utilize Publii to generate a static site. To get started, visit the [official website][43] to download it or explore its [GitHub page][44] for more information.
|
||||
|
||||
[Publii][43]
|
||||
|
||||
#### 10\. Primo
|
||||
|
||||
![][45]
|
||||
|
||||
An interesting open-source static site generator which is still in active development. Even though it’s not a full-fledged solution with all the features compared to other static generators, it is a unique project.
|
||||
|
||||
Primo aims to help you build and develop a site using a visual builder which can be easily edited and deployed to any host of your choice.
|
||||
|
||||
You can visit the [official website][46] or explore its [GitHub page][47] for more information.
|
||||
|
||||
[Primo][46]
|
||||
|
||||
### Wrapping Up
|
||||
|
||||
There are a lot of other site generators available out there. However, I’ve tried to mention the best static generators that gives you the fastest loading times, the best security, and an impressive flexibility.
|
||||
|
||||
Did I miss any of your favorites? Let me know in the comments below.
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://itsfoss.com/open-source-static-site-generators/
|
||||
|
||||
作者：[Ankush Das][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://itsfoss.com/author/ankush/
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://itsfoss.com/open-source-cms/
|
||||
[2]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2018/01/jekyll-screenshot.jpg?resize=800%2C450&ssl=1
|
||||
[3]: https://www.ruby-lang.org/en/
|
||||
[4]: https://pages.github.com/
|
||||
[5]: https://github.com/Shopify/liquid/wiki
|
||||
[6]: https://jekyllrb.com/docs/
|
||||
[7]: https://github.com/jekyll/jekyll
|
||||
[8]: https://jekyllrb.com/
|
||||
[9]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/09/hugo.jpg?resize=800%2C414&ssl=1
|
||||
[10]: https://golang.org/
|
||||
[11]: https://gohugo.io/getting-started/
|
||||
[12]: https://github.com/gohugoio/hugo
|
||||
[13]: https://gohugo.io/
|
||||
[14]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/09/hexo.jpg?resize=800%2C213&ssl=1
|
||||
[15]: https://nodejs.org/en/
|
||||
[16]: https://hexo.io/api/migrator.html
|
||||
[17]: https://hexo.io/docs/
|
||||
[18]: https://github.com/hexojs/hexo
|
||||
[19]: https://hexo.io/
|
||||
[20]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2020/09/gatsbyjs.png?resize=800%2C388&ssl=1
|
||||
[21]: https://reactjs.org/
|
||||
[22]: https://www.gatsbyjs.com/docs/
|
||||
[23]: https://github.com/gatsbyjs/gatsby
|
||||
[24]: https://www.gatsbyjs.com/
|
||||
[25]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2020/09/VuePress.jpg?resize=800%2C498&ssl=1
|
||||
[26]: https://vuejs.org/
|
||||
[27]: https://vuepress.vuejs.org/guide/
|
||||
[28]: https://github.com/vuejs/vuepress
|
||||
[29]: https://vuepress.vuejs.org/
|
||||
[30]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/09/nuxtjs.jpg?resize=800%2C415&ssl=1
|
||||
[31]: https://template.nuxtjs.org/
|
||||
[32]: https://github.com/nuxt/nuxt.js
|
||||
[33]: https://nuxtjs.org/
|
||||
[34]: https://i2.wp.com/itsfoss.com/wp-content/uploads/2020/09/docusaurus.jpg?resize=800%2C278&ssl=1
|
||||
[35]: https://opensource.facebook.com/
|
||||
[36]: https://github.com/facebook/docusaurus
|
||||
[37]: https://docusaurus.io/
|
||||
[38]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/09/eleventy.png?resize=800%2C375&ssl=1
|
||||
[39]: https://github.com/11ty/eleventy/
|
||||
[40]: https://www.11ty.dev/
|
||||
[41]: https://i0.wp.com/itsfoss.com/wp-content/uploads/2020/09/publii.jpg?resize=800%2C311&ssl=1
|
||||
[42]: https://www.electronjs.org
|
||||
[43]: https://getpublii.com/
|
||||
[44]: https://github.com/GetPublii/Publii
|
||||
[45]: https://i1.wp.com/itsfoss.com/wp-content/uploads/2020/09/primo-af.jpg?resize=800%2C394&ssl=1
|
||||
[46]: https://primo.af/
|
||||
[47]: https://github.com/primo-app/primo-desktop
|
||||
Loading…
Reference in New Issue
Block a user