Foldocs

Photos and images

2026-10-23T10:43:21+02:00

A photo in a folder becomes a photo page: titled by its file name, dated by when it was taken, and captioned by its description in Drive. See Photo pages. Photos straight from an iPhone (HEIC) work as they are, as do JPEG, PNG and WebP.

Names, dates and captions

The file	On the site
`Black sand.jpg`	Titled Black sand, dated by the camera
`IMG_4012.jpg`	No title (a camera's name means nothing); dated by the camera
`1968-12-24 Earthrise.jpg`	Titled Earthrise, dated 24 December 1968
A description in Drive	The caption under the photo

Five sizes

Every image, in a photo or a document, is made in five widths of WebP. A phone downloads a small one, a large screen a sharp one, and the page stays light: about 100 kilobytes before its pictures.

Photos fill, drawings fit

Compare the cards in Photo pages with those in Examples: the photos fill their frames, the drawings are shown whole.

Folders become sections

2026-10-23T10:43:20+02:00

Every folder in the shared folder is a section: a row on the home page, a page of its own and an item in the menu. This site has five: Get started, Examples, Guide, Updates and Photo pages. The Guide has two folders inside it, Basics and Going further: they are the two links under its title.

The rules

You do	The site does
Add a folder at the top	A new row, page and menu item
Put a folder in a folder	A subsection, at /work/clients/, as deep as you like; the menu lists it under its section
Start a name with a number, `1 Work`	Sets the order; the number isn't shown
Add a document called `intro`	Opens the section's page, see below
Rename a folder	Renames the menu item and the address
Delete a folder	Removes its pages, a minute later

Order and dates

The name	The page
`Why I sketch`	Dated by when it went into the folder
`2024-05-01 Why I sketch`	Dated 1 May 2024, titled Why I sketch
`01 Start here`	First in a numbered folder; the number isn't shown

A section shows its newest files first, unless every file in it is numbered: then it keeps that order, like this Guide. Number all of them, or none. A date in front of a name places a piece back in time, handy when you move old writing over: 1968-12-24 Earthrise in Photo pages is dated Christmas Eve 1968.

`intro`: what opens a page

Every folder is a page: the shared folder is the home page, and each folder in it, however deep, a page of its own. A document called intro is never a page itself: it opens the page of the folder it's in. Every intro is optional. Name it in lowercase (Foldocs ignores case, but it stands out that way among your pages).

Where the `intro` is	Title	Subtitle	The rest
Next to your folders: the home page	The headline	The label above it	The first paragraph under it; a list becomes the topics; links to your e-mail and profiles go in every page's footer
In a section's folder: the section's page	The section's name, instead of the folder's	The line under its name, on its page and in its row on the home page; also its description for search engines	Text and images above its pages; the first image is its picture in link previews

Your contact links go in the home page's intro, anywhere, as links: your e-mail and your profiles. They show at the bottom of every page, the e-mail as a button and the profiles as their logos: LinkedIn, Bluesky, X, Instagram, Threads, Facebook, Mastodon, GitHub, YouTube, Behance, Dribbble, Substack, ORCID and more. No e-mail link, no button.

A section's address still comes from its folder's name, so a new title breaks no links. A subsection can have an intro too. Every section on this site has one: the lines under the titles on the home page come from them.

Files next to the folders

Documents and a photo in the shared folder itself, next to the section folders, belong to the site as a whole. Every document there is a page in the menu, after the sections, like About and Contact on this site. Two names aren't pages: intro and design.

Next to the folders	Becomes
`intro`	Not a page: the home page's opening. Its links to your e-mail and profiles go in the footer
`design`	Not a page: your colours and fonts, see Make it yours
Any other document	A page in the menu, at an address from its name: `About` is at /about/
A number in front, `1 About`	Sets the order in the menu; the number isn't shown
A photo	The portrait on the home page; the newest, if there are more

Documents become pages

2026-10-23T10:43:20+02:00

The paragraph styled Title is the page's title, the one styled Subtitle its summary, like the line above. Without a Title, the document's name is the title. Everything else comes along as it is. Open this page's document with the link next to its title, and compare.

Text

Bold, italic, code and links. Text in a monospace font, such as Courier New or Roboto Mono, becomes code: handy for a file name like intro.docx or a setting like FOLDER_URL. Links to web pages, e-mail and phone numbers work; anything else is left out. A heading is a heading on the page, with an anchor of its own to link to. To link to another page of your site, paste its full address: it becomes a link within the site.

Lists

Bulleted lists
Numbered lists
- and lists in lists
  - as deep as you need

First
Second
Third

Quotes

Docs has no quote style, so an indented paragraph becomes a quote:

Simplicity is prerequisite for reliability. — Edsger W. Dijkstra

Tables

In the folder	On the site
A folder	A section, or a subsection
A document	A page
A photo	A photo page
A number in front of a name	Its place in the order
A date in front of a name	Its date

Images

An image as wide as the page in the document is as wide as the text on the site:

An image you made smaller keeps that share of the width:

The first image in a document is also its picture on cards and in link previews.

What stays behind

Comments, suggestions, version history and the document's own fonts and colours stay in the document. Foldocs rebuilds every page from a short list of allowed elements, so the site looks consistent however a document was styled.

Share a folder

2026-10-23T10:43:20+02:00

In Google Drive

Make a folder for your site, say My site.
Right-click it, choose Share, and under General access pick Anyone with the link, as Viewer.
Copy the link: that is all Foldocs needs to find the folder.
Create a free Google API key for the Drive API (the README has the three commands). The key only identifies Foldocs to Google; it opens nothing.

Google Docs and Word files both work; a Word file stays a Word file, or Drive converts it on upload.

In Nextcloud

Create a read-only share link for the folder, with a password if you like, and give Foldocs the link. No key, no account, no app to register. Pages are Word files (.docx): set Collabora or OnlyOffice to save as Word. A share has no descriptions, so photos get no captions.

What public means

Everything in the folder is on the site. That is the point, and the one rule to remember.

Do	Don't
Keep drafts in another folder until they're ready	Park a draft in the site's folder
Empty the trash of anything that never belonged	Trust the trash to hide things
Share the folder as Viewer	Give the link edit rights

A link-shared folder isn't listed anywhere: search engines don't index it, and its address can't be guessed. The site doesn't lead back to it either, unless its theme chooses to, as this one does. Image addresses are fingerprints, never a file's ID.

Check it

Open the link in a private window: what you see there, Foldocs sees. Unshare the folder, and the site stays as it was until you share it again. Foldocs never empties a site because it can't read the folder.

Themes

2026-10-23T10:43:19+02:00

Three to start from

Foldocs comes with three themes, and the same folder looks entirely different in each. Click through: all three are live.

Theme	Presents the folder as	See it
Default	A personal site: a headline, then a row per section	foldocs.com
Journal	A blog: one column, newest first	journal.foldocs.com
Index	The folder tree itself	index.foldocs.com

Those two are variants: the same content, built again in another theme at the same moment, each at its own address. A banner says what they are, and they ask search engines to stay away, so they never compete with the real site. Handy for choosing a design with your own content in it, or for showing a client three directions.

Your own theme, in a few lines

A theme can extend another and change only what differs. A short file of settings and a few lines of CSS make a new look; a template of your own replaces any part of a page.

A logo: put logo.svg (and logo-dark.svg) in the theme, and it replaces the name in the header, as on this site
Icons: favicon.svg for the browser tab, apple-touch-icon.png for phone home screens
A share image: share.png, 1200 by 630, shown when someone shares a page without a picture
A verification tag: _head.html goes into every page's head
Another language: every word the templates use, from See all to the month names, is set in the theme

The README shows how. One command checks a theme's contrast, in light and dark mode, against the accessibility guidelines.

Make it yours

2026-10-23T10:43:19+02:00

Put a document called design next to your folders, with a table in it, and fill in what you want to change: no code, no theme of your own. This site's blue is set that way. Leave a cell empty, and the theme's choice stays.

Setting	Light	Dark	What it changes
Accent	#1f63d6	#6ea2ff	Links, buttons, numbers, the marks that stand out
Background			The page; panels, bands and borders follow
Text			The text; secondary text follows
Heading font			Titles and headings
Body font			Running text
UI font			Menus, labels, dates
Corners			Rounding of images, cards and buttons

Colours

Any colour, as a hex code like #1f63d6. The Dark column is for visitors whose device is in dark mode; leave it empty, and the theme's dark colours stay. Choose a background and a text colour, and the softer shades for panels, borders and secondary text follow from them.

Fonts

Any family on Google Fonts, and there are well over a thousand: type its name, or paste the link to its page. Foldocs downloads it once and serves it from your own site, so your visitors' browsers never ask Google, and the page stays fast. End with serif, sans-serif or monospace to say what shows while it loads.

Three to try

	Editorial	Technical	Warm
Accent	#9b2c2c	#0f766e	#c2410c
Background	#fbf8f3	#f8fafc	#fff7ed
Heading font	Fraunces, serif	Space Grotesk	DM Serif Display, serif
Body font	Lora, serif	Inter	Nunito
Corners	0	4px	16px

Editorial: Fraunces and Lora on warm paper, a deep red, square corners.

Technical: Space Grotesk and Inter on cool white, teal, slightly rounded.

Warm: DM Serif Display and Nunito on cream, burnt orange, soft round corners.

Copy a column into your design document, Light cells only, and watch your site change a few minutes later. Every value is checked first: one that isn't valid is left out, and the theme's own value stays, so a typo can't break the site.

Further

The same settings work in every theme, so a new theme keeps your colours and fonts. Beyond them, a theme of your own can change anything.

Behind the scenes

2026-10-23T10:43:19+02:00

Folder: you write. Docs, Word files, photos and folders.
Sync: once a minute Foldocs lists the folder, names, dates and descriptions. Nothing is downloaded unless it changed.
Cache: a changed document is exported as HTML and rebuilt from a short list of allowed elements; its images are made in five sizes.
Build: the whole site is written as plain files, with a feed and a sitemap. Only what changed is rewritten.
Site: any web server serves it. Foldocs comes with a small one in a container.

No database, no admin panel, no plug-ins: the folder is the source, the site a copy.

To run it yourself, see Put it online. The code is open source.

Found and shared

2026-10-23T10:43:19+02:00

Found by search engines

Every page has a title (Themes · Foldocs), a description from its subtitle or first lines, and an address of its own (/guide/going-further/make-it-yours/). A sitemap lists every page with the day it last changed, so search engines know what is new.

Pages also describe themselves in structured data: who the site is by, which page is a post and when it was published, and the breadcrumbs to each. That is what rich search results are made of.

Shared well

A link pasted in a chat or a post unfolds into a preview with the page's title, description and image: its first picture, or the theme's share image. Try it with this page.

Followed by feed

The newest pages are in a feed: add the site's address to any feed reader, and every new document arrives by itself.

Readable by everyone

Meets the WCAG 2.2 AA accessibility guidelines: contrast, headings, landmarks, a skip link, a visible focus, alt text
Made for phones first, with a dark mode that follows yours
Fast: about 100 kilobytes a page, images in the size the screen needs

Out of sight while you work

While a site is a draft, one setting asks search engines to stay away, on every page.

Start here

2026-10-23T10:43:17+02:00

Your website is a folder of documents: that is the name, a folder of documents. Share a folder in Google Drive or Nextcloud, and every folder in it works the same way:

A document called intro opens the folder's page. In the shared folder, that is your home page: its headline and introduction. In a folder in it, that section's page.
Every other document adds a page. Next to your folders, a page in the menu, like About or Contact. In a folder, one of its pages: a post, a project, a note.
Every folder adds a section, with a page of its own. A folder in a folder is a subsection, and works the same way again.
A photo next to your folders is your portrait; in a folder, a page of its own.

In short: intro opens a page, documents add pages, folders add sections. One more name: a document called design, next to your folders, sets your colours and fonts. Neither intro nor design is a page itself.

This site is a folder

Everything on foldocs.com is a file in one public Google Drive folder. Foldocs checks it every minute and rebuilds what changed. No database, no admin panel, no one logging in. On the left below is a Google Doc in that folder; on the right, the page Foldocs made of it.

How a change goes live

Google Docs saves as you type, so Foldocs waits until a file has been left alone for five minutes: a half-written sentence never goes online. Then it fetches the file, converts it and rebuilds only the pages it touches.

The basics

Share a folder: the only setup there is, and what public means
Folders become sections: structure, order, the home page
Documents become pages: everything a page can hold
Photos and images: sized for every screen

Going further

Make it yours: your colours and fonts, from a table
Themes: a whole new look for the same folder
Found and shared: search engines, link previews and a feed
Behind the scenes: what happens between the folder and the site

Five minutes to your own

Make a folder and share it with a link. Inside, put a document called intro, and a folder with a document in it. That is a website. Your first site walks through it, step by step.

A personal site

2026-10-23T10:43:17+02:00

Say you're Jan, a designer who works freelance. You want a home page that says what you do, a portfolio in an order you choose, and somewhere to write now and then. Here is the whole site, as a folder:

The folder

📁 Jan's site
- 📄 intro
- 📄 About
- 📄 Contact
- 📄 design
- 🖼️ Jan.jpg
- 📁 1 Work
  - 📄 01 A museum's new identity
  - 📄 02 An annual report
  - 📄 03 Signs for a park
- 📁 2 Writing
  - 📄 2026-03-14 On choosing typefaces
  - 📄 Why I sketch on paper first
  - 📁 talks

On the site

The home page opens with the headline and first paragraph from intro, the list in it as Jan's topics, and the photo beside them. Below come two rows: Work, in the order of its numbers, and Writing, newest first, with talks as a subsection. The menu reads Work, Writing, then About and Contact: the documents next to the folders.

Each project is a document with photos in it: the first one is its card's image. The post about typefaces is dated by its name, so it sits where it belongs in time, not where it was uploaded. See Folders become sections.

Day to day

A new project: a new document in 1 Work, numbered where it should go
A new post: a document in 2 Writing; it goes live five minutes after the last edit
A new look: a colour or a font in design, no theme needed

Good to know

Number every project, or none: a folder whose files are all numbered keeps their order, any other sorts by date. Keep drafts in another folder: everything in this one is public.

A research group

2026-10-23T10:43:17+02:00

A research group already shares a drive: proposals, papers, notes from meetings. Its website is usually the one thing nobody can update, because it lives somewhere else, behind someone else's login. With Foldocs, the website is one more shared folder.

The folder

📁 Language Lab
- 📄 intro
- 📄 Join us
- 🖼️ The group.jpg
- 📁 1 Research
  - 📁 Speech in noise
    - 📄 01 The question
    - 📄 02 Methods
    - 🖼️ Setup.jpg
  - 📁 Children's reading
    - 📄 01 Overview
- 📁 2 People
  - 📄 01 Ada Lindqvist
  - 📄 02 Omar Haddad
  - 📄 03 Yuki Tanaka
- 📁 3 News
  - 📄 2026-09-30 New grant for the reading study
  - 📁 papers
  - 📁 talks

On the site

Three rows on the home page: Research, with a subsection per project; People, in the order of their numbers, each with their photo on their card; and News, newest first, filterable by papers and talks. Join us sits next to the folders, so it is a page in the menu, after the sections. See Folders become sections.

Working together

Drive decides who may write: give the group edit rights, and everyone keeps their own page up to date, with comments and suggestions as usual. The public only gets the link to view, which is all Foldocs needs. Nobody needs an account on the website, and nobody has to be its webmaster.

Good to know

An intro in each project's folder opens its page: one line under its name, then what it's about
Papers as Docs get their own pages; a PDF in the folder is left out, so link to it instead
Search engines see who the site is by and when each post was published: see Found and shared

Your first site

2026-10-23T10:43:17+02:00

In Google Drive, make a folder and share it: Anyone with the link, as Viewer. In Nextcloud, make a read-only share link. Copy the link; it is the one setting Foldocs needs. See Share a folder.

2. Add a document called `intro`

In the folder, make a document called intro, in lowercase. It is not a page of its own but the top of your home page. Write it with the paragraph styles from the style menu (Normal text in Google Docs, the Styles gallery in Word):

In `intro`	On the home page
A line in the Title style	The big headline
A line in the Subtitle style	The small label above it
A paragraph of normal text	The introduction
A heading and a bulleted list (optional)	Numbered topics, named by the heading
Links to your e-mail and profiles (optional)	The footer: an e-mail button and your profiles

Optional, next to intro: a photo, which becomes the portrait beside the headline, and documents such as About and Contact, which become pages in the menu. See Folders become sections for all of them.

3. Add a folder per section

Next to intro, add a folder for each part of your site: 1 Work, 2 Writing. Each is a row on the home page, a page of its own and an item in the menu. The number sets the order and isn't shown.

A section can have an intro of its own, too: it opens the section's page the way the first one opens the home page. Its Title renames the section, its Subtitle is the line under it, and the rest comes before the section's pages. Every intro is optional.

4. Add documents: one per page

Every document in a section folder is a page. Its Title line is the page's title, its Subtitle line the summary on its card, and the rest is the page: headings, lists, links, tables. See Documents become pages.

5. Add images, in two ways

Where	What it becomes
In a document: Insert → Image	Part of that page, as wide as you made it; the first one is also its card's picture
As a file in a section folder	A photo page of its own, dated by the camera, in the section's row
As a file in the shared folder	The portrait on the home page

That is a website

📁 My site
- 📄 intro: the home page's opening, not a page
- 📄 About: optional
- 🖼️ me.jpg: optional, the portrait
- 📁 1 Work
  - 📄 intro: optional, opens the section's page
  - 📄 A first project: a page, with images inside
  - 🖼️ Studio.jpg: a photo page

That's your site, written. Once it's online, it follows the folder: a change is on the site about five minutes after you last touched the file. Everything in the folder will be published, so keep drafts elsewhere. Next: Put it online.

Put it online

2026-10-23T10:43:17+02:00

We'll host it for you

We're working on a hosted Foldocs: share your folder with a link, choose an address, and your site is online. Nothing to install. Follow Updates to hear when it's ready.

Or ask someone technical

Foldocs runs today on any small server. If someone you know looks after a website or a server, send them this page: the steps below take them about fifteen minutes.

Share a folder in Google Drive with anyone with the link.
In the Google Cloud console, create a project, enable the Google Drive API and create an API key for it. No billing needed.
Get the code from GitHub, and copy .env.example to .env: fill in the folder's link, the key, your site's address and your name.
Run docker compose up -d. One container keeps the site in step with the folder, the other serves it, behind the web server you already have.

The README has the details: Nextcloud, themes, variants, and running it without Docker.

A handbook

2026-10-23T10:43:17+02:00

A team's handbook is written in documents anyway: how we work, how to set things up, who to ask. Publishing it usually means copying it somewhere else, where it goes stale. With Foldocs the documents are the handbook, and the site is how you read it.

The folder

📁 Handbook
- 📄 intro
- 📄 Contact
- 📁 1 Getting started
  - 📄 01 Your first day
  - 📄 02 Accounts and tools
  - 📄 03 Who's who
- 📁 2 How we work
  - 📄 01 Meetings
  - 📄 02 Writing things down
  - 📁 Releases
    - 📄 01 Checklist
- 📁 3 Reference
  - 📁 Glossary
  - 📁 Templates

On the site

Numbered chapters in numbered folders keep their order everywhere. Headings in a document become anchors to link to, so see Releases, step 3 can be a link. Shown as a folder tree, the whole handbook reads like a table of contents, every page one click away.

Reviewing

Changes are suggested and discussed in the documents, with comments, before anyone accepts them. Comments and suggestions never reach the site; the accepted text does, five minutes after the last edit. See Start here.

A travel journal

2026-10-23T10:43:17+02:00

On a trip, a laptop is extra weight and a website's editor is one login too many. A phone with the Drive app is enough: photos go into a folder, a sentence or two into a document, and the people at home follow along.

The folder

📁 Away
- 📄 intro
- 📄 About us
- 📁 1 Iceland 2026
  - 📄 2026-06-02 Day 1: Reykjavík
  - 📄 2026-06-03 Day 2: The south coast
  - 🖼️ IMG_4012.jpg
  - 🖼️ Black sand.jpg
  - 🖼️ Skógafoss.jpg
- 📁 2 Japan 2027
  - 📄 Plans

On the site

A row per trip, newest first. Every photo gets its own page, dated by when it was taken, not when it was uploaded, so a batch sent home on the last day still lands on the right days. A photo's description in Drive is its caption; IMG_4012 gets no title, since a camera's name for it means nothing to a reader. See Photos and images.

The same journal reads well as a blog: one column, newest first, every trip mixed in by date.

Good to know

Photos are made in five sizes, so the site stays fast on a phone at home too
The camera's location stays out of the site's images; the originals stay in Drive
Wi-Fi only now and then? Upload when you can: the site follows within minutes

Hello, Foldocs

2026-10-22T12:00:00+02:00

Foldocs turns a shared folder of documents into a website. You write in Google Docs or Word, share the folder with a link, and a few minutes after every change the site follows: pages from documents, sections from folders, photo pages from photos.

This site is the first one in public, and made by it. Every page you read here is a document in one Google Drive folder, which you can see beside the site; every page links to its own document. The same folder also makes this site as a blog and as a folder tree.

Why

The place where people write is rarely the place where their website is. Foldocs makes them the same place, without a system to learn: no editor, no database, no plug-ins, no logins.

Where to start

Your first site takes you from an empty folder to a site
The Examples show four sites, folder by folder
The Guide shows everything Foldocs does, one page at a time

What's next

OneDrive and Dropbox as sources, and a hosted version for anyone who would rather not run a server. Foldocs is in beta: tell us what breaks.

Nextcloud

2026-10-21T12:00:00+02:00

Not everyone keeps their documents with Google. Nextcloud runs on servers its users choose: at home, at their organisation, at a provider they trust. Foldocs reads a Nextcloud folder just as it reads a Drive folder, through nothing but its share link.

Setting it up

In Nextcloud, share the folder with a share link, read only. A password is fine.
Give Foldocs the link (and the password) instead of a Drive folder and key.
That's it: no account, no app to register, no key.

What's different

Nextcloud keeps documents as files, so pages there are Word files (.docx); set your office app to save as Word rather than OpenDocument. A share has no descriptions, so photos get no captions. Everything else works the same: sections, subsections, dates, numbers, photos, themes and the design document.

More in Share a folder. OneDrive and Dropbox are next.

A design in a document

2026-10-20T12:00:00+02:00

A theme decides how a site looks, but changing a colour shouldn't take a theme of your own: a document called design next to your folders does it, with a table in it.

Setting	Light	Dark
Accent	#1f63d6	#6ea2ff
Heading font	Fraunces, serif
Corners	6px

A row per setting; the Dark column is for visitors in dark mode. Fonts are any family on Google Fonts, downloaded once and served from your own site, so visitors' browsers never ask Google. Every value is checked before it reaches the site: one that isn't valid is left out, and the theme's own value stays.

This site's blue is set in its design document; the table above is an example. All settings are in Make it yours.

One folder, three designs

2026-10-19T12:00:00+02:00

Choosing a design is easier when you can see your own content in it. A variant is the same site, built from the same folder at the same moment, in another theme, at its own address: foldocs.com is also journal.foldocs.com, a blog, and index.foldocs.com, the folder tree.

A banner on a variant says what it is and links back. Variants share the original's photos, and ask search engines to stay away, so they never compete with the real site. A theme gets them by having a variants folder: see Themes.

Earthset from Orion

2026-04-06T12:00:00+02:00

Foldocs

Photos and images

Names, dates and captions

Five sizes

Photos fill, drawings fit

Folders become sections

The rules

Order and dates

intro: what opens a page

Files next to the folders

Documents become pages

Text

Lists

Quotes

Tables

Images

What stays behind

Share a folder

In Google Drive

In Nextcloud

What public means

Check it

Themes

Three to start from

Your own theme, in a few lines

Make it yours

Colours

Fonts

Three to try

Further

Behind the scenes

Found and shared

Found by search engines

Shared well

Followed by feed

Readable by everyone

Out of sight while you work

Start here

This site is a folder

How a change goes live

The basics

Going further

Five minutes to your own

A personal site

The folder

On the site

Day to day

Good to know

A research group

The folder

On the site

Working together

Good to know

Your first site

1. Share an empty folder

2. Add a document called intro

3. Add a folder per section

4. Add documents: one per page

5. Add images, in two ways

That is a website

Put it online

We'll host it for you

Or ask someone technical

A handbook

The folder

On the site

Reviewing

A travel journal

The folder

On the site

Good to know

Hello, Foldocs

Why

Where to start

What's next

Nextcloud

Setting it up

What's different

A design in a document

One folder, three designs

`intro`: what opens a page

2. Add a document called `intro`