Great repository names are short and memorable. Need inspiration? How about legendary-pancake. —GitHub
legendary-pancake is an advanced static site generator based on webpack, React and React Router.
You define each of your page programmatically:
const pages = {
'/': (callback) => {
callback(<Layout><HomePage /></Layout>)
},
'/profile/': (callback) => {
callback(<Layout><ProfilePage /></Layout>)
}
}
for (const article of require('./articles')) {
pages[`/articles/${article.slug}/`] = (callback) => {
article.loadContent().then((content) => {
callback(<Layout><ArticlePage content={content} /></Layout>)
})
}
}
export default pagesThen legendary-pancake renders these pages into static HTML and also generates a client side bundle to further enhance the experience.
It has been extracted from Taskworld’s marketing site which requires:
-
Localization. The entire site may be translated into multiple languages.
-
A/B testing. We sometimes must generate more than one version of the same page to be able to perform A/B testing.
-
Prerendering. As a marketing site, web page performance is very important. The page must appear as quickly as possible. We need to prerender every page into static HTML files, so that they can be served quickly.
-
Code splitting. With many pages, it’s too slow to download the entire site’s content. It’s also not good to load each page on demand. We must be able to group related pages together to make navigation between related pages instantaneous.
Therefore, it has been designed for advanced users and gives you total control of:
-
Your site structure. Unlike Gatsby, it doesn’t generate routes based on filesystem layout. You define every route programmatically.
-
How you write CSS. PostCSS? PreCSS? cssnext? Sass? LESS? Stylus? CSS Modules? Autoprefixer? Inline Styles? legendary-pancake has no preference on this.
-
The prerendering process. You decide how your React element gets turned into an HTML file.
You can use libraries like react-document-title, react-helmet to help with
<head>elements, or roll your own solution. Inline your critical CSS or JS in your HTML file, or just use normal<script>tags. It’s all up to you. -
Route loading. legendary-pancake has no preference on how to load your page contents. For small sites, you can package the entire site content in a single bundle.
Or you can use webpack’s code splitting or bundle-loader to split your contents into multiple chunks which are loaded asynchronously, either eagerly or on-demand. Create a chunk for every page, or group related pages together based on analytics data, like we do at Taskworld. You’re in total control.
-
Your deployment process. legendary-pancake can be configured to render pages into a different directory from the webpack assets. This allows for some advanced use-cases, such as A/B testing a static site.
But legendary-pancake will take care of these for you:
-
Development and building workflow. It comes with a CLI tool to run the development server and generate the static site.
-
Managing URLs and route transitions. legendary-pancake preconfigures React Router to support asynchronous routing and prerendering at the same time.
- legendary-pancake’s home page is generated by legendary-pancake. The source code lives in the examples/homepage directory.