Hello-markdown: Server-side markdown renderer, using hello-webpage

hello-markdown


Server-side markdown renderer, using hello-webpage

:man_shrugging: How does it work?

hello-webpage templates use something called lws (local web server) to serve static files (e.g. stylesheets, html files, javascript files, images, basically anything that does not need to be rendered by a server).
lws also allows you to configure the webserver (like setting up a username/password, setting up logs, etc) using a javascript file. The way you can config lws to fit your needs.
You can also “trick” lws into running code that is not configuration (like rendering markdown, getting posts from GhostCMS, etc)

:gear: How does it render markdown/save it?

Marked renders the markdown and fs (file system) saves it.

:art: What stylesheet does this use?

github-markdown-css

:computer: How do I get started?

  1. Remix this project here
  2. Make some pages (markdown is obviously supported, they must end with .md). If you make a page called contact.md, the path would be /contact.
  3. Run refresh. You have to run refresh to refresh lws because since hello-webpage is a static site, Glitch does monitor/reload lws.

:woman_artist: How do I customize the layout?

The layout is stored in layout.html. The main content can be access by using the keyword: {{ content }} (sort of like nunjucks)

:stopwatch: Can I use this to keep my app on 24/7?

No. As @wh0 pointed out, Glitch will initially use lws to serve the files, then move it to S3 (apparently) which is why some static sites go to sleep.

:eyes: Examples

:gem: NEW! Blogging feature.

Place your posts in the posts folder with the following format:

[YYYY]-[MM]-[DD]-[TITLE].md

Your post archive can be found at /posts. Example

Project URL: https://hello-markdown.glitch.me

9 Likes

Jekyll 2.0??

Not really as you would have to do a bunch of things to even install it.

1 Like

Yay! All 100s in Lightouse:

Mobile:

Desktop:

4 Likes

Woohoo! That’s really hard!

1 Like

Currently hello-markdown uses Marked to parse markdown, but I think I might change it to markdown-it and add html-mimifier.

Edit: this might but put on hold until my power goes back up

1 Like

Can I have a bit of info on what the null.config.js file is?

1 Like

Basically, then lws tries to read from the config, it will also execute code that is not config (module.exports)

1 Like

Ok, I switched the parser to markdown-it and added a few plugins such as footnotes, emojis, etc.

1 Like

Twemoji is the best

1 Like

Should be cheatsheet :wink:

1 Like

;-;

ok then

Should I add the ability to generate pages from something like GhostCMS or a json file?

Ooh hello-markdown was featured on PatchingHQ


This is really cool and makes me wonder what this can be used for in sites that need to be compiled (like react).

2 Likes

Prerendered react YES, although that also sounds like eleventy

Yes, I did design it to be like 11ty, but less features (so it does not eat up your memory

Thats cool!

1 Like

The “CMS” part is now ready! It kind of works like Jekyll. Check it out here!

This is how it works:

[YYYY]-[MM]-[DD]-[TITLE].md

Example entry:

2020-10-29-firstpost.md
1 Like