Syknapse Blog

This is my developer blog. I write about career change and front end development.

It was built with Next.js and deployed with Netlify based on this great project by Cassidy Williams which creates and deploys the project with a single click.

A detailed tutorial of how to build this can be found in this tutorial blog post.

Dev

To work on the project locally

Install

npm install
# or
yarn

Run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser.

Posts

New blog posts are added to the posts directory in Markdown.

Add status: 'unpublished' to the frontmatter of articles you don't want visible on the site.

Pages

New pages are added to the pages directory.

Styling

Style is created with styled-jsx, which is included out of the box with Next.js. Because this uses Next.js 9.3, there's also built-in Sass support and CSS Module support.

The font used is Inter.

Hero images

To include an optional hero image in a post put the images in public/static/, and then include in the blog .md file metadata:

---
title: 'Post title'
author: 'Post author'
date: '2020-04-27'
hero_image: ../static/example.jpg
---

Hosting

Hosted on blog subdomain of sykhoudeib.com. More info on subdomain hosting here, and different repos for different subdomains on Netlify here

Import to Markdown

From Medium

Use mediumexporter to import Medium articles and transform to compatible markdown.

$ mediumexporter <medium post url> > <new-file-name>.md

For Example

 ~/Documents/GitHub/blog-syk-houdeib
 $ mediumexporter https://medium.com/free-code-camp/how-i-switched-careers-and-got-a-developer-job-in-10-months-a-true-story-b8895e855a8b > posts/career-switch.md

Further options with:

$ mediumexporter -h

For embeddable elements like tweets, insert an empty image ![embed]() into the markdown, and add the embed html to the the frontmatter header. The replaceElement() method in /posts/[postname].js will find the embed image tag and replace it with the embed html.

From others

Use clipboard2markdown.
Copy the page (not the URL) and paste to get the markdown.

From Google Docs use docs to markdown add-on