These are the source-files for my blog, cmichel.io.
- Clone this repo
npm install- To run it in development mode, run
gatsby develop - To build (deploy) the site, run
gatsby build(npm run deploy)
This repo includes cross-posting scripts to publish the articles to medium and the steem blockchain.
After cloning this repo, you need to set up your .env file. An example is given in .env.example.
I use netlify to auto-deploy this site on any changes in this repo. You might want to create an account and authorize netlify.
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 master.
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 (
sharpplugins,gatsby-remark-images). They are copied topublic/staticand the corresponding relative path of the markdown image nodes are rewritten to use these images instead. - SVG images and other attachments (
pdfs, etc.) linked to in the post are again copied topublic/staticand the relative paths are rewritten (gatsby-remark-copy-linked-files). - Code snippets are displayed with
prismjs(gatsby-remark-prismjs). The theme can be set insrc/templates/prismjs.css
Note: The linked images and files are only created when building. Therefore, you need to run
gatsby buildbefore you can see them indevelopmode.
Other plugins used in the build process:
- An RSS feed containing all posts is created at
public/feed.xml(gatsby-plugin-feed)
This repo includes cross-posting scripts to publish the posts to medium and the steem blockchain.
They are located in the scripts/publish directory. You need node v8+ to run them, because they make use of async/await.
Cross-posting:
-
npm run crosspostpublishes all new posts to all platforms. New posts are found by doing agit diffonmasterbetweenHEAD~1andHEADand checking for newly created.mdfiles. -
npm run crosspost -- --path "progress-report/progress-report.md"to publishsrc/pages/progress-report/progress-report.mdto all platforms. -
npm run crosspost -- medium --path "progress-report/progress-report.md"to publishsrc/pages/progress-report/progress-report.mdto medium only. The same works using thesteemcommand instead.
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 topublic/**/*keeping the same sub-directory structure. Done by the customcopy-images-structureplugin inplugins. - 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 relativeurlsin Markdownlink/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.