How to use Paperbits Open source Drag and drop Content builder and free website generator to develop website for free part - I
Free website development | Open source website development | Drag and drop website development Tool for free
Below things needed for the developer environment.
Pre requisites:
Nodejs
Visual studio code or any code editor
For hosting we will use GitHub Pages, steps at the end of tutorial.
Follow the getting started tutorial in the portal important steps added here:
Run the below commands in Visual studio code terminal or in cmd line.
Clone the demo project from GitHub:
git clone github.com/paperbits/paperbits-demo.git
Switch into just cloned directory:
cd paperbits-demo
Install packages required for work:
npm install
Run demo site:
npm start
Now you will be able to see an application running in the localhost port 3000 or other local ports.
- Now you can drag and drop sections, elements, widget, tiles and design the website easily.
Above image shows the section with background image in editor.
After the design changes click on save button you can see the json file downloaded.
Replace that file contents into the demo.json file in the solution folder : src/data.
- Publish modified content
npm run publish
If you run this command, it will generate a static website in ./dist/website/ folder of the project.
Then upload that folder into the GitHub repo you created newly and then in settings of GitHub repo change it to website and point it to master branch.
All these steps are better explained in the following version of this article:
That's all now you have created a website for free with free hosting with speed loading from GitHub.
Below is the Paperbits framework portal :
GitHub repo: https://github.com/paperbits