noejon / website

Attempt to create my own website using nextjs

A statically generated blog example using Next.js and Markdown

This example showcases Next.js's Static Generation feature using markdown files as the data source.

The blog posts are stored in /_posts as markdown files with front matter support. Adding a new markdown file in there will create a new blog post.

To create the blog posts we use remark and remark-html to convert the markdown files into an HTML string, and then send it down as a prop to the page. The metadata of every post is handled by gray-matter and also sent in props to the page.

Demo

https://next-blog-starter.now.sh/

Related examples

• DatoCMS
• Sanity
• TakeShape

How to use

Using create-next-app

Execute create-next-app with npm or Yarn to bootstrap the example:

npm init next-app --example blog-starter blog-starter-app
# or
yarn create next-app --example blog-starter blog-starter-app

Download manually

Download the example:

curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/blog-starter
cd blog-starter

Install dependencies and run the example:

npm install
npm run dev

# or

yarn install
yarn dev

Your blog should be up and running on http://localhost:3000! If it doesn't work, post on GitHub discussions.

Deploy it to the cloud with ZEIT Now (Documentation).

Notes:

I usually read blog posts on my phone, so this blog has been developed with mobile first in mind!

I worked on the website in the order it displays:

• Header
• Navbar

@media screen and (max-width: ${({theme}) => theme.breakpoints.md}) { body: { overflow-x: hidden; } }

For the navbar I decided to make a hamburger menu for mobile.

Article ideas:

• Theme
• Global styles
• TIL - Global Styles Theme
• Themes and typescript
• hamburger menu

TODO:

• optimise images : https://github.com/cyrilwanner/next-optimized-images ???