The site is based on the Bootstrap framework, and the content structure is designed to be simple, informative, intuitive and fast -- just like NATS! Please keep these principles in mind as you modify existing content or design new content for the nats.io site.
For more information on Bootstrap's themes, conventions, and content support (HTML/CSS/JS), please visit the Bootstrap website.
- Contributing Content
- General Style Guidelines and Conventions
- Content Organization
- Adding Documentation
- Adding Content Pages
- Adding a Blog Entry
- Adding a Company Logo
- Local Development
We view this project as a perpetual work in progress that can greatly benefit from and be enriched by the knowledge, wisdom and experience of our community.
We follow the standard Fork-and-Branch GitHub workflow. If you're not familiar with this process, please refer to either of the following excellent guides:
We encourage and welcome your contributions to any part or element of this site. We will review and discuss with you any contributions or corrections submitted via GitHub Pull Request.
- Use topic-based files and titles
- Use only headers 1 (#), 2 (##) and 3 (###)
- Use single spaces to separate sentences
- Markdown syntax: https://daringfireball.net/projects/markdown/syntax#img
- Cross references:
- Triple ticks for code, commands to run, user operations, input/output
- Single ticks for executable names, file paths, inline commands, parameters, etc.
- Graphics: save as
*.png; source in
The basic organization of the site is very simple, with each top navigation link corresponding to a Markdown file in the
The HTML documents and any Markdown documents contained in this directory are assembled by Hugo and rendered to static HTML during the build process.
The structure of the content directory is as follows:
- /content - /blog - /documentation - /download - about.html - community.md - contributing.md - index.html - support.html - privacy.md
The html files or directories should be pretty self explanatory for what pages they are used for.
The NATS documentation has moved to the nats-io/docs repo.
The structure of the content in the docs directory is as follows:
- /developer - /gateways - /leafnodes - /nats_admin - /nats_docker - /nats_protocol - /nats_server - /nats_streaming - /nats_tools - /sys_accounts - /whats_new
To update content, only the .md files should be used. The .html files in the repo nats-io/docs are auto-generated by gitbook when building the book.
Any new page should be a raw Markdown document placed in the appropriate content directory listed above.
Adding Quotes to Community
To add a new quote and logo to /community you are going to have to modify
/layouts/partials/quotes.html and follow the convention as seen from the existing quotes.
If you have a logo to go along with the quote, just add a full size
.png logo to
/src/user_logos. Then run
gulp in the terminal to generate the proper image size. Then link do the generated image in
To add a new blog entry, use the
hugo new command like the following:
hugo new blog/page-url-for-blog-post.md
page-url-for-blog-post with a SEO (Search Engine Optimization) friendly page url like:
nats-lands-in-london. So the resulting command would be:
hugo new blog/nats-lands-in-london. Then new blog entry would reside at:
Once the command is run you can find the new blog entry in
In the frontmatter of the new entry you will see metadata like this:
+++ date = "2019-12-01" draft = true title = "NATS Lands in London" author = "Esteemed NATS Thought Leader" categories = ["Engineering"] tags = ["NATS"] +++
Make sure to update that page metadata to reflect the specifics of your post (author, targeted publish date, etc.).
draft = true is set on blog posts. When a post has this status, it won't be published to the production site, but it will be viewable via the Netlify deploy preview. The following must be true for a post to go live on the site:
- The post's date must not be in the future
draftparameter must be set to
falseor not be present
For Categories you are going to add on or more of the following:
So for our example we would change
categories in the frontmatter to:
categories = ["Community"]
The date timestamp should be the exact time you ran the command to create the new blog entry. If you need to change it make sure you follow the same convention that is already there.
date = "2015-11-05T11:45:03-08:00". The date cannot be in the future.
For Tags, you can add as many tags as you feel are needed and they can be anything:
tags = ["nats","london","community"]
A default title is generated from the url you provided with the
hugo command but we recommend you change this to something is better suited for display purposes. Example:
title = "NATS Lands In London"
Blog Entry Content
To add images to a blog entry, first place them in
/src/blog. You may add images of any size, but please make sure they are at least 800x600 for quality purposes. Once added, run
gulp in the root of the repo. This will automatically resize any images added and put them in the proper place.
You may link to these images then. Example:
To add an embedded tweet, you just need to grab the embed code from the tweet, and then wrap the embed code in a div as follows:
<div class="tweet-embed-con"> <!-- Twitter Embed code goes here --> </div>
Check out the blog entry
/content/blog/nats-lands-in-london.md for a detailed example.
For adding content to the blog entry, please follow the style guidelines and conventions below.
You can either user docker image for your local development or install requirements following this documentation.
Clone your forked copy of the repository:
git clone email@example.com:<YOUR GIT USERNAME>/nats-site.git
Change to the directory:
Building the NATS site/documentation currently requires Hugo version 0.53 or higher. Installation instructions can be found here.
If you are running on MacOS, you can try issuing the command
make setup, this command will brew install requirements. Please refer to the
Makefile for more information.
Enter the following commands to install additional software dependencies (if you used
make setup you can skip this next step.)
npm install npm install --global gulp-cli
Building the Site
Images and other source assets live in the
src directory. The build workflow will resize images, and compile files in
src and create the assets directory for hugo.
gulp command will do a build of the src directory and copy assets to the the
static directory. This command will also run hugo and process the
content directory creating a snapshot of the site in the
To preview your changes, run:
hugo server starts hugo as a server. You can directly edit your forked repository and then go to
https://127.0.0.1:1313 to preview your changes on a browser.
src is modified, remember to run
gulp build to update the
static directory, and allow hugo to see the changes.
Create a new blog post :
hugo new blog/my-blog-post.md