Thanks for checking out how to contribute to the GitLab marketing website with Netlify CMS! We have three goals:
Netlify CMS is an open-source content management system for your Git workflow that enables you to provide editors with a friendly UI and intuitive workflows. Content is stored in your Git repository alongside your code for easier versioning, multi-channel publishing, and the option to handle content updates directly in Git.
To access the Netlify CMS:
The editorial workflow enables Netlify CMS to create corresponding merge requests with your changes. Netlify CMS will open a merge request and make a commit through your account to a merge request with your changes to a single page. Future changes to the draft will be additional commits by the user making the changes to the draft. We can also use a traditional git workflow once the MR is created if someone wants to pull your branch and make changes that way instead.
The editorial workflow is a powerful process that allows content contributors and developers to contribute to the same merge request with different tools.
Access the workflow tab in Netlify CMS by selecting "Workflow" at the top of the admin UI. You can also reach it directly at https://about.gitlab.com/admin/#/workflow
|Actions in Netlify UI||Perform these Git actions|
|Save draft||Commits to a new branch (named according to the pattern cms/collectionName/entrySlug), opens a merge request, and applies the
|Edit draft||Pushes another commit to the merge request|
|Publish||Adds merge request to the merge train and deletes branch after it's deployed to master|
To edit an existing or create a new page in Netlify CMS, make sure that the content type is enabled. If it is one of the supported content types, follow these steps to create an MR with your changes using Netlify CMS:
www-gitlab-comrepository when it's ready to be merged. Note: There is a separate approval process if you are planning to publish a new blog post. Please see the blog handbook for instructions.
A topic is an industry trend, theme, or technology related to GitLab and our customers. For example, DevOps, GDPR, Containers, etc. Topic pages on our website educate the reader about the topic and share GitLab’s point of view while providing additional links to resources related to that topic. These pages are intended to attract search traffic.
Topic pages managed through Netlify CMS exist at https://about.gitlab.com/topics/. The content is located stored in the
/data/topic_children directory in the
www-gitlab-com repository. Netlify CMS allows the user to edit these data files through the admin interface.
A Typeform page is a landing page that includes an embeddable Typeform quiz on it. Here is an example: https://about.gitlab.com/quiz/devops-platform/
Typeform pages managed through Netlify CMS can be found at https://about.gitlab.com/quiz/. The content is located/stored in the /data/typeform directory in the
www-gitlab-com repository. Netlify CMS allows the user to edit these data files.
Blog posts can be created and edited using Netlify CMS. Netlify CMS is especially good for starting your blog post, creating the proper markdown file that is structured correctly, and starting a merge request. Blog posts can be created with the traditional merge request workflow or through the Netlify CMS workflow. Be sure to read the Blog Handbook for all instructions related to writing and creating a blog post.
Blog posts managed through Netlify CMS can be found at https://about.gitlab.com/blog/. The content is located/stored in the
/sites/uncategorized/source/blog/blog-posts directory in the
www-gitlab-com repository. Netlify CMS allows the user to edit these markdown files.
Please note that it takes time for all existing blog posts to load in the admin. You can use the "sort by" functionality to view only posts from a certain category. If you are creating a new blog post, you do not have to wait for all blog posts to load in the admin.
A case study page is a landing page where customers share how they've been able to shorten the software development lifecycle while using GitLab. Here is an example: https://about.gitlab.com/customers/axway-devops/
Case studies managed through Netlify CMS can be found at https://about.gitlab.com/customers/. The content is located/stored in the /data/case_studies directory in the
www-gitlab-com repository. Netlify CMS allows the user to edit these data files.
Event landing pages can be created and edited using Netlify CMS.
Event landing pages managed through Netlify CMS can be found at
http://localhost:4567/event-slippers/name-of-event. The content is located at
data/event_slippers/ directory in the
www-gitlab-com repository. Netlify CMS allows the user to edit these
Please note that not all event landing pages are built using this process.
If you'd like to use this feature for production builds of about.gitlab.com, please notify the Digital Experience team.
We have a selection of icons available for the event template. These are svgs and require a specific string to work properly. We are iterating to make this a visual experience in the admin, however for the current iteration you must place the exact string in the icon field for it to work properly.
The option of icon strings available are:
If you do not designate an icon, we have default ones set up for each block.
For the tracks module, you must designate a background color for the icon. Current options are listed in our Slippers Tailwind Config.
Place the class name of background color you'd like your icon displayed on. For example
The Comparison Pages that are linked in DevOps Tools can be edited via Netlify CMS. Their data files exist in
data/comparison_pages. They get conditionally rendered, the logic of which is controlled in
sites/uncategorized/source/layouts/comparison_page_v2.haml, where we check if the
data.comparison_pages[key_one] exists. If it does, we use this data in the new Slippers Comparison Infographic component.
If there is no Comparison Page data for a particular page, the build process will fall back to the old style static image. Conversely, in order to render this data in the appropriate page, you must match the
slug field with the name of the competitor as listed in
Comparison page data can currently be set up for comparison across all scores, or as single tools. There is a walkthrough video for this content type in the learning resources YouTube playlist.
The media library allows users to browse images uploaded to Netlify CMS. We have designated specific directories for each block of a content type if it uses an image. You can upload an image to these blocks using the widget in the admin, and it will automatically upload the image to the correct place. It's also good to verify your edits are working by taking a look at the review app associated with your changes.
To add a YouTube iframe in a markdown widget using Netlify CMS, do the following:
+icon in the editor
<iframe>code for you!
Every two weeks, we create a Netlify CMS learning resource video. In the video, we will demonstrate up to three features or tips about using Netlify CMS on the GitLab marketing site.
If you experience an issue or bug using the system, submit an issue! GitLab's marketing website (about.gitlab.com) is led by the Inbound Marketing Team and anyone can contribute. Please visit the the Inbound Marketing handbook to submit a support issue and make merge requests.
Sometimes drafts in progress are missing from the workflow tab in Netlify CMS. This makes it hard for an editor to access the Netlify CMS UI to continue editing this draft! This is a known issue. However, you can still access the draft editing interface with a direct URL.
The URL structure to find the draft in Netlify CMS is
COLLECTION_NAME= topic, topic_child, or blog_posts
name_of_page_edited, this is the last part of branch name created by Netlify CMS which is
Find this information from the MR associated with your change.
Here is an example MR #78654:
The Netlify CMS Direct URL will no longer work once a merge request has been merged with the master branch.
When a branch is published through Netlify CMS, the
cms/ branch remains in the repo after it's merged with master. This was reported here. This causes an API error message when a editor goes to edit the same page at a later date.
As a stop-gap solution, we are manually deleting merged
cms/ branches at the end of every iteration cycle.
We hope the Netlify CMS integration is easy and comprehensive enough to meet all your day-to-day content editing needs. But we also understand sometimes people might prefer to edit their content locally through an IDE, or directly through the GitLab interface.
Netlify CMS is a layer on top of data that still lives in this git repository, and is still accessibile via your local environment or the GitLab interface. In many cases, the content exists as markdown files (for example, blog posts in
sites/marketing/source/blog/blog-posts). In other cases, the content exists as a YAML file (for example, topic pages in
You can determine the relevant file path to content by referencing the Netlify CMS configuration file. Most of our content types are folder collections. So if you check the configuration file for
folder underneath the collection you want to edit, you'll see the path to its data files. From there, you can make edits in your IDE or the GitLab interface.
Since this manual editing is outside of the Netlify CMS formatting rules, you'll have to be mindful of formatting issues with YAML and Markdown, and may want to double check your local environment or review app before publishing changes.