Build and host decentralized websites from your Mac
We have recently updated the Article Settings UI. This documentation explains how to use it.
Slug
Your article uses a UUID in its URL by default, but you can opt for a custom one. For example, many blog sites have a page titled "About Me." You can set its URL slug to "about-me," so it will appear like this in the full URL:
example.eth.limo/about-me/
The URL slug can only contain lowercase letters, numbers, and hyphens. It must be unique.
Type
A new post is created as a blog post by default and will appear in the homepage and RSS feeds. If you change its type to "page," it will not be included in these feeds. The "page" type suits pages like "About Me."
Navigation
If you select "Include in Site Navigation," the page will appear in the site's navigation menu. This feature is designed for pages like "About Me."
You can also use this feature to point to an external page. For instance, you can add a page titled "Discord," include your Discord invite link in the "External Link" field, and choose to include it in the site navigation. This will make it appear as a link to your Discord in the top navigation area.
Navigation weight is used for ordering the links; higher numbers appear later in the sequence.
Minimum System Requirement
The minimum system requirement for building and running the app is macOS 12.
Clone the Code
git-lfs
is used for managing large binary files, primarily the IPFS binary, in the code repository. The easiest way to set up git-lfs
is by cloning the code with GitHub Desktop.
If you want to clone the code using the command line, you'll need to install git-lfs
. You can do this by using Homebrew. Here is the complete process:
brew install git-lfs
git lfs install
git clone https://github.com/Planetable/Planet
If you installed git-lfs
after cloning the repository, you will need to fetch several files using the following command:
cd Planet
git lfs pull
IPFS Binary Version
As of the time of this writing, IPFS 0.15 is bundled. We haven't yet upgraded to the most recent version of IPFS due to some unresolved IPNS performance issues:
local.xcconfig
After cloning the code, create a local.xcconfig
file in the Planet
folder, alongside the Planet.xcconfig
file. This file is used for several local build settings.
DEVELOPMENT_TEAM = YOUR_DEVELOPMENT_TEAM_ID
CODE_SIGN_STYLE = Automatic
ORGANIZATION_IDENTIFIER_PREFIX = xyz.planetable
You can find your Team ID on the Membership Details page at:
https://developer.apple.com/account
Build the App
Once local.xcconfig
is configured, you are ready to build the app. You can choose one of the two schemas to build different versions of the app.
- Planet
- Croptop
Code Linting
Most of the new code is linted in VS Code with this extension:
If you want to try the latest features from the Planet app, you can download and install the Insider Builds from the following GitHub location:
https://github.com/Planetable/Planet/releases
Those Insider Builds are more frequently updated and released. Sometimes you may get several new releases a day. We use this release channel to test out new features. So it may have some unstable changes. If you do run into any issues, you can create issues on GitHub:
https://github.com/Planetable/Planet/issues
Q: What is the visible difference between Insider Build and Stable?
They have different app icons. Insider builds use a blue icon like this:
While the stable releases have a purple icon like this:
The insider builds carry the latest features that will be released into the stable version.
Q: Is it possible to revert to the stable release after using an insider build?
It is not recommended. This is because insider builds and stable releases use the same data directory, and insider builds might introduce new data structures that aren't compatible with stable releases.
Build New Template
You can create a new template using HTML, CSS, and JS. When the Planet app renders a site, the template can utilize the values provided in the context by the app. The template system is powered by Stencil, a simple yet powerful template language for Swift.
Forking from the default Plain template is an excellent starting point for building your own new template, as it includes most of the code examples you will need.
Template Browser
You can find all the currently installed templates in Tools -> Template Browser. If you plan to build your own template, VS Code is recommended. After installing VS Code, you can right-click on a template and select "Open in VS Code."
Add Template from GitHub
By default, all templates are stored in the following folder:
~/Library/Containers/xyz.planetable.Planet/Data/Documents/Planet/Templates
For instance, there is a new work-in-progress template on GitHub:
https://github.com/Planetable/SiteTemplateCroptop
To add this template to the templates folder, use these commands:
cd ~/Library/Containers/xyz.planetable.Planet/Data/Documents/Planet/Templates
git clone https://github.com/Planetable/SiteTemplateCroptop croptop
Once a new template has been added to the templates folder, you must restart the app for it to be recognized.
After the new template is recognized, you can find it in the Template Browser under the Tools menu, or you can choose to use it from the Edit Planet option.
Built-in Templates
These are the built-in templates in the folder:
When the app updates, it will attempt to update these templates as well. However, if a .git subfolder is detected, it indicates the folder could be part of the developer environment, and the app will not overwrite it.
Template Showcase: Plain
This is the default template. It resembles a minimalist operating system look and feel. It features both dark and light modes.
- Live Demo: planetable.eth
- Source Code: Planetable/SiteTemplatePlain
Template Showcase: Grid
If your blog consists of many photos, this is the template for you. It features both dark and light modes.
- Live Demo: yihanphotos.eth
- Source Code: Planetable/SiteTemplateGrid
Template Showcase: 8-bit
This experimental template demonstrates that complex JS and graphics are possible with Planet templates. It has a retro gaming vibe.
- Live Demo: gamedb.eth
- Source Code: Planetable/SiteTemplate8bit
Have you ever wondered whether setting up a website with an ENS is possible? The answer is yes, and you can set your website to the Content Hash field like setting an A or CNAME for a traditional domain name.
The standard is EIP-1577, and this Content Hash field can accept a few possible values. For example, IPFS -- another decentralized content distribution technology. And vitalik.eth website is already running on IPFS.
After you created a website with Planet, right-click on the item in the sidebar, and choose "Copy IPNS," then you will get something that looks like this in pasteboard:
k51qzi5uqu5dgv8kzl1anc0m74n6t9ffdjnypdh846ct5wgpljc7rulynxa74a
Then you can put that IPNS into your ENS ContentHash like this:
Make sure ipns://
is added before that string.
Then your website is linked to your ENS. Congrats! Now you have a decentralized website running on ENS + IPFS!