You must have Hugo installed on your system and available in your $PATH
as a global binary. Most operating systems are supported – follow the relevant Install Hugo instructions for your operating system guides to get started.
Important: This project is built with version
0.110.0+extended
and is the minimum required version. You may (probably) use a newer version of Hugo, but will be subject to any Hugo changes.
You must also have a recent version of Node.js (14+) installed. You may use Volta, a Node version manager, to install the latest version of Node and npm
, which is a package manager that is included with node
's installation.
$ curl https://get.volta.sh | bash
$ volta install node
Finally, install the Node.js dependencies for this project using npm or another package manager:
$ npm install
When making changes to the site, including any content changes, you may run a local development server by running the following command:
$ npm run dev
This spawns a server that will be accessible via http://localhost:5173
in your browser. Additionally, any changes made within the project – including content/**
changes – will automatically reload your browser tab(s), allowing you to instantly preview your changes!
Additionally, this project includes a CI step for ensuring consistent code style. This applies to all files within the project, including markdown (*.md
) files, but will not affect the content itself or the content's output display. To see the style error(s), you may run:
$ npm run lint
Finally, some of these code-style errors may be fixed automatically. To do so, you may run:
$ npm run format
Our docs are deployed using Cloudflare Pages. Every commit pushed to production will automatically deploy to developers.cloudflare.com, and any pull requests opened will have a corresponding staging URL available in the pull request comments.
This repository includes a file with Visual Studio Code snippets for the most common Hugo shortcodes used Developer Docs.
The available snippets are:
Prefixes | Description |
---|---|
asideheader |
Inserts an Aside shortcode with header text. |
asidenoheader |
Inserts an Aside shortcode without a header. |
ccol |
Surrounds the current selection with content-column shortcodes. |
tblwrap |
Surrounds the current selection with table-wrap shortcodes. |
directory |
Inserts a directory-listing shortcode. |
headerfullfile |
Inserts a file header for a complete Markdown file. |
metatitle |
Inserts meta title fields in existing Markdown header. Used to complement a full file header. |
metadescription |
Inserts meta description fields in existing Markdown header. Used to complement a full file header. |
headerpartialfile |
Inserts a header for a partial Markdown file. |
headerpartialfileparams |
Inserts a header for a partial Markdown file with input parameters. |
partialinclude or renderpartial |
Inserts a render shortcode to include content from a partial in the current document. |
partialincludeparams or renderpartialparams |
Inserts a render shortcode to include content from a partial with input parameters in the current document. |
twotabs or addtabs |
Inserts a new tabs section with two tabs for dashboard and API instructions. |
detailssection or collapsible |
Inserts a collapsible <details> HTML element. |
Triggering one of the available snippets will insert their body content at the current cursor position.
Additionally, the following snippets support surrounding existing text:
Aside with header
Aside without header
Surround with content-column
Surround with table-wrap
Create collapsible details section
Note: Make sure you open the root folder of your cloned repository in Visual Studio Code (VS Code), so that VS Code correctly detects the snippets file stored in the .vscode/
sub-folder.
To enter a snippet:
- Enter the snippet prefix and press
Ctrl+Space
(Command+Space
on a Mac). - Select the desired snippet and press
Enter
. - (Optional) Enter or select a value for the first placeholder supported by the snippet, if any, and press
Tab
to move to the next placeholder. Keep replacing placeholders and pressingTab
. When there are no more placeholders, pressingTab
will end the process.
To surround existing content with a snippet:
- Select the text you wish to surround with a snippet.
- Enter the snippet prefix (temporarily replacing the selected text) and press
Ctrl+Space
(Command+Space
on a Mac). - Select the desired snippet and press
Enter
. VS Code will insert the snippet body and paste the previously selected content in the correct location. - (Optional) Enter or select a value for the first placeholder supported by the snippet, if any, and press
Tab
to move to the next placeholder. Keep replacing placeholders and pressingTab
. When there are no more placeholders, pressingTab
will end the process.
To get write access to this repo, please reach out to the Developer Docs room in chat.
Except as otherwise noted, Cloudflare and any contributors grant you a license to the Cloudflare Developer Documentation and other content in this repository under the Creative Commons Attribution 4.0 International Public License, see the LICENSE file, and grant you a license to any code in the repository under the MIT License, see the LICENSE-CODE file.
Cloudflare products and services referenced in the documentation may be either trademarks or registered trademarks of Cloudflare in the United States and/or other countries. The licenses for this project do not grant you rights to use any Cloudflare names, logos, or trademarks. Cloudflare's general trademark guidelines can be found at https://www.cloudflare.com/trademark/. Cloudflare and any contributors reserve all other rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel, or otherwise.