1

GitHub - imchell/nimblog: Build static blog with lines of HTML and Markdown.

 2 years ago
source link: https://github.com/imchell/nimblog
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Header

Nimblog

Nimblog requires only a few lines of HTML to deploy and is suitable for lightweight bloggers. The official guide is built with Nimblog, check it out for more information.

Nimblog
  • Runs on static website hosting platform, such as GitHub Pages.
  • Easy to customize themes, as you only need to bring in your own CSS files.
  • Use heti to optimize the layout.

I recommend the directory structure below.

index.html
your_essay_1.md
your_essay_2.md
your_pic_1.jpg
...

Then paste the following content in index.html.

<!DOCTYPE html>
<html lang='en'>
<head>
  <link rel="stylesheet" href="https://unpkg.com/nimblog/dist/production/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset='UTF-8'>
  <title>Nimblog</title>
</head>
<body>
# [Your Blog](/)
- [your essay 1](your_essay_1.md)
- [your essay 2](your_essay_2.md)
<script type='module' src='https://unpkg.com/nimblog/dist/production/index.css'></script>
</body>
</html>

As you can see, you can write Markdown directly in <body> and link to your Markdown documents. Once you're done, just upload this directory to a static website hosting platform.

Note Markdown in <body> supports any kind of links but only ones ending with .md & .txt and with text\markdown content type are parsed as blog post links under the hood.

mag_right Live Preview

Copy & paste code below to edit online with W3Schools Online Editor.

<!DOCTYPE html>
<html lang='en'>
<head>
  <link rel="stylesheet" href="https://unpkg.com/nimblog/dist/production/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset='UTF-8'>
  <title>Nimblog</title>
</head>
<body>
# [Nimblog Intro](/)
- [How to Use](https://unpkg.com/nimblog/dist/production/how-to-use.md)
- [Contribution](https://unpkg.com/nimblog/dist/production/contribution.md)
<script type='module' src='https://unpkg.com/nimblog/dist/production/index.js'></script>
</body>
</html>

Note If you want to try it in other online editor like StackBlitz, make sure to turn off preffier or formatter so that Markdown content in HTML will not be destructed.

test_tube Contribution

Feel free to contribute to Nimblog. Visit official guide contribution page.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK