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.
To work on the project locally
Install
npm install
# or
yarnRun the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser.
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.
New pages are added to the pages directory.
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.
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
---
Hosted on blog subdomain of sykhoudeib.com. More info on subdomain hosting here, and different repos for different subdomains on Netlify here
Use mediumexporter to import Medium articles and transform to compatible markdown.
$ mediumexporter <medium post url> > <new-file-name>.mdFor 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.mdFurther options with:
$ mediumexporter -hFor 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.
Use clipboard2markdown.
Copy the page (not the URL) and paste to get the markdown.
From Google Docs use docs to markdown add-on