하나의 JSON 파일로 웹 사이트를 만들 수 있는 것을 만들었습니다. 포크를 만들고 URL과 bam을 추가하십시오. JSON 파일로 만든 멋진 사이트입니다. 그리고 이 모든 것이 놀라운 가동 시간과 CDN을 통해 Vercel에서 호스팅됩니다.

좋은 것 같지만 어떻게 작동합니까?

JSONsite는 제공된 URL에서 JSON 파일을 가져옵니다

.

그러면 JSONsite가 해당 데이터를 구문 분석하기 시작하고 nunjucks에 전달합니다

.

nunjucks에서 출력된 HTML이 축소됩니다

.

선택한 슬러그에서 사이트가 준비됩니다!

따라서 기본적으로 다음과 같습니다.

{
  "title": "John's 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": "John Doe",
  "theme": {
    "navbar_color": "dark",
    "jumbotron_color": "light",
    "footer_color": "light"
  },
  "pages": [
    {
      "title": "Main",
      "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! */"
}

다음과 같이 바뀝니다.



그리고 모든 것이 한 페이지에 있습니다! 그리고 각 페이지마다 서비스 워커가 있습니다!

jsonsite / jsonsite

JSON 파일로 간단한 웹사이트를 만들고 무료로 호스팅하세요! 매시간 사이트 업데이트(:00)

JSON사이트

JSONsite를 사용하면 JSON 파일을 가져와 미니 페이지가 있는 SPA로 전환할 수 있습니다.
기본적으로 JSON 파일을 추가합니다(GitHub Gists 또는 Pastebin과 같은 파일에 넣을 수 있음).
그리고 JSONsite는 그것을 가져와 완전한 웹사이트로 변환할 것입니다. JSON 파일은 다음과 같습니다.

{
  "title": "John's 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": "John Doe",
  "template": "default.njk",
  "theme": {
    "navbar-color": "dark",
    "jumbotron-color": "light",
    "footer-color": "light"
  },
  "pages": [
    {
      "title": "Main",
      "id": "

…


View on GitHub