These are the source-files for my blog, cmichel.io.
- Clone this repo
- To run it in development mode, run
- To build (deploy) the site, run
npm run deploy)
I use netlify to auto-deploy this site on any changes in this repo. You might want to create an account and authorize
Publishing new posts
To publish a new post, simply create a directory in
src/pages and put a markdown file with the
.md extension in it. The directory's name is used as the post's slug.
Once done writing, you push the changes to
This triggers a netlify
git hook which builds and auto-deploys the new site. After some minutes the new post is live.
Currently, you have to run the cross-posting scripts by hand.
This is a standard gatsbyjs repo.
It includes the posts written in Markdown (along with the images used in them) in their own directories in
src/pages. This directory is used as the post's slug. (There are some legacy posts that do not follow this structure and have a
slug field defined in the markdown frontmatter.)
The following gatsby-plugins are used during the posts' creation process:
- Local non-vector images linked to in the post are post-processed by compressing and cropping them to a max size, and thumbnails of different sizes are created (
gatsby-remark-images). They are copied to
public/staticand the corresponding relative path of the markdown image nodes are rewritten to use these images instead.
- SVG images and other attachments (
public/staticand the relative paths are rewritten (
- Code snippets are displayed with
gatsby-remark-prismjs). The theme can be set in
Note: The linked images and files are only created when building. Therefore, you need to run
gatsby buildbefore you can see them in
Other plugins used in the build process:
- An RSS feed containing all posts is created at
They are located in the
scripts/publish directory. You need
node v8+ to run them, because they make use of
npm run crosspostpublishes all new posts to all platforms. New posts are found by doing a
HEADand checking for newly created
npm run crosspost -- --path "progress-report/progress-report.md"to publish
src/pages/progress-report/progress-report.mdto all platforms.
npm run crosspost -- medium --path "progress-report/progress-report.md"to publish
src/pages/progress-report/progress-report.mdto medium only. The same works using the
Note: Cross-posting to steem contains a check if the post's slug already exists for your account to avoid accidentally double-posting the same post. Medium does not have this built-in check, due to restrictions of the Medium API.
The following modifications are done when publishing a markdown post:
- All images specified in
src/pages/**/*are copied to
public/**/*keeping the same sub-directory structure. Done by the custom
- The markdown file is parsed by
remark, extracting the slug and frontmatter (containing the title and tags for cross-positing). The cross-posting script then resolves all relative
imagenodes to absolute urls, prepending this site's domain and the post's slug.
- A footer is inserted, linking back to the original post on my blog.
- Add drip widget?
- Implement auto-detection of new posts, and add a
.circlecigit hook which then automatically cross-posts.