Static site generators

There are many static site generators to help you turn Markdown into HTML. This guide uses Eleventy. Literally!

1. Create a fresh Architect project, go into your project directory, create a package.json file, and install npm packages.

npm init @architect --static ./my-ssg
cd my-ssg
npm init -f
npm install @architect/sandbox @11ty/eleventy @11ty/eleventy-plugin-syntaxhighlight

2. Change your build folder configuration in the app.arc file inside your project to the following, and then save the file.

@app
my-ssg

@static
folder _site

3. Update the build script in the package.json file inside your project:

"scripts": {
  "build": "eleventy",
  "watch": "eleventy --serve",
  "start": "npm run watch & ARC_STATIC_SPA=false sandbox"
}

Note: We opt out of loading index.html by setting ARC_STATIC_SPA=false in the sandbox in one of the npm start scripts.

4. Add an .eleventy.js configuration file to the root of your project to enable syntax highlighting and to set the source directory to src/md.

let syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin(syntaxHighlight)
  return {
    dir: {
      input: 'src/md'
    }
  }
}

5. Add a src directory and an md directory inside it, and then add an index.md Markdown file to your md directory.

# hi from markdown

- cool
- bullet
- list

6. Preview by starting the dev server.

npm start

7. Clone the example source: