Updating this website

Before you edit a page, familiarize yourself with the process.

When you're ready to start editing, continue to Netlify CMS.

 

Editing pages

We use a content management system called Netlify CMS. It’s powered by GitHub and will let you edit any page of this website.

Go to the page you want to edit and click its "Edit this page" pencil icon.

Screenshot showing how to edit a Design System page

Log into the CMS by clicking the "Login with Github" button. You'll need a github.com account and you'll need to be added to CFPB's GitHub organization. If you're new to GitHub and need to be added to this organization, post a message in the Design System mattermost channel and someone will assist you.

Screenshot showing how to log into Netlify CMS

Edit content in the left hand pane of the CMS. Preview your changes in the right hand pane. Check out our sample component page for tips on how to structure a typical page.

Screenshot showing how to edit a page in Netlify CMS

Click the blue 'Save' button in the top left to save your changes as a draft. Don't worry, the live site won't be affected. Netlify CMS will build a temporary version of the website with your changes so that you can preview them. After you click the 'Save' button you can close the tab and come back to it later if you want, your temporary changes will persist.

Screenshot showing how to save changes in Netlify CMS

After you save some changes, Netlify CMS will build a preview of the entire website with your new content. This takes a few minutes. When the preview is ready you’ll see a "View Preview" link at the top of the editing page. Feel free to share this link with your peers if you’d like feedback on your new page.

Screenshot showing how to preview Netlify CMS changes

When you are ready to publish your changes, set the page's status to "Ready". Then click the “Publish” drop down menu and choose "Publish now."

Hooray! After you publish, our servers will re-deploy the live website and you'll see your changes in a few minutes at https://cfpb.github.io/design-system.

Screenshot showing how to publish Netlify CMS changes
 

Ready to edit the page?

Continue to Netlify CMS

 

Creating new pages

If you’re adding a new standard to the Design System, make sure it’s been discussed and approved first in Hubcap, our internal repository.

  1. To create a new page from scratch, click the “Create new page” button below.
  2. After logging into the CMS, you’ll be taken to a blank page in the CMS. Follow the “Editing pages” steps above to edit and preview your new page.
  3. If you’re unsure what sort of content you should add to a new Design System page, check out our sample component page. Click its “edit” button to view the sample content laid out in the CMS.
  4. If you’d like your new page to appear in the side navigation, see below.

Create new page

Editing the side navigation menu

  1. To add new pages to the side navigation, or to rearrange the order of existing pages in the navigation, click the “Edit the side navigation” button below.
  2. After logging into the CMS, navigation sections and their pages can be added, edited and removed. You’ll see a preview of the side navigation in the right-hand preview pane.

Edit the side navigation

Uploading images

When editing a page, click the + icon to add an image. Select an image from the current library or upload a new image from your computer. Note: Due to a bug in Netlify CMS, the image might not immediately appear in the preview pane.

Screenshot of image upload in
CMS