Generate a minimalistic blog from a Notion table. [WIP]
Generate a minimalistic blog from a Notion.so table.
Below are some screenshots of my blog. 🙂
| Mobile | Desktop |
| :---------------------------: | :----------------------------: |
| |
|
| Management Interface on Notion.so |
| :-------------------------------: |
| |
Make sure you have Node.js v12.0.0 or higher. Check with command
node -v.For existing users who want to upgrade from v0.3.x, please go through all below steps (do a clean install), except that you can continue to use your Notion table.
Install Notablog.
bash npm i -g notablog
notablog-starterrepository.
bash git clone https://github.com/dragonman225/notablog-starter.git
Duplicate this Notion table template.
Make the table you've duplicated public and copy its URL for the next step.
Go into
notablog-starter/directory, open
config.json. Replace the value of
urlwith the URL of the table you've duplicated.
Inside
notablog-starter/directory, run command:
notablog generate .
notablog-starter/public/directory, open
index.htmlwith a browser to preview your site.
previewBrowserfield in
config.jsonto the path of a browser executable you have on your computer and issue the following command anywhere to preview.
notablog preview
You can copy files in
notablog-starter/public/directory to a server or upload them to any static hosting service to share your content with the world.
Whenever you want to update your site, go into
notablog-starter/directory and issue command
notablog generate ., or issue the command from outside
notablog-starter/with the pattern
notablog generate.
Some options for static hosting services:
Some options for self-hosting:
This is the documentation of Notion table template
| Column Name | Property Type | Description | | :-----------: | :------------: | :----------------------------------------------------------: | |
title|
Title| The page title. | |
tags|
Multi-Select| Topics related to the page. | |
publish|
Checkbox| Determine if a page should be rendered. | |
inMenu|
Checkbox| Determine if a page should appear in the navigation bar. | |
inList|
Checkbox| Determine if a page should appear in the article list. | |
template|
Select| Specify which template to use for the page. Available template names depend on the theme you use. | |
url|
Text| A string to be used as the filename and the URL of the generated page. It should not contain
/and
\. If it's empty, the
idof the page is used. | |
description|
Text| Short intro of the page. Styles are working. | |
date|
Date| User customizable date, convenient for importing posts from other platforms or adjusting the order of posts. |
publishbut leave
inMenuand
inListunchecked to make a page seem like hidden because people can only view it when they know its URL.
notablogitself is designed to be installed as a dependency, and invoked from NPM script. This way we can separate application code and user assets so that it's less confusing for a user. To make things even more simple, I have prepared
notablog-starter, so a user doesn't have to setup folder structure manually. The concept is inspired by a popular project hexo.
With the design, a user only sees
notablog-starterwhen using, therefore the following documentation will be in the context of
notablog-starter.
notablog-starter ├── config.json ├── public ├── source │ └── notion_cache └── themes └── pure
config.json- Site config.
| Field | Type | Description | | :---: | :----: | :----------------------------------------------------------: | | url | string | The URL of a Notion table compatible with Notablog. | | theme | string | The theme to use. It should be one of the folder names in
themes/. |
public/- Contains generated static assets of the blog.
source/notion_cache/- Cached JSON files of Notion pages. They are used when a user runs
npm run generate, if a page contains no changes, the generator reads data from these cached files.
themes/- Store themes.
A theme contains layout templates, CSS files, fonts, and other assets that shapes the style and look of a blog.
├── layout └── assets
notablog-starter/config.json.
layout/- Contains page templates. It is required to have at least one index layout (
index.html) and one post layout (
post.html). You can have more templates, and a user can use those bonus templates by specifying the template's filename in
templatefield on Notion.
assets/- Other assets. Anything in this folder will be copied to
notablog-starter/public/when running
npm run generate.
Currently, I use Squirrelly.js as template engine.
Template
index.htmlgets the following structure of data :
{ siteMeta { icon // Emoji or URL iconHTML // Rendered HTML cover // URL title // String description // Raw array, do not use descriptionPlain // Rendered plain text, no style descriptionHTML // Rendered HTML, with style pages { // An array of page id // Notion's page id icon // Emoji or URL iconHTML // Rendered HTML cover // URL title // String tags // An array, [{ color: string, value: string }] publish // Boolean, `true` if publish is checked. inMenu // Boolean, `true` if inMenu is checked. inList // Boolean, `true` if inList is checked. template // Template name url // URL of the page relative to site root description // Raw array, do not use descriptionPlain // Rendered plain text, no style descriptionHTML // Rendered HTML, with style date // Raw string, e.g. 2019-08-09 dateString // Formatted, e.g. Fri, Aug 9, 2019 createdTime // Unix timestamp lastEditedTime // Unix timestamp } } }
post.htmlor others gets the following structure of data :
{ siteMeta // The same as "siteMeta" in index.html post { ...post // All properties of a page in "siteMeta.pages" contentHTML // HTML of post body } }
It is highly recommended to take a look at notablog-theme-pure if you want to make your own !
Generated by
dependency-cruiserNPM package.
See https://dragonman225.js.org/notablog-stat.html
masteris the working branch, latest release is
v0.4.1, which is at branch
v0.4.1.