How I created a blog using Next.js and MDX
I recently created a blog for hosting few JavaScript notes for personal use. You can view the website here.
Initially, I decided to go with Markdown, since it is simple and easy to create content without any styling as opposed to writing full-blown HTML posts.
However, I realized soon that the styling options are very limited and it’s impossible to get my post to look like I imagined.
This is how it currently looks,
This design couldn’t have been made with just markdown. I started to look for other options and came across MDX. Putting simply it’s simply Markdown and JSX combined, so you can add components in your markdown file now. That looked promising.
This page has all the information to get started.
I cloned this repository and started to play with it.
The first thing I did was to update next.config.js
This started to load .mdx files from pages/ directory
All that was remaining was to create components as per my design and import them in post. Here is a sample post
If you are going to use the above code, save the file as *.mdx file instead of jsx
As you can see this file has both markdown as well as jsx. I also used bootstrap for the accordion. To include the bootstrap CSS you need to import it in _app.css
The next big challenge was to deploy this site with GitHub pages. This looked easy as Next.js builds all the files in the out folder and then all we have to do is to move these files to the gh-pages branch.
Deployment
As mentioned above I added these scripts to my package.json file
"build": "next build","export": "next export","next-deploy": "yarn build && yarn export",
This was working fine but after I moved the out directory contents to the gh-pages branch, the site was deployed however none of the routing or the CSS files were getting loaded correctly.
After a lot of research and trial and error found correct values for basePath and assetPrefix to be added in next.config.js
In short, since my site was hosted at vaibhavmande.com/jsnotes, next.js was not aware of the jsnotes folder, the build was done for the site to be running at root location.
The other problem was with .nojekyll file to be pushed in out folder. This needed so that _next contents will be copied to the server. This was solved by a -d out flag for gh-pages
touch out/.nojekyll && gh-pages -d out -t trueThis is my updated next.config.js and scripts section of package.json
The further improvement in the site is to use basePath and assetPrefix values conditionally using environment variables since now you have to constantly switch them while working locally or deploying.
You can view the deployed site here
Also, check my portfolio
