This website is built using Docusaurus 2, a modern static website generator.
The live version is hosted at https://writings.flashbots.net
It's recommended to install the Node.js packages from within a Docker container (installing npm packages can compromise your machine because it can execute arbitrary scripts). You can start the Docker container like this:
docker run -p 3000:3000 --rm -it -w /mnt -v $(pwd):/mnt node:16 /bin/bash
Install the dependencies:
$ yarn
Build the source:
First create a copy of .env.dev at the root of the project and name it .env
Linux: cp .env.dev .env
Windows: copy .env.dev .env
$ yarn start
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. You can view it now at:
To serve a finally built version (i.e. to double-check the meta tags before publishing):
$ yarn build
$ yarn serve
Create a pull-request to the main branch. All changes to the main branch are automatically published via Vercel.
- Clone the repository https://github.com/flashbots/flashbots-writings-website and switch to a new branch
- If the author has not published on Writings before, add their information in /content/authors.yml
- Create a new .mdx-file under
/content/and include the publishing date in the filename. - Copy the header rows from a previous posts (for instance, this post)
- Edit the content on the header (also called 'front-matter').
- Edit the content of the Writings-post. (If you are embedding Dune Dashboards, please follow the instructions here.
- Add a
<!--truncate-->tag around after the first paragraph. All content before that tag will be visible as a preview on https://writings.flashbots.net - Create a new topic on the forum with a summary of the post + CTA, open questions, and discussion topics to encourage conversations. Add the link in the "forum_link:"
- To preview, install the dependencies as described above and run
yarn start - Make sure the meta tags and front-matter is in order, and that the post has a nice description and image:
- For SEO and previews/sharing, it is recommended to add an image. You can get free images from https://unsplash.com and other pages, but also consider generating an image with Dall-E and Stable Diffusion.
- The image should be 1200x630px and less than 400kb.
- Run images through ImageOptim, as it can significantly decrease filesize, thus speeding up page load time.
- Think about a good introduction paragraph, as it will be used in social previews. It will either use the first part of the post, or you can manually set it with the
description: ...front matter.
- Once satisfied, create a PR. Once the PR is merged, the Github CI system will automatically deploy it.
- Check the sharing meta tags using https://www.opengraph.xyz, and update the content meta tags as needed.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent