Welcome to the Multilingual Svelte Markdown Blog, a database-free, user-friendly, and SEO-optimized blogging platform powered by Svelte. This project is designed for creating and managing multilingual blog posts with an intuitive folder structure and responsive mobile-friendly design.
With DB, you obtain additional features like: votes, comments, and two types of auto-moderation, powered by AI.
Check out the production demo at lazarevsky.com (with all features + advanced (Vote, Comments, AI auto premoderation: quick and long)).
This is an example of domain-based i18n: lazarevsky.com / igor.kg
Simplified demo without advanced features at https://blogflow-sveltehack.vercel.app/.
Simplified demo without advanced features at https://blogflow-pathbasedi18n.vercel.app/.
This is an example of path-based i18n: yoursite.org/en / yoursite.org/kg
- Multilingual Markdown blog
- No database required
- User-friendly organization with a /static folder structure
- Frontmatter for specifying post title, creation date, tags, visibility, and homepage display
- Automatic post illustration detection based on the folder name
- Mobile-friendly responsive design with a burger menu
- Posts sorted by date on the main page and within the blog
- Tag support for posts
- Simple autoposting for scheduling posts on specific dates, no redeployment required
- SEO optimization with Server Site Generation (SSG)
- Dark and light theme-switching support
- Easily manage your content via GitHub from any device (if using Vercel or similar CD/CI)
- Two types of i18n: 1) domain-based: site.com & site.kg, 2) path-based: site.org/en & site.org/kg
- On path-based i18n, changes the language of the current page (without redirecting to the home page in another language)
For these features and more, you will need a DB. We use Deta for example:
- Up & Down voting for posts
- Commenting on posts
- Preventing multiple voting by one user (front-end only)
- Protection from comments longer than 1000 characters (at both the frontend and backend)
- Very Quick Basic auto-moderation via ChatGPT (1-5 sec. average), available on the basic Vercel plan or similar. Only your OpenAI key is needed.
If a post does not pass basic automatic moderation, it will be shown to the user as added, but will not be saved and will simply disappear upon reloading the page.
- Long Advanced SPAM detection (takes 20-60 sec. average, you need Vercel Pro or similar for long background tasks).
If a post does not pass advanced moderation, it will be shown to the user as added, and will be marked red when reloading the page.
- Block Send button while submitting
- Auto change meta lang tag for i18n
- Added meta-tags for post pages (todo: other pages)
- Dynamically loading comments & votes, after SSG
- Dynamically show or hide cover image for post if present in the folder
- Support for different cover image extensions (jpg, jpeg, png)
- Create a folder in
/static/postswith the URL-friendly name of your post (e.g.,my-first-post) - Create an
en.mdfile (in English) - At the top of the file, use frontmatter:
---
title: 'Title of your post'
date: '17.04.2023'
excerpt: 'Short description for your post'
tags: ["ai", "future"]
starred: true
hidden: true
---
- Use
starred: trueif you want to show your post on the main page - Use
hidden: trueif you want to hide your post entirely - Create
<lang>.mdin another language - Create an image cover for your post with the name
<furl>.jpgor<furl>.png(e.g.,my-first-post.jpg) in the same folder - Profit!
It's easy. Just create a post with a date set in the future.
No redeployment required!
For example, you can create 7 posts once a week and schedule them. One deployment a week 👍
- Clone this repository:
git clone https://github.com/gressus/blogflow.git
- Navigate to the project directory:
cd blogflow
- Install the dependencies:
npm install
- Run the development server:
npm run dev
- Open your browser and visit
http://localhost:5173
To deploy the Multilingual Svelte Markdown Blog, follow these steps:
- Build the project for production:
npm run build
- Deploy the
publicfolder to your preferred hosting service.
Contributions to the Multilingual Svelte Markdown Blog are welcome. Please create an issue to discuss your proposed changes or create a pull request to submit your improvements.
This project is licensed under the MIT License.
A special thanks to the Svelte community and everyone who participated in the Svelte hackathon.
In the demo example, we use the pair: en/kg languages (English and Kyrgyz languages).
- Search for
"kg"throughout the entire project - In the found .svelte files, change
"kg"to your language and add translations - Change all
kg.mdfiles in the/staticfolder - Modify
hooks.serve.js, replacing"kg"with your language and your sites (for domain-based i18n) - Change
"KG"to your language and your sites inLanguageToggle.svelte
By default, we have domain-based i18n. One domain is for one language, and another domain is for another language. The "Change lang" button redirects from one domain to another.
If you want to change the type of i18n to path-based routing, please checkout the pathbased-i18n branch.
In this example, we will use deta.space, but you can use your own.
- Register on deta.space
- Open the terminal and go to the folder
/detabd/myblog - Run
space loginandspace new - Wait until your project is initialized
- Run
space push - Go to the deta.space site, navigate to Builder, go to your project, and generate a KEY
- Rename
_envto.envand paste the key from Deta - Uncomment
VoteSectionandCommentSectionin/routes/[slug]/+page.svelte
- Add your OpenAI key to
.envasVITE_OPENAI_API_KEY=
- Uncomment the "Advanced SPAM detection" block in
src/routes/api/v1/post/[furl]/comments/+server.js
- Note that long advanced SPAM detection may timeout if chatGPT takes more than 60 seconds.
- This is only a pre-moderation feature, as it is not as accurate as expected. However, it may be useful as a secondary helper for the site owner.
- In the demo, spam comments are shown in red. In a real production environment, you should hide them, of course.
- Around 15:00 GMT is the worst time for chatGPT, as almost all requests time out.
- Optimize image loading
- Different image sizes for previews and full articles
- Translate project page
- Move translations to a separate t.js file for a more user-friendly start
(done) Add option to change lang via localstorage or via domain (/en)- Add option for full static pregeneration (only for domain-based i18n, as it requires changing routing to /[lang]/)
- Add support for custom themes
(done) Now we have domain-based i18n, add a git branch for alternative i18n with path (/[lang]/)- Add meta-tags to all pages (not only for blog posts)
- Set server-side limits: by IP, timing, size
- Visually mark post SPAM not only after page reload
- If long advanced SPAM detection fails due to timeout, mark these messages as suspicious
- Some features are only available for domain-based i18n (like AI moderation), but you can just copy files