What is Flowershow?
Flowershow 🌷 is a free and open-source tool for easily converting your markdown files into an elegant website. It's built on a standard, modern web stack – React, Next.js, and Tailwind and shipped with a basic default theme to get you started with just a few clicks🖱️.
Following the steps below, or using our tutorial, you can turn your markdown notes into an elegant website and tailor it to your needs.
1. Prepare the content
🚧 Flowershow CLI is not yet supported on Windows
❕ Make sure you have Node.js installed
First, you'll need a folder with some markdown files you'd like to publish. You can use an existing one, e.g. your Obsidian vault. This folder should include at least a single index.md file at the root level, which will be used to generate the home page of your website. If it doesn't exist, Flowershow CLI will create it for you.
To create this folder from scratch, you can do:
mkdir my-digital-garden
cd my-digital-garden
echo 'Hello, world!' > index.md
You can create as many subfolders within your content folder as you want. Its directory tree will be reflected in URL paths on the published website, e.g.: my-digital-garden/blog/hello.md file content will be available under <base-url-of-your-published-website>/blog/hello.
Each folder can have its own index.md file, which will be available under its parent directory path, e.g. my-content/blog/index.md will be available under <base-url-of-your-published-website>/blog.
In order to embed files (e.g. images or pdfs) in your markdown files, you will also need to create a dedicated folder for them in your digital garden directory.
If you're an Obsidian user, you can set this folder as an attachments folder, by right-clicking on it in the sidebar on the left hand side. This way all embedded files will be saved to this folder automatically when you copy them to your notes.
You can create this folder by running:
mkdir my-digital-garden/assets #this can be any other name
If you don't use git version control system to track changes in your digital garden yet, we recommend setting it up. Check GitHub quickstart to learn more.
2. Install Flowershow template
In order to build your beautiful personal website out of your digital garden, you first need to install Flowershow template. This template will be linked to your digital garden after the installation process.
So, let's imagine you have the following folder structure:
some-parent-dir
├── my-digital-garden
│ ├── assets
│ └── index.md
└── ...
If you want to install Flowershow in some-parents-dir you can either:
- go to that directory and run
npx flowershow@latest install
cd some-parent-dir
npx flowershow@latest install
You'll be asked to confirm if you want to install it in the current directory.
? Create Flowershow project in current directory? Yes
- ...or you can pass this directory as an argument to the install command.
npx flowershow@latest install some-parent-dir
After running the install command you'll be shown a set of prompts, that will allow you to properly set up Flowershow with your digital garden.
? Path to the folder with your content files
my-digital-garden
? Select a folder with your assets (attachments) (Use arrow keys)
❯ assets
──────────────
I don't need assets folder
Cancel
🌷 Installing Flowershow template in /home/me/some-parent-dir/.flowershow
⏳ Installing Flowershow dependencies...
At the end you should see .flowershow folder created in the target directory. In our example the folder structure will look like this:
some-parent-dir
├── my-digital-garden
│ ├── assets
│ ├── config.js
│ └── index.md
├── .flowershow
└── ...
Note that config.js and index.md files will be created automatically if they didn't exist in your digital garden folder yet. The config file will allow you to do some basic configurations of your Flowershow app.
(Optional) customize your website
You can now customize your website by wrapping your content in custom layouts, using custom components in you Markdown files, importing data from files and more.
Build your website
You can preview your website locally by running the following command in the directory where .flowershow has been installed:
npx flowershow preview
...or by passing this directory as a command argument:
npx flowershow preview some-parent-dir
After running this command, you will now be able to see your website on http://localhost:3000/ - it will reload every time you make some changes to your content.
If you're ready to publish your site, you can now build it with the following command:
npx flowershow build-static
# or npx flowershow build-static some-parent-dir
It will create a .flowershow/out folder with all the resulting static files.
Feedback🙏
Please take it for a spin and let us know your feedback in the github discussion thread or our new discord chat forum.
Top comments (0)