Build and publish a website

Websites has two kinds of website. An editor website is built here from sections and pages; a files website is made of HTML, CSS, JavaScript and other files you upload, served as they are (see Host a website from your own files). This article is about editor websites.

To make one, choose New website on the Websites page, give it a name and choose Build it in the editor. Its Magpie address is made from the name and can be changed later in Edit details. The editor opens on the home page.

To rename the website, click its name in the bar at the top of the editor. Its address and whether it is published are in More, the last button in the page bar, then Edit details. Each of these is saved as soon as you change it.

The row above the page holds the editor's controls: the page you are on, Visual or Code (how the page is edited), and Desktop or Mobile (how wide the preview is). The editor opens in the mode you last used in that browser.

Pages

The editor shows one page at a time. Choose another page from the menu above the preview. Pages lists the website's pages. In it you can rename a page, change its address, choose whether the navigation lists it, put the pages in order by dragging them or with the arrow buttons, delete a page, or add one by name. A new page opens in the editor as soon as it is added, and its address is made from its name. A website can have up to 50 pages.

If your team sells with Store, Pages also has a Shop row: Add shop adds a Shop page that lists your Store's products, with each product's page, the Cart and checkout at the website's address. See Show your Store in your website.

The home page is the page at the website's own address, and it is listed first. With two or more pages, Home page at the top of Pages makes another page the home page: it moves to the website's own address, and the former home page moves to an address made from its name. This changes the published website at once, and the message after it offers Undo. On a published website, a page has to be published before it can be the home page. The home page cannot be deleted.

The header and footer are on every page. When you select a section that is on every page, the editor says so, and a change to it changes every page. Show on every page moves a selected section of the open page to every page, and Show on this page only moves it back. Once two or more pages are listed, the navigation in the header lists them in order.

To link to another page of the website, select a link and choose the page in Link to a page. When a page's address changes, links to it change to the new address, and visitors who open the old address are sent to the new one until another page takes it. A link to the home page always opens the home page, whichever page that is.

Sections and appearance

Add section, above the preview, adds a Hero, Text, Two columns, Three items, Image, Callout, Footer or Store products section to the page. Click one to add it, or drag it to where it goes.

Click text in the preview to edit it. Select a section, link or image to change it in the panel beside the preview: its text, destination URL, alignment, text size, text colour or background, where the section has them. Move up, Move down, Duplicate and Delete act on the selected section; the Delete key deletes it too. Page in the same panel sets the page background, text colour, accent colour and font. Font offers the usual fonts and, under Brand Kits, the fonts from your team's Brand Kits that a website can load; choosing one of those adds the stylesheet it needs to the layout. Desktop and Mobile show the page at each width.

An image section uses a picture from Your images (Choose image) or an external image URL. Supply alternative text when an image carries meaning; leave it blank only when the image is decorative.

A Store products section shows products from your team's Store. In the editor it shows a note; on the published website it lists your published products with their images and current prices, each linking to the product's page: on the website itself when it shows your Store, else in your Store (on your Store's own domain when it has one). Select the section to choose its Products (your featured products, or one of your Store's collections) and How many it shows; it starts at 8, up to 24. In Code mode the same choices are the data-collection and data-limit attributes of the element with data-magpie-store-products. If the team has no published Store, the section shows no products.

Code

Code shows the HTML. It has two files, named above the code: the page (its own sections) and Layout, which every page shares: the head, the styles, the header, the footer and any scripts. The line under the file names says which of the two is open and what it reaches. In Layout, the comment <!-- magpie:content --> marks where each page's sections go.

Format file lays the open file out one element to a line, with nested elements indented, the styles one declaration to a line and the scripts indented under their tag. Nothing but the spaces between things changes, and <pre> and <textarea> are left as written. Ctrl+Z (Cmd+Z on a Mac) puts the file back as it was. While Format pasted code is ticked, HTML or CSS you paste is laid out the same way as it lands, at the depth of the line you paste it on; a short piece pasted into a line is left as it is. The box stays as you set it in that browser.

Each hex colour in the file has a swatch beside its line, in the margin on the left. Click one to change that colour where it is. Colours lists every hex colour the open file uses; changing one there changes it everywhere in that file.

Import JSON… in More replaces the open page's sections with a pasted JSON document or page of HTML; see Build a website by pasting JSON.

Drafts and publishing

Changes are saved as a draft a moment after you stop typing. Visitors do not see drafts. Publish puts the drafts of every page online at once. The button reads Publish changes when there are drafts visitors do not see yet, and Published when there are none.

A page's name, its address and whether the navigation lists it change on the published website as soon as you change them. A new page is shown once you publish. A deleted page stops being shown at once.

To go back to what visitors see, choose Discard unpublished changes in More. Every page's draft will be replaced by its published version. A page that has never been published keeps its draft.

At its own address (its domain, or Magpie's website address for it), a published website answers /sitemap.xml, listing its published pages for search engines, and /robots.txt, which names the sitemap.

To take the website offline, turn off Published in Edit details. Changing the website's own address after sharing it breaks links to the old one, so settle it before sharing the website. Team admins can also show the website at a domain the team owns; see Show your website at your own domain.

History

Each time you publish, the website as published is kept as a version. History in More lists the last 50 versions. Restore makes a version the draft of every page it had, including a page deleted since, which comes back as a draft. Pages added since stay. Visitors will see the restored pages' contents once you publish. Page names, addresses and the order of the navigation change at once, as when you edit them: a page that moves back to an earlier address keeps its links, and its other address sends visitors on.

The website as files

Download as files in More gives a ZIP of the website as visitors see it: one index.html per page, in a folder named for the page's address, with the pictures it uses copied in beside them. While nothing is published, the ZIP is made from the drafts and its name says so.

A website that shows your Store downloads its Shop page with the products as they are at that moment, linked to their pages on the website.

Switch to your own files in More turns the website into a files website whose first version is those files. A website with a shop cannot switch: remove the shop in Pages first. Its address, domain and whether it is published stay the same; its pages, sections and the editor are no longer available for it, and you change it by uploading files. The switch cannot be undone, so the question before it says what changes. A files website cannot become an editor website.

Access, the app and the assistant

The website belongs to Personal or the selected team and can be edited only by members with the required access. To remove a website, choose More, then Move to Trash, in the editor's page bar; for a files website, choose More, then Move to Trash, on its page. Its address and custom domain stop working straight away and stay held by it while it is in Trash; restoring it within 30 days brings it back published if it was. The custom domain is disconnected only when the website is deleted forever.

If Magpie suspends a website that breaks its rules, the editor shows Suspended by Magpie with the reason, every address of the website says the page was not found, and the team's admins are emailed once. While it is suspended, nobody can change or publish it; it can still be moved to Trash. To resolve it, contact support.

The native app can read Websites in Personal or the selected team, show whether each is published and list safe links from its pages. Use the website for creating, editing, publishing, appearance and moving a website to Trash.

The assistant can create, update, publish, and move to Trash one exact team Website. It searches Website metadata rather than page content. It cannot change a files website's files: an update or publish of one is refused, and the reply says to upload the files on the website's page. An update uses the current Website version and is saved as a draft of the home page; on a website with more than one page, only the home page's sections change. When the home page is the Shop page, an update is refused, because the shop is changed in the editor. Publishing and moving to Trash require explicit confirmation in the current message; the assistant returns a saved result and link after a successful write.

If an external image does not appear, check that its URL is public and uses HTTPS. For a published page that differs from what you published, Contact support.