/idyll-multipage-example

Example repo for setting up an Idyll blog with multiple posts.

Primary LanguageJavaScriptMIT LicenseMIT

idyll-multipage-example

Example repo for setting up an Idyll blog with multiple posts.

Project overview

  • posts - all of the available posts, each directory within contains a full idyll post
  • components - shared components, can be used by any post. Each post also has its own components folder where you can put components that don't need to be shared.
  • template - the post template to use when you run idyll create. Update this template with site specific styles, configuration, etc.
  • index.idyll - the root/index page for the blog. Note this is not autogenerated.
  • docs - the folder where the output is built. Deploy to any static hosting service (we name it docs so its easy to host on github pages).

Installation

  • Make sure you have idyll installed (npm i -g idyll).
  • Clone this repo and run npm install.

Creating a post

Navigate to the posts directory and run idyll create --template ../template/

Developing a post locally

Navigate to the post's directory and run idyll.

Building a post for production

Navigate to the post's directory and run idyll build. The output will appear in the top-level docs folder.

Deploying

Make sure all of your posts have been built, then deploy the docs folder via any static hosting service.

Dependencies

You can install custom dependencies on a per-post basis by running npm install <package-name> --save in the post directory. Note that any collaborators will also need download the package locally by running npm install after pulling the changes.

Known limitations

  • Note that idyll.pub (used by the idyll publish command) does not yet support multi-page projects such as this one, so it is up to you host the output online.
  • The index page needs to be updated manually, it is not yet autogenerated based on the posts directory.