Discover an open source project that lets you create a website with a JSON file.

Github：https://github.com/jsonsite/jsonsite

Do a fork, add your URL, and bam, you’ve got a nice looking website with a JSON file. And all the sites are hosted by Vercel and they have amazing uptime and CDN.

Sounds good, but how does it work?

  • JSONsite will get the JSON file from the URL provided
  • JSONsite will then begin parsing the data and pass it to Nunjucks.
  • HTML output from Nunjucks will be minimized
  • Your site will be ready when you select the Slug!

So it’s basically like this:

{
  "title": "My website"."description": "The amazing website of John Doe"."image": "https://cdn.glitch.com/1788ed8a-5cc6-45e9-a3b6-18d6457af699%2Fundraw_profile_pic_ic5t.png?v=1606325421049"."author": "Zhang Zhang"."theme": {
    "navbar_color": "dark"."jumbotron_color": "light"."footer_color": "light"
  },
  "pages": [{"title": "Home page"."id": "main"."content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor urna nunc id cursus. Maecenas ultricies mi eget mauris pharetra et ultrices. Nunc consequat interdum varius sit. Suspendisse sed nisi lacus sed. Tempor id eu nisl nunc mi ipsum faucibus vitae. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar. Euismod quis viverra nibh cras pulvinar mattis nunc sed blandit. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Platea dictumst quisque sagittis purus sit amet volutpat consequat. Interdum velit laoreet id donec ultrices tincidunt arcu non. Et netus et malesuada fames. Ipsum faucibus vitae aliquet nec ullamcorper sit. Ultricies mi eget mauris pharetra et. Etiam tempor orci eu lobortis elementum nibh tellus molestie. Dolor sit amet consectetur adipiscing. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Ac tincidunt vitae semper quis lectus nulla at. Odio ut sem nulla pharetra diam sit amet. Viverra adipiscing at in tellus."
    },
    {
      "title": "About"."id": "about"."content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Luctus accumsan tortor posuere ac ut consequat semper  viverra. Pharetra magna ac placerat vestibulum lectus mauris. Scelerisque in dictum non consectetur a erat nam at lectus. Vel pharetra vel turpis nunc eget lorem dolor sed viverra. Duis ultricies lacus sed turpis tincidunt id aliquet risus feugiat. Gravida in fermentum et sollicitudin. Quam vulputate dignissim suspendisse in est ante in nibh mauris. Sit amet mauris commodo quis. Bibendum enim facilisis gravida neque convallis a. Quis imperdiet massa tincidunt nunc pulvinar. Leo a diam sollicitudin tempor id. Sit amet facilisis magna etiam. Pharetra sit amet aliquam id diam maecenas ultricies. Nulla at volutpat diam ut venenatis tellus. Eget lorem dolor sed viverra ipsum nunc. Lobortis scelerisque fermentum dui faucibus in. Amet cursus sit amet dictum sit amet justo donec enim. Posuere urna nec tincidunt praesent semper feugiat."
    },
    {
      "title": "Contact"."id": "contact"."content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue ut lectus arcu bibendum at varius. Hac habitasse platea dictumst vestibulum rhoncus est. Tincidunt vitae semper quis lectus nulla at volutpat diam. Eu non diam  phasellus vestibulum lorem sed risus ultricies. Posuere lorem ipsum dolor sit amet consectetur. Mauris sit amet massa vitae tortor. Malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Diam volutpat commodo sed egestas egestas. Orci sagittis eu volutpat odio facilisis. Dui ut ornare lectus sit amet. Nisl vel pretium lectus quam id leo in  vitae turpis. Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Arcu non sodales neque sodales ut etiam sit amet. Scelerisque purus semper eget duis at. Ac turpis egestas sed tempus urna et pharetra. Platea dictumst quisque sagittis purus."}]."footer": "© 2020 John Doe. All Rights Reserved."."javascript": "console.log('Oooh look, custom JavaScript! ')"."css": "/* You can put custom CSS here! * /"
}
Copy the code

It would look like this:

All on one page, one site. The “pages” are toggled in JavaScript, but because they are all on one page, they are very fast.

Download the project from Github and run Yarn Start to start the project, but it needs to load the remote JSON file. Configure it here:

I quickly started an HTTP service on the machine using the HTTP-server node package, and when it started it loaded the JSON.

Open Source Recommended Series

  • Open source recommended | 10 amazing CSS suite of restoring ancient ways
  • Open source recommended | Vue. Js shuffling hot selected library
  • Open source recommended | 19 front-end developer survival tool
  • Open source recommended | 10 + a cool Vue. Js components, templates and demo sample
  • Open source recommended | JSONsite: using JSON file creation SPA page
  • Open source recommended | using GPU. Js JavaScript performance
  • Open source recommended | how to convert the HTML form into elegant PDF, several schemes comparison
  • Open source recommended | I can not live without the five Vue. Js library
  • Open source recommended | 8 JavaScript library can better deal with the local store
  • Open source recommended | Node development artifact: use the Llama Node error Logs real-time visualization
  • Open source recommended | you should know about 23 very useful NodeJS library
  • Open source recommended | 10 beautiful VSCode Light color (Light)
  • Open source recommended | 2019 six JavaScript library user authentication
  • Open source recommended | UI library which support dark pattern?
  • Open source recommended | 5 you don’t know JavaScript string processing library
  • Open source recommended | 9 CSS tools for Web developers
  • Open source recommended | in addition to ali iconfont icon library, and the 10 open source SVG icon library
  • 7 great JavaScript product step bootstrap libraries that you don’t need