Zhixuan0318 / IPFS-Blog-Engine

IPFS Blog Engine compiles blog page created by user into JSON data and deploys it to IPFS via Web3.storage and undergoes additional pinning via Pinata. The blog page CID can be used to render the JSON-formatted blog page with the specially-designed Render Machine.

IPFS Blog Engine ⚡

Synopsis

The IPFS Blog Engine and Render Machine (built to render blog page from JSON data) serves as the foundation for a Web3.0 blog site and has the ability to scale into a Web3.0 and blockchain-based CMS (Content Management System). It allows users to create a blog page with a simple user interface and then compile all of the blog page's components and uploaded contents into JSON data. The JSON file will then be deployed and stored on the IPFS (Interplanetary File System), which is a distributed file system, with the help of Web3.storage and Pinata. Users can now render, display and share their blog page simply by utilising the specially-designed Render Machine and the CID obtained when the blog page was created. The required JSON file will be fetched from IPFS and parsed into various components, resulting in a fully-designed blog page.

🕹️ Live Site | IPFS Blog Engine

🔊 Video Demo | See how it works

✨ Showcase | View the pitch deck

Technology Used

1. Web3.storage : User blog creation first stored on the Web3.storage IPFS clusters.
2. Pinata: If user chooses to have additional pinning, the CID generated from Web3.storage will be fetched and pin on Pinata via CID. This action will make sure that the user's blog post is more widely available in the IPFS network. The content will be pin on the user's own Pinata IPFS clusters.
3. Unstoppable Domain Integration: Users can verify themselves using their own unstoppable domain just by simple login. Their blog post created will have an UNS verification badge on their blog page profile card.

About Testing

⚠️ Sometimes, queuing to pin your generated blog post and make it widely available might take a longer time. No worries! I had generated some sample blog posts (during my testing phase), and here are the CIDS:

• bafybeib343opqf2xpaherebwt7pk26zlq7k6yxqrrt3ltcwpirzyerqlvy
• bafybeigjjzu2hwk223mm3zxl35lvrhj2xrzk4sqrh7ce6qd7khancj5eli
• bafybeigjvcch3t2qxixv4mpjwjlbtgfaws6ictwm72wztga26tkg46hcdu
• bafybeiha7gldpsoq2gx6baabwuepm4wmywjwwkbidbk2znlkhrf2c2oz74

⚠️ If you are generating blog post yourself from scratch, check your storing and pinning status on Web3.storage, make sure it is not queuing and had successfully stored and pinned. Or else, you can't render you blog post as it is not available:

⚠️ If you are using additional pinning to Pinata, you can always check the Pin by CID Queue in Pinata. These are the pending pins in queue:

Application Flow

1. Setting up blog page (blog page setting, profile card setting, and deployment setting)
2. When user hits submit, all the info and uploaded contents compiled into a JSON file
3. The JSON file stored on IPFS via Web3.storage
4. After Web3.storage returned a CID, additional pinning of content (using CID) done via Pinata
5. The CID obtained from Web3.storage returned to the user
6. User can now render the blog page with Render Machine by using the CID
7. The relevant JSON file is fetched from IPFS when user request
8. Markdown file (blog post) converted into HTML format using Showdown.js
9. Other info and contents converted into HTML components.
10. Theme styling is applied and the fully-designed blog page successfully rendered

❤️ How's your rendered blog page looks like?

Contact Me

Person of contact: Tan Zhi Xuan

Discord ID: Tan Zhi Xuan#7032

Unstoppable Domain Register Email: [e-mail]