High Level Design of a Markdown Blog in Next.js
you can use this repos as your reference through out the article.
Server file system and markdown parsers
First we develop react components, UI layout and stylings. These will house our content later on.
The actual content of the blog posts are written in Markdown format in a specific directory inside the repo for example “/src/posts/”.
The getStaticProps function is called by Next.js when the page is first loaded. Next.js allows you to access file system in server side configuration using the “fs” dependancy. It is then used to fetch the markdown content using Node.js file system.
After fetching the actual content as strings we need to parse it using a Markdown parser and pass it onto the components as state props for react to do its magic.
Github pages
By making a repository on Github, you can host all of the code needed for the blog. Then by using the Github pages free service you can serve the HTML files available on a specific branch in the repo.
As a cherry on top, you can use Cloudflare’s free services and your domain provider settings, to point the “YOUR_USR.github.io/YOUR_REPO” to your custom domain “YOUR_DOMAIN.co.uk” for example.
Sky's the limit!
You can do all sorts of cool things with Markdown files! You can hide any metadata inside it files called Frontmatter. Your markdown parser will provide it to you and you can use it to embed dates, tags or arbitrary static state in your blog posts!
Using that state in React, you can conditionally hide/show your posts, render tags or dates. you can use those tags to categorize your content and show the items in a side menu. you can also create search or sort functioanlities to find the content you need! Sky’s the limit.
Generating static HTML, CSS and JS files
By using the `next export` command in the terminal, we can render all the HTML, CSS and JS files we need for the website to be up and running without a runtime in the `/out` directory. This is great because this is all we need for Github pages!
Publishing changes without hassle
Let’s publish the generated files to Github Pages. I use the gh-pages CLI utility, available on NPM, to publish the static files to a specific branch.
Github automatically detects push-events to that branch and deploys newly created HTML and assets files to the web!
All in one go!
You can aggregate all the steps I talked about in one single command, or even register it as a NPM command to run every time you want to publish your blog.
$ yarn build && yarn export && touch out/.nojekyll && gh-pages -t -d outComments without a backend?
Any form of content creation requires a feedback loop to bring value to its users and authors.
The problem with Github pages for handling comments is that everything is static. You don’t have access to a database on it to be able to do CRUD operations.
Of course there are workarounds for those kinds of tasks but I wanted something elegant and fast. This is where utterances comes into play.
With utterances Github app you can have fully functional comment section in your posts! It uses Github issues under the hood and I could easily integrated this with React.
Make sure you checkout their documentation for more details!
That’s it! Thank you for your time. If you have any suggestions or ideas please share it with me on comment section. I would love to know your perspective on this subject! ❤️
