Dev.to

How You Can Build The Best, Fastest Blog On The Internet

It is (almost) a rite of passage for every developer today to develop and host a blog on their own (because we really love to "engineer" our own solutions, don't we?) In all honesty, developers are so spoilt for choice today with the number of web frameworks, CMS solutions, and other tools available in the market that it has become next to impossible to pick that "one correct solution" any longer. Now, while the title of this blog is pure clickbait (sorry!) and the irony of not publishing this on a self-hosted blog is not lost on me, we do have a legitimate challenge here. Therefore, in this blog, we will discuss how you can build a simple yet highly performant blog site and deploy it on the internet. Defining our requirements First things first, we must define what we need from this blog site. If I were to host my own blog, I would ideally want the following features at the minimum: Simple, consistent experience (just one layout works) Easy content authoring system (ideally, one that allows writing Markdown) Quick load times (all content should be pre-rendered) SEO-friendly (pre-rendering can help here too) Easy to preview and test (should be simple to locally deploy) Simple and cheap to deploy (pick one of 'n' hosting platforms with GitHub CI/CD available) With these decided, we can now pick a tech stack to build our blog site. Choosing the tech stack Considering the feature set above, I have chosen the following tech stack to build a blog site: Web framework: SvelteKit SvelteKit is a full-stack framework for building modern web applications using Svelte. It provides file-based routing, multiple rendering methods (including Static Site Generation or SSG), API handling, and other powerful features to help you build your web apps. Content authoring system: Markdoc Markdoc is a Markdown-based content authoring framework developed by Stripe. It extends standard Markdown by adding custom tags, components, and validations, making it more powerful for structured content in web applications. Site hosting: Azure Static Web Apps Azure Static Web Apps is a fully managed hosting service for static sites and web frameworks like Next.js, Nuxt, and SvelteKit. It provides automatic deployments from GitHub, free SSL, global CDN, and built-in serverless functions support (via Azure Functions). Note: You can pick a different hosting platform if you like. Azure Static Web Apps is a personal preference. Platform choice will not directly affect the site's functionalities; however, it may affect site reliability and scalability. Developing the blog site Now that we have decided on our site's tech stack, we can start building the blog site. Step 1: Create a SvelteKit app Pre-requisite: install Node.js on your system if you haven't already. To create a SvelteKit app, you must open your terminal and run the following command: npx sv create This will lead us to an interactive setup process, where must pick our project directory, template (pick SvelteKit minimal, type checking, and other configuration settings. ┌ Welcome to the Svelte CLI! (v0.6.21) │ ◇ Where would you like your project to be created? │ blog │ ◇ Which template would you like? │ SvelteKit minimal │ ◇ Add type checking with Typescript? │ No │ ◆ Project created │ ◇ What would you like to add to your project? (use arrow keys / space bar) │ prettier, eslint │ ◆ Successfully setup add-ons │ ◇ Which package manager do you want to install dependencies with? │ npm │ ◆ Successfully installed dependencies │ ◇ Successfully formatted modified files │ ◇ Project next steps Once that is done, enter your project directory, run the npm install command, and your minimal SvelteKit app is ready! Step 2: Integrate Markdoc with SvelteKit To easily integrate Markdoc with SvelteKit, my team member from Appwrite, Torsten Dittmann, has developed an open-source NPM package, svelte-markdoc-preprocess that acts as a preprocessor and converts Markdoc to Svelte at build time. We will install this in our app by running the following command: npm install svelte-markdoc-preprocess Then, visit the svelte.config.js file and update its content: import adapter from '@sveltejs/adapter-auto'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; import { markdoc } from 'svelte-markdoc-preprocess'; const config = { preprocess: [vitePreprocess(), markdoc()], extensions: ['.markdoc', '.svelte'], kit: { adapter: adapter() } }; export default config; This will enable the app to use the preprocessor at build time and designate .markdoc as a valid file extension. Step 3: Prepare a Markdoc layout Next, we must create a Markdoc layout. This will define a common, consistent structure and styling for our blog pages. In the src directory, create a directory, markdoc. Within that, create two subdirectories, layouts and styles. T

Feb 17, 2025 - 16:06
 0
How You Can Build The Best, Fastest Blog On The Internet

It is (almost) a rite of passage for every developer today to develop and host a blog on their own (because we really love to "engineer" our own solutions, don't we?) In all honesty, developers are so spoilt for choice today with the number of web frameworks, CMS solutions, and other tools available in the market that it has become next to impossible to pick that "one correct solution" any longer.

Too many

Now, while the title of this blog is pure clickbait (sorry!) and the irony of not publishing this on a self-hosted blog is not lost on me, we do have a legitimate challenge here. Therefore, in this blog, we will discuss how you can build a simple yet highly performant blog site and deploy it on the internet.

Defining our requirements

First things first, we must define what we need from this blog site. If I were to host my own blog, I would ideally want the following features at the minimum:

  • Simple, consistent experience (just one layout works)
  • Easy content authoring system (ideally, one that allows writing Markdown)
  • Quick load times (all content should be pre-rendered)
  • SEO-friendly (pre-rendering can help here too)
  • Easy to preview and test (should be simple to locally deploy)
  • Simple and cheap to deploy (pick one of 'n' hosting platforms with GitHub CI/CD available)

With these decided, we can now pick a tech stack to build our blog site.

Choosing the tech stack

Considering the feature set above, I have chosen the following tech stack to build a blog site:

Web framework: SvelteKit

SvelteKit is a full-stack framework for building modern web applications using Svelte. It provides file-based routing, multiple rendering methods (including Static Site Generation or SSG), API handling, and other powerful features to help you build your web apps.

Content authoring system: Markdoc

Markdoc is a Markdown-based content authoring framework developed by Stripe. It extends standard Markdown by adding custom tags, components, and validations, making it more powerful for structured content in web applications.

Site hosting: Azure Static Web Apps

Azure Static Web Apps is a fully managed hosting service for static sites and web frameworks like Next.js, Nuxt, and SvelteKit. It provides automatic deployments from GitHub, free SSL, global CDN, and built-in serverless functions support (via Azure Functions).

Note: You can pick a different hosting platform if you like. Azure Static Web Apps is a personal preference. Platform choice will not directly affect the site's functionalities; however, it may affect site reliability and scalability.

Developing the blog site

Now that we have decided on our site's tech stack, we can start building the blog site.

Step 1: Create a SvelteKit app

Pre-requisite: install Node.js on your system if you haven't already.

To create a SvelteKit app, you must open your terminal and run the following command:

npx sv create

This will lead us to an interactive setup process, where must pick our project directory, template (pick SvelteKit minimal, type checking, and other configuration settings.

┌  Welcome to the Svelte CLI! (v0.6.21)
│
◇  Where would you like your project to be created?
│  blog
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  No
│
◆  Project created
│
◇  What would you like to add to your project? (use arrow keys / space bar)
│  prettier, eslint
│
◆  Successfully setup add-ons
│
◇  Which package manager do you want to install dependencies with?
│  npm
│
◆  Successfully installed dependencies
│
◇  Successfully formatted modified files
│
◇  Project next steps

Once that is done, enter your project directory, run the npm install command, and your minimal SvelteKit app is ready!

Step 2: Integrate Markdoc with SvelteKit

To easily integrate Markdoc with SvelteKit, my team member from Appwrite, Torsten Dittmann, has developed an open-source NPM package, svelte-markdoc-preprocess that acts as a preprocessor and converts Markdoc to Svelte at build time.

We will install this in our app by running the following command:

npm install svelte-markdoc-preprocess

Then, visit the svelte.config.js file and update its content:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import { markdoc } from 'svelte-markdoc-preprocess';

const config = {
    preprocess: [vitePreprocess(), markdoc()],
    extensions: ['.markdoc', '.svelte'],
    kit: {
        adapter: adapter()
    }
};

export default config;

This will enable the app to use the preprocessor at build time and designate .markdoc as a valid file extension.

Step 3: Prepare a Markdoc layout

Next, we must create a Markdoc layout. This will define a common, consistent structure and styling for our blog pages. In the src directory, create a directory, markdoc. Within that, create two subdirectories, layouts and styles.

  • The layouts sub-directory

In the src/markdoc/layouts directory, add a file Blog.svelte:




    </span><span class="si">{</span><span class="nx">title</span><span class="si">}</span><span class="nt">
     name="description" content={description} />




     id="title">
         href="/">← Back to blog
        
{title}

         class="description">{description}
        
    
            
  • {author}
    • 
            
  • {formatDate(new Date(date))}
    • 
            
  • {timeToRead} mins
    • 
        

         />