There's a new article about using the latest gatsby theme
gatsby-theme-blorg to create website with loads of convenient features. Check it out.
Gatsby is an awesome modern website builder. It is one of the top ones according to this website. Org-mode is, in my own opinion, the best plain text system that strikes the perfect balance (again, to me) between simplicity and versatility. I feel the urge to combine these two. And here you go.
You need nodejs installed in your system for this solution to work.
We are going to use a gatsby starter template designed with org-mode support in mind. I have done all the heavy lifting (and keep it working) so you don't need to.
Get gatsby CLI.
npm install -g gatsby-cli
Create a new website with a starter template with org-mode support.
gatsby new my-org-website https://github.com/orgapp/gatsby-starter-orga
Get it going in your browser.
cd my-org-website/ npm run develop
Your site is now running at http://localhost:8000! It looks very basic because it's up to you to make it your own.
How Does it Work
Gatsby is a static website generator. So basically it takes a bunch of files as input and spit out a website as an output. In this case, the input is mostly your org files. By default they are in a folder called
content under the root of the project. It should contain some example files to show you how it works. But it can be changed in
gatsby-config.js using the
contentPath option. Relative path is supported. E.g.
There are two ways for it to recognize your content as a
- Standalone org files with a title.
- Sections with keyword that matches
ORGA_PUBLISH_KEYWORDin buffer setting.
Take a look at the dummy content for details.
Oh, it generates index pages too. Again see the documentation for details.
gatsby-config.js and take a look at the
plugins section. It should be pretty self-explanatory with the comments. I don't want to put too much technical details here because they don't age well. Use the
README.md file as the definitive source of documentation.