Build and host decentralized websites from your Mac

Guides
 
Article Settings

We have recently updated the Article Settings UI. This documentation explains how to use it.

Article Settings UI
The new Article Settings UI

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.

Top Navigation
Insider Builds is part of the top navigation
 
Build Instructions

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:

https://discuss.ipfs.tech/t/ipfs-name-resolve-does-not-always-return-the-freshest-cid-for-ipns-on-kubo-0-20-0/16624

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:

 
Insider Builds

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

insider-builds-on-github

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:

Insider App Icon

While the stable releases have a purple icon like this:

Stable App Icon

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.

 
Templates

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."

Template Browser: Open in VS Code
Tools -> Template Browser -> 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.

Template Browser
Tools -> Template Browser
Select Template
Edit Planet -> Select Template

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.

Template: Plain
planetable.eth with the Plain template

Template Showcase: Grid

If your blog consists of many photos, this is the template for you. It features both dark and light modes.

Template: Grid
yihanphotos.eth with the Grid template

Template Showcase: 8-bit

This experimental template demonstrates that complex JS and graphics are possible with Planet templates. It has a retro gaming vibe.

Template: 8-bit
gamedb.eth with the 8-bit template
 
Get Started

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.

vitalik-soulbound.png

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:

set-content-hash.png

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!