DEV Community

Cover image for Build unlimited free-forever static sites without a single line of code
Aahnik Daw
Aahnik Daw

Posted on

Build unlimited free-forever static sites without a single line of code

In this digital era, it is very crucial to be able to publish pages online.

We all have different needs. Someone may need to publish their portfolio, while an educational institute may need to publish their curriculum. The uses are endless.

alt text

There is a requirement for a fast and free system, that will allow us to publish pages online.

Notion is a fantastic all-in-one tool to accomplish a variety of tasks.

Heaven 😍

There is one thing that Notion shines in. That is, the creation of beautiful pages. With Notion's drag and drop editor, you can create simple yet stunning pages.

You can have all sorts of formatting like bold, italics, and so on. You have multiple heading levels. You can even change the text color or background color.

You can drag and drop the blocks to organize the page in multiple columns, or even create sub-pages or toggle blocks.

alt text

You can directly embed code or a tweet or a youtube video in a Notion page.

For a full list of blocks, that notion offers, please visit notion.so and try it out yourself, if you have not yet used Notion.

I believe that this is a far superior way of creating content than using Word Docx or google sheets or plain markdown files.

Using the publish to web feature, you can make any Notion page public.

Problem 😥

But Notion does not yet allow custom domains and custom slugs (as on the date this article is published). Plus another big disadvantage is Notion's slow loading time. There is several excess stuff on the page, that makes your viewers wait for the page to load.

Solution 🤩

How to solve this problem?

As of now, the best free way is using loconotion which an open-source python tool written by Leonardo Cavaletti.

GitHub logo leoncvlt / loconotion

📄 Python tool to turn Notion.so pages into lightweight, customizable static websites

Loconotion parses the notion pages to produce static HTML, CSS, and js files, which you can deploy anywhere like GitHub pages or Netlify.

  • You can have custom slugs (just change the name of the HTML files to the slug you want).
  • Loconotion removes unnecessary javascript and CSS to output lightweight pages that load fast.

Enhancement 😎

As of now (April 05, 2021) loconotion outputs all the files in a single directory, which looks very clumsy.

I made a script that can organize all the files generated by loconotion into various subdirectories without breaking any HTML or CSS.

Deploy 😘

You can upload all these files to a GitHub repository, and enable GitHub pages for the repository.

alt text

GitHub pages also allow you to publish the site to a custom domain you own. Read how to set up that in the GitHub Docs.


And thus you have a static site, up and running in a few minutes.

If you make any changes, just push the updated files to the GitHub repo, and they go live.

If you have built any site or pages using this technique, please post a link to that in the comments below.

How do you build fast static sites for publishing some content to the web? Please share your ideas and techniques in the comments below.

I am @aahnik on GitHub. Do check out my projects if you are scrolling. ❤️

Top comments (3)

Collapse
 
mxro profile image
Max Rohde

Thanks this looks very useful. Does loconotion support generating a navigation bar for the page - such as done in this page: docs.basedash.com/data-sources ?

Collapse
 
mxro profile image
Max Rohde

Thanks this looks very useful. Does loconotion support generating a navigation bar for the page?

Collapse
 
aahnik profile image
Aahnik Daw