Updating this documentation
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.
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.
Edit content in the left hand pane of the CMS. Preview your changes in the right hand pane.
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.
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.
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.
Ready to edit the page?
Creating new pages
-
Through the Design System site you can quickly add a new page. Navigate to the section of the site where you’d like to add a new page. For example, if you want to add a new component page, make sure you’re in the “Components” section.
-
Click the “+ Add new page” button at the bottom of the page.
-
If you haven’t already, log in to our CFPB GitHub repo.
-
Fill out the relevant fields of the CMS that appear on the left, a preview of your page will appear on the right. You can edit the fields on the left as needed. The rich text field will let you easily style the text, but you can use additional markdown as needed to create the page content you want.
-
Click “Save” at the top of the screen to save your work. Netlify will create a pull request in our public GitHub repo:
https://github.com/cfpb/design-system/pulls.
- Your work will not be visible until your pull request has been approved and merged.
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.
Updating navigation
Change a page’s location in the side navigation by changing the “Navigation Section” field in the CMS.
