[!NOTE] Ideally you might want to read this page on the rendered website here to get a feel of how it looks like.
Table of Contents
Webtrotion is a simple to install, configurable to $n^{th}$ limit starter built with the Astro framework in conjunction with Notion. Use it to create an easy-to-use blog or website.
This theme is built based off three major contributions:
Webtrotion was built with the simple idea - most notion based builders, require at least one of these four things:
And I did not want that. We want something that converts well into a static site, can be hosted on github for free using the github.io domain, and can have both pages and blog posts and be configured pretty easily.
Check out the Demo, hosted on Github using Github actions
📝 If you do not choose to add a custom domain, the name of your repository matters. If the name of the repository you create is
⚠️ When you first fork the repository, you will see that the github action output fails. This is because we haven’t added or changed notion integration information. Don’t worry, once you add those, it will run successfully.
constants-config.json
in the web UI. This file is the complete setup file for your website. For now, we will make four major modifications:
database-id
to your database id that you obtained from Notion.author
(this is used for HTML semantics and OG image generation)this-github-repo
)giscus
key. If you do not want you use Giscus, remove value for data-repo
in giscus
and that will disable the feature..github/astro.yml
file. You can choose any cron duration.🥳 And we are done! You can access your website on
📝 Remember, the cron schedule is by default set to every 8 hours. You can change it to run every 2 hours or if you want to push out a change immediately, you can also manually run the github action if you are deploying on github. The workflow name is “Deploy Github Pages”.
Light mode preview
Dark mode preview
ℹ️ Pages or posts are only published if: their Published property is checked AND if the explicit publish date is empty or is before the current date.
Property | Usage |
---|---|
Page | Title of the page or post being rendered |
Tags | Tags displayed for the post |
Excerpt | Description used in OG images and RSS feeds |
Collection | Collection in which the post/page goes. Anything tagged with main or instead, if specified, your menu-pages-collection is rendered as a page. |
Published | Your post or page is only published when you tick publish |
FeaturedImage | Image used to generate your page’s or post’s open graph image |
Specific Slug | The template generates a slug using formula, but if you want a specific slug, you can specify it here |
Explicit Publish Date | By default, the formula considers the date notion page was created to be publish date. You can override it by setting a date for this property. |
Explicit Publish Date | By default, the formula considers the date notion page was last edited to be last edited date. You can override it by setting a date for this property. |
Rank | Want to order single pages (Updates before Papers?) Set rank in ascending order |
Pinned | Pins post to the top of any collection page, except those tagged with MENU_PAGES_COLLECTION |
⚠️ Don’t rename the columns of DB. They are used in the astro code. You can reorder the columns or add any other columns you want.
You can run the code locally by cloning the repo.
cd folder
export NOTION_API_SECRET=YOUR_KEY_HERE
npm install
npm run build #we need to build once because that is when all icons are downloaded
npm run dev
Key | Value |
---|---|
public-ga-tracking-id | Your google tracking property id. Steps here. |
google-search-console-html-tag | Content value of search console property verification tag. More here |
webmention | Webmention API Key and link obtained from https://webmention.io/ |
custom-domain | If you want to host the site somewhere else |
base-path | Or subdomain inside the custom domain |
shortocdes | There are 3 shortcodes atm, two supported, two in works. html shortcode is used to embed html code blocks that start with this line directly into the page. shiki-transform is used to transform code blocks into more expressive representations |
references | To show related pages, external links, and mentioned media at the end of the post. Set POPOVERS to true to display a snippet when hovering over a post link in the body. |
theme | Colors for light mode and dark mode |
fontfamily-google-fonts | Combined URL link for all fonts you want to use from google fonts. Remember to escape spaces in font names if needed |
number-of-posts-per-page | Number of posts in a page for pagination purposes |
enable-lightbox | Set to true if you want people to be able to click on your image to open in a new tab |
request-timeout-ms | Timeout for API requests |
menu-pages-collection | Collection select value in Notion database that decides if these are pages or blogposts. Set this to value you use for pages. |
heading-blocks | Which top-level blocks blocks should form the table of contents on right |
full-preview-collections | Stream like view, where each post is a mini-blog in the same page as a scrollable page instead of being links to individual pages. Any Collection name added to this list will be rendered as stream view. |
hide-underscore-slugs-in-lists | If the slug starts with _, hide those in post lists, rss and sitemap, but still render them, so that you can share them |
home-page-slug | By default is set to “home” but can be anything that you want for the renderer to recognize which is your home page from the database |
og-setup | Open graph setup refers to the images displayed when sharing links. It includes excerpts and creates two columns if a featured image is available. You can customize the title and footnote fonts for the og-image, particularly for non-English blogs. Ensure that each URL has only one font and, if it has a weight, the weight is above 400 |
optimize-images | Converts images to next-gen formats like webp for more responsive sites |
redirects | Intentional redirects, especially if you are moving systems that astro should redirect to |
MIT
If you end up using webtrotion, please consider buying me a coffee here: