Hosting Phenomic Static Site Generator Sites

February 20, 2017

Phenomic is a static site generator. Its claim to fame is letting you use ReactJS to create your template using web components. Content is in Markdown files, or any other format, including React.

Phenomic is customizable. You can choose your own Markdown engine, CSS processor, and CSS in JS, or inline style solutions.

There are some high-profile websites built in Phenomic already.

Hosting Phenomic is as simple as any static site on Aerobatic. Let's get started.

Install Phenomic

Prerequisite: Node JS installed

  1. mkdir your-site
  2. cd your-site
  3. npm install phenomic - you'll see some errors from npm, which you can ignore for now.
  4. ./node_modules/.bin/phenomic setup (or on Windows, use backslashes)
  5. Setup will ask you some questions, generate a package.json file for you, and install the base theme.
  6. npm install to install the dependencies.

Preview your Site

Use npm start to preview your site in your browser. Phenomic includes hot-reloading. The web page updates automatically whenever you make changes in your editor.

Build the Site

Building a Phenomic site is simply npm run build. This makes your website into the dist folder.

Deploy to Aerobatic

  1. Login to Aerobatic (if you haven't already) aero login
  2. Create the Aerobatic site aero create. This makes a file called aerobatic.yml in your directory. The file contains the application ID and other configuration information.
  3. Deploy to Aerobatic: aero deploy -d dist

That's it! Your site should be live at the URL that the aero command tells you when complete.

Similar Projects

GatsbyJS is a similar project worth checking out. We have an article on Gatsby here.

There is also the static site generator webpack plugin.

Next steps