GithubHelp home page GithubHelp logo

cyanxiao / nimblog Goto Github PK

View Code? Open in Web Editor NEW
10.0 2.0 1.0 330 KB

๐Ÿ— Build static blog with lines of HTML and Markdown.

Home Page: https://nimblog.vercel.app/

HTML 6.83% TypeScript 70.62% CSS 22.55%
markdown static-site-generator html reactjs web

nimblog's Introduction

Nimblog

npm NPM GitHub top language

Nimblog requires only a few lines of HTML to deploy and is suitable for lightweight bloggers. The demo site 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.js'></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.

๐Ÿ”Ž 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 prettier or formatter so that Markdown content in HTML will not be destructed.

๐Ÿงช Contribution

Feel free to contribute to Nimblog.

Run yarn to install all dependencies.

Nimblog uses Parcel as the build tool. Run yarn dev to make live changes to the project. Run yarn build to build the production version.

Note that Parcel does not support invoking static assets natively, so static files are put in \static to make sure they can be accessed with HMR.

nimblog's People

Contributors

cyanxiao avatar triptych avatar

Stargazers

Gomi avatar Tuan Duc Tran avatar  avatar  avatar  avatar  avatar Sascha avatar Mundi Morgado avatar Jaldhar H. Vyas avatar Marco avatar

Watchers

 avatar  avatar

Forkers

triptych

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.