dstroot / blog-next

Next.js blog

A statically generated blog using Next.js and Markdown and MDX

This blog showcases Next.js's Static Generation feature using Markdown and MDX files as the data source.

The blog posts are stored in data/_posts as Markdown files with front matter support. Adding a new Markdown file in there will create a new blog post. Code snippets are stored in data/_snippets and are MDX files.

To create the blog posts we use remark, remark-prism, 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.

Notes

This blog is deployed on Vercel (Documentation).

Made With

• Tailwind Styles
• Next.js "The React Framework for Production"
• Vercel Hosting & Analytics
• React For UI components
• Hero Icons Icons in React from the makers of Tailwindcss
• React Icons More React icons
• Remark Markdown processing
• MDX Bundler MDX processing
• Gray Matter Front Matter processing
• Next Themes Easy Dark Mode implementation
• RSS/Atom Feed Create RSS 2.0 Feed
• Next Sitemap sitemap.xml and robots.txt
• Dark Mode Easy Dark Mode
• Google Tag Manager Tagging & Analytics

Helpers

• Megatags Create and test Open Graph and other Meta Tags
• Web Code Tools Meta Tags tools

Checklist

• Add "Edit on GitHub" Link to pages
• Add Syntax Highlighting
• Add emoji support (https://github.com/rhysd/remark-emoji)
• Add "GitHub Flavored Markdown" support (mainly for tables)
• Add Dark/Light Mode (https://github.com/pacocoursey/next-themes)
• Add About Me Page
• Create a nice footer
• Add a "Read More" link
• Favicon
• Manifest and other images/icons (test with lighthouse)
• Custom 404 page
• Custom Error page
• Add RSS feed
• Add analytics (Vercel, Plausible, GA, or?) - Added Google Tag Manager and Google Analytics
  • Added Views tracking as well - but getting undefined.
• Add view tracking (using Dynamodb)
• Add Archive page
• Add Search?
  • Added Algolia Index and Search Page
  • How to add views count to drive ranking?
• Add Privacy and Terms (currently drafted)
• Add security and CSP headers (using next.config.js)
• 100 Lighthouse Scores - add service worker?
• Infinite scrolling - scroll in chunks to end of list - greatly speeds initial page load
• Add easy way to embed YouTube, Twitter, etc. by just putting link in Markdown
• Add ability to lint markdown files using https://github.com/remarkjs/remark-lint.
• How to lint .MDX files?
• Add all the open graph seo meta tags. See megatags or web code tools above. https://ahrefs.com/blog/open-graph-meta-tags/ next-seo
• Add robots.txt and sitemap.xml using https://github.com/iamvishnusankar/next-sitemap
• Add production logging (Logtail?)
• Add production error handling - e.g. Sentry
• Add testing https://nextjs.org/docs/testing
• Convert markdown to MDX - simplify site. NOTE: This (.MDX) breaks fast refresh (issue)

Packages

{ "name": "dan-blog", "version": "1.0.0", "scripts": { "dev": "next", "build": "next build", "postbuild": "next-sitemap", "start": "next start", "lint": "eslint -c .eslintrc.js ./data --ext mdx" }, "dependencies": {

"@aws-sdk/client-dynamodb": "^3.38.0",
"@aws-sdk/lib-dynamodb": "^3.38.0",


"@google-analytics/data": "^2.8.0",

Mailchimp Newsletter and Metrics:

"@mailchimp/mailchimp_marketing": "^3.0.72",
"react-mailchimp-subscribe": "^2.1.3",

"@mdx-js/react": "^1.6.22",
"date-fns": "2.27.0",

MDX Related Functionality

"esbuild": "^0.14.8",
"mdx-bundler": "^8.0.1",
"mdx-embed": "^0.0.22",


"feed": "^4.2.2",
"grey-matter": "^0.0.0",
"html-entities": "^2.3.2",

"millify": "^4.0.0",
"next": "12.0.7",
"next-themes": "^0.0.15",
"prismjs": "^1.25.0",

React

"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",



"react-icons": "^4.3.1",

"reading-time": "^1.3.0",
"rehype-code-titles": "^1.0.3",
"rehype-img-size": "^0.0.1",
"rehype-prism-plus": "^1.1.1",
"remark-cli": "^10.0.1",
"remark-emoji": "^3.0.2",
"remark-gfm": "^3.0.1",


"sharp": "^0.29.2",  // Image processing
"swr": "^1.1.1",     // Stale while revalidate data fetching library


"yarn.lock": "^0.0.1-security"

}, "devDependencies": { "autoprefixer": "^10.4.0",

"eslint": "^8.5.0",
"eslint-config-next": "^12.0.7",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-mdx": "^1.16.0",


"next-sitemap": "^1.6.203",


"postcss": "^8.4.5",
"postcss-import": "^14.0.2",


"prettier": "^2.3.2",
"tailwindcss": "^3.0.7",
"@tailwindcss/typography": "^0.5.0",
"cssnano": "^5.0.14"

}, "license": "MIT" }