idyll-multipage
Template for an Idyll blog with multiple posts.
Project overview
posts
- all of the available posts, each directory within contains a full idyll postcomponents
- 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 runidyll 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 itdocs
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/ --no-install
.
Developing a post locally
Navigate to the post's directory and run idyll
.
Developing the index page
Navigate to the root of this project 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. To change the output location, change the output
option in package.json
in the template directory and at the root of this project (and any existing posts!).
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.