For analyze time build from the official JAMstack website was selected six of the most popular tools:
All tests for the selected static site generators included the following conditions:
- Markdown files were used as a data source for building static pages, containing several text blocks, headings, links and metadata, without the use of images (example file).
- Before each test, the cache and generated pages after the previous text were cleared so that the generators were in the same conditions.
- Each project was built individually, based on the provided documentation for each static site generator.
- The result of the test is generated static HTML pages from the content in the Markdown files, which can be accessed when the local server is started.
npm init gatsby
cd my-gatsby-site
npm install gatsby-source-filesystem gatsby-transformer-remark
- Create a folder
/src/postsfor files markdown. - Edit the file
gatsby-config.jsby adding inplugins:
"gatsby-transformer-remark",
{
resolve: 'gatsby-source-filesystem',
options: {
"name": "pages",
"path": "./src/pages/"
},
__key: "pages"
}
- Create
src/components/layout.jswith code:
import React from "react"
export default function Layout({ children }) {
return (
<div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
{children}
</div>
)
}
- Create a file
{MarkdownRemark.frontmatter__slug}.jsin/src/pageswith code:
import { graphql } from "gatsby";
import * as React from "react";
import Layout from "../components/layout";
export default function BlogPostTemplate({ data: { markdownRemark } }) {
const { frontmatter, html } = markdownRemark;
return (
<Layout>
<h1>{frontmatter.title}</h1>
<h2>{frontmatter.date}</h2>
<div className="post-body" dangerouslySetInnerHTML={{ __html: html }} />
</Layout>
);
}
export const pageQuery = graphql`
query ($id: String!) {
markdownRemark(id: { eq: $id }) {
html
frontmatter {
date(formatString: "MMMM DD, YYYY")
title
}
}
}
`;
Run App: npm run develop.
Your site is now running at http://localhost:8000.
- Download the latest zipped Hugo executable from Hugo Releases.
- Extract all contents to your
..\Hugo\bin folder. - In PowerShell or your preferred CLI, add the hugo.exe executable to your PATH by navigating to
C:\Hugo\bin(or the location of yourhugo.exefile) and use the command setPATH=%PATH%;C:\Hugo\bin. If the hugo command does not work after a reboot, you may have to run the command prompt as administrator.
hugo new site quickstart
cd quickstart
- Create a folder for static posts
/public/posts. - Create a folder for markdown files
/content.
hugo -D
#or
hugo server -D
gem install jekyll bundler
jekyll new myblog
cd myblog
jekyll build
npx create-next-app --example blog-starter blog-starter-app
# or
yarn create next-app --example blog-starter blog-starter-app
# or
pnpm create next-app --example blog-starter blog-starter-app
cd blog-starter-app
- Create a folder for markdown files
/_posts. - Code index.js file for our example file markdown:
import Container from '../components/container'
import MoreStories from '../components/more-stories'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getAllPosts } from '../lib/api'
import Head from 'next/head'
import { CMS_NAME } from '../lib/constants'
export default function Index({ allPosts }) {
const heroPost = allPosts[0]
const morePosts = allPosts.slice(1)
return (
<>
<Layout>
<Head>
<title>Next.js Blog Example with {CMS_NAME}</title>
</Head>
<Container>
<Intro />
{heroPost && (
<HeroPost
title={heroPost.title}
date={heroPost.date}
slug={heroPost.slug}
/>
)}
{morePosts.length > 0 && <MoreStories posts={morePosts} />}
</Container>
</Layout>
</>
)
}
export async function getStaticProps() {
const allPosts = getAllPosts([
'title',
'date',
'slug',
'author',
'coverImage',
'excerpt',
])
return {
props: { allPosts },
}
}
- Intsall library gnomon:
npm install -g gnomon. - Run app:
npm run build | gnomon
npx create-nuxt-app <project-name>
#or
yarn create nuxt-app <project-name>
cd <project-name>
- Create a file
/pages/blog/_slug.vuewith this code:
<template>
<article>
<nuxt-content :document="article" />
</article>
</template>
<script>
export default {
async asyncData({ $content, params }) {
const article = await $content('articles', params.slug).fetch()
return { article }
}
}
</script>
- Create a folder
/content/articlesfor markdown files. - Intsall library gnomon:
npm install -g gnomon. - Run app:
npm run build | gnomon
npm install -g hexo-cli
npm install -g gnomon
hexo init <project-name>
cd <project-name>
npm install
hexo generate | gnomon