How to use Paperbits Open source Drag and drop Content builder and free website generator to create a website part -II
Website designer open source free | Designer used in Azure API management developer portal | Open source Drag and drop website builder
{tocify} $title={Table of Contents}
This is a part-II article continuing this part-I, Here you will see detailed steps for working in Paperbits framework.
This Paperbits framework is used in Azure API Management Developer portal, so you can use this article to Customize the Developer portal.
For exploring this Paperbits framework and also to contribute someone with the website, I have contributed this Youtube Channel to have an website developed using Paperbits framework for free as an contribution to education.
You can find that website here: https://tnpscquickies.com which is completely developed by this framework and hosted in GitHub pages freely. Follow this tutorial for the detailed steps for the same.
After following Part-I article clone of the Paperbits repo and running the application locally using npm start command a portal will open like the image below at url: http://localhost:8080/
In the above image the highlighted ones are the menu to edit the website.
Above image shows the pages menu, where you can add a page or edit a page properties, if we select a page it will show like below menu to edit title and link of the page(URL) and also will show the current page in editor to edit the content.
After doing any edit click on save button highlighted below:
Then an json file will download copy the file and replace it in the following file: \src\data\demo.json, now your website will reload or click F5 to refresh the changes.
Editing a Page:
Select a page in pages menu, then you can add a section like on hover of your mouse in center of a section you can see plus sign highlighted in green below for adding section and for editing any section click edit icon highlighted in red below.
You can edit the background of Section by clicking on edit of section and then selecting background with colors or gradients.
Final website is available here:
For your reference I have placed the whole customized website code along with Paperbits source code in the repo: SSanjeevi/Paperbits-Clone-Sample-TNPSCQuickies This repository contains an example of how using Paperbits you can enable advanced content authoring tools in your web…github.com
Its hosted in the following public repository as GitHub pages: SSanjeevi/BlazorAppClient Contribute to SSanjeevi/BlazorAppClient development by creating an account on GitHub.github.com
There you can refer i have added the following files in addition to the website files generated from Paperbits framework:
nojekyll
404.html
CNAME
In order for the custom host website to work.
ReplyDeleteThis article is really good and helped me a lot to setup techotalk
thanks a lot sir.