So you're interested in contributing to the Pulumi blog? Great! Follow these steps to make it happen.
If you haven't already, clone this repository and follow the instructions in the README to set up your environment and run the development web server.
Once you're able to run:
make serve
If you can browse the site locally at http://localhost:1313/ then you are ready to proceed to the next section.
-
Move onto a new branch for your blog post using
git checkout -b initials/your-blog-post
(replace initials with your initials, and replace your-blog-post with the name of your blog post). -
Resist the temptation to copy-and-tweak an existing post! Instead, run the following command into the terminal (at the root of the project). This will generate a new file, including all the required frontmatter parameters.
make new-blog-post
This will prompt you for a "slug" (a URL-friendly path) for your post and create a minimal post that you can browse to at http://localhost:1313/blog/. You'll find the new post's source file at
themes/default/content/blog/[your-slug]/_index.md
containing the set of Hugo front matter properties you'll need to get started:--- title: "My New Post" date: 2019-07-17T14:26:50-07:00 meta_image: meta.png authors: - joe-duffy tags: - some-tag ---
Adjust the title and authors and add tags as appropriate (see the two headings below for more details). To change the post's URL, simply rename the folder containing
_index.md
; changing the folder name tomy-awesome-post
, for example, would result in a post ultimately published at https://www.pulumi.com/blog/my-awesome-post.Important
The
title
will populate the<title>
tag of the page, the<h1>
, and the display value if it is linked to internally. This field has a strict 60 character limit because of SEO related limitations. If you would like to have a longer display title (i.e. the<h1>
tag) then you will need to specify it by addingallow_long_title: True
to the front matter. If you would like to display different text on internal links than what thetitle
value is, you can also specify alinktitle
value. Both theallow_long_title
andlinktitle
values can be of any length. Below is an example of this:--- title: This a Page Title allow_long_title: True linktitle: This is the link text ... ---
Keep in mind that only posts dated prior to "now" (meaning the moment the build process begins) will published to production. The development server renders future content (so you can work on scheduled posts in advance), but the build process does not; see below for details on scheduling posts for future publishing.
Tags
Every tag added makes the overall tagging system harder to quickly grok and use. So, we strongly prefer using existing tags wherever possible. The tag system is as follows:
- Pulumi tags:
pulumi-news
for company news (funding, certifications, etc.),pulumi-events
for events we participate in or host,pulumi-interns
for intern posts,pulumi-enterprise
for enterprise-focused blog posts - Cloud provider tags: Only add a cloud provider tag if we expect to have multiple posts about the provider. Today, that means
aws
,azure
,google-cloud
,digitalocean
- Feature tags: Only add a feature tag if we expect to have multiple posts about the feature. Today, that means
features
(for feature announcements),aliases
,continuous-delivery
,logging
,migration
,native-providers
,packages
,policy-as-code
,secrets
,testing
. - Technology/scenario tags: Similar to feature tags, but focused on user scenarios. Today, that means
cloud-engineering
,cloud-native
,containers
,data-and-analytics
,development-environment
,github-actions
,kubernetes
,serverless
. - Language tags: Any post that is language/ecosystem specific should have one or more of
.net
,go
,javascript
,python
,typescript
.
- Pulumi tags:
Canonical link
If you are posting a blog that originated somewhere else (for example, a syndicated community post) you will want to add the setting canonical_url
for the URL where the blog post originated.
-
If you don't already have a TOML file in the
team
directory of the repo, create one now. For Pulumi employees, that file should look something like this:id = "christian-nunciato" name = "Christian Nunciato" title = "Software Engineer" status = "active" [social] github = "cnunciato" linkedin = "cnunciato" twitter = "cnunciato"
For community contributors, it's mostly the same, but with a
status
ofguest
, and a more informativetitle
:id = "mikhail-shilkov" name = "Mikhail Shilkov" title = "Microsoft Azure MVP and early Pulumi user" status = "guest" ...
The
social
section, and the items within it, are optional.Once your team-member file's been created, update the new post's
authors
property to refer to your team memberid
string. If you're still running the development server, you should see the change reflected in the browser immediately.
Posts are written in Markdown and rendered with BlackFriday, Hugo's default Markdown processor. GitHub's Mastering Markdown guide is a helpful syntax reference if you need it. You can also include HTML in your posts, if you need greater control over the output than Markdown can provide.
For formatting guidelines, see the Style Guide in CONTRIBUTING.md.
There are a couple of ways to do syntax highlighing in Hugo, but we generally recommend code fences, along with an optional language specifier — e.g., for TypeScript:
```typescript let bucket = new aws.s3.Bucket("stuff"); ... ```
Additional languages are available as well.
Shortcode for a warning note:
{{% notes type="warning" %}}
**DANGER** Will Robinson!
{{% /notes %}}
Shortcode for an info note:
{{% notes type="info" %}}
Using Bastion hosts is a best practice.
{{% /notes %}}
To add images to the body of your post, first place them within in the folder containing the post's Markdown file (e.g., at blog/my-new-post/platypus.png
), then reference them relatively:
![The humble platypus](platypus.png)
When you generate a new post, an OpenGraph placeholder image is included for you, and a reference to that image is added to the post's frontmatter as well, as its meta_image
. The meta_image
is meant to accompany the post in social previews (Twitter cards, unfurled Slack links, etc.) and on the Pulumi blog home page. It's optional, but recommended, as it can help to make your post more attractive and informative.
For best results, we suggest the following specs for the meta_image
, largely based on Twitter's dev docs:
Aspect Ratio | Recommended Size | Format | Background |
---|---|---|---|
2:1 | 1200×600 | PNG | Opaque (No Transparency) |
Remember to replace the meta_image
placeholder (or remove the property altogether and delete the placeholder meta.png
file) before submitting your post.
For help creating your meta_image
, check out our Build Your Own Meta Image file in Figma. There you’ll find backgrounds, images, and logos to assemble the meta_image
for your blog post.
A few things to keep in mind when designing a meta image
:
- Avoid placing important text or graphic elements too close to the edges of the frame — elements at the edges may get cropped at some display ratios
- Try to include at least one Pulumi identifier (word mark, Pulumipus) so viewers can tell at a glance that the image belongs to the Pulumi blog
- Use dark text on light backgrounds, and light text on dark backgrounds to ensure readability
- Remember to zoom out from your image and confirm it looks as you intend at a thumbnail size
To embed a YouTube video, you can use Hugo's built-in youtube
shortcode, which takes the video's YouTube ID, obtainable from its public URL on youtube.com:
{{< youtube "kDB-YRKFfYE?rel=0" >}}
For videos belonging to the Pulumi YouTube channel, you'll usually want to append the ?rel=0
query parameter as well (as above), which tells YouTube to limit the suggestions it makes at the end of a video to those from the same YouTube channel. Learn more about player parameters here.
There's a Hugo shortcode for Tweets, too, which accepts a Tweet ID, accessible from its permalink:
{{< tweet id="1202020186234048512" user="abbyfuller" >}}
For more Hugo shortcode fun, go here.
When you're ready to submit your post for review, issue a Pull Request against the master
branch of the repo, and the team will have a look. Once merged — provided its date
has passed the post will be deployed to https://www.pulumi.com/.
Since the build process is triggered by (and so requires) a commit to master
, you can either wait for the post's date
to pass, and then merge it. If a post happens to get merged a future date, the resulting build will exclude the post, requiring a commit of some sort to occur after its date
in order to trigger a build and get the post published.
- As mentioned, use the Hugo blog-post generator instead of copying another post:
make new-blog-post
(or alternatively, the more verbose but equivalenthugo new --kind blog-post "themes/default/content/blog/[your-slug]"
) - Spell and grammar check. Consider using a service such as Grammarly.
- Check for a break
<!--more-->
after the first paragraph, and ensure that your post's introduction looks right on the blog home page. - Check that your meta_image appears properly on the blog home page. Do not use animated GIFs for preview images.
- Preview locally. Check formatting, links, and images for appearance.
- Use the Twitter card validator to check the how the blog appears in a tweet (use the preview provided in the PR).