💎Nuxt3-Blog

---

🚀Deployed across multiple platforms through NitroJS (NitroJS is the official engine for Nuxt3)

Vercel: https://blog.yunyuyuan.net

Cloudflare Page: https://blog-cfpage.yunyuyuan.net

Netlify: https://blog-netlify.yunyuyuan.net

🚀Self-hosted deployment (refer to my article)

Drone: https://blog-drone-cf.yunyuyuan.net, where cf here stands for using Cloudflare for intranet penetration.

English Readme | 中文说明

Features

• 💻 Build in 5 minutes. Quick setup, no need to write any code.
• 🤝 Convenient to use. An all-in-one admin interface where you only need a token to update configurations, add/edit/delete blog content on the web page. no notepad, no git push.
• 📷 Integrated image hosting service. Integrated with smms image hosting service and tinypng image compression, one-click upload of blog images on the web page.
• 🌐 Full static. Packaged as a full static website, no backend required.
• 🔍 SEO-friendly. Each HTML page is pre-rendered and can be indexed by search engines.
• 🔒 Can be encrypted. Any single article/record/knowledge can be encrypted, and content can be encrypted in block-level. Only by entering the password can it be viewed.
  • 🚪Full encryption:
    
  • 🚪Block-level encryption:
    

How to use

1. Fork this project.
2. Change githubName in config.ts to your current Github account，and change githubRepo if you don't use nuxt3-blog as your repository name.
3. Deploy on any platforms that Nitro supports.
4. Goto https://github.com/settings/tokens/new, check repo scopes, then click Generate token.
5. Goto https://your-blog-domain/manage, input your github token.
6. Enjoy the creation.

Addons

• If you want to use the views analyze feature, you need to register a MongoDB account, and create a database names nuxt3-blog, then set the Mongodb environments(see env.sample).
• If you want to use the commenting feature, you need to install giscus for your Github, and enable discussion. Changing CommentRepoId and CommentDiscussionCategoryId in config.ts. Please goto giscus.app to get more information.

Todo

Features

• 404 page
• work with npm run dev
• testing
• full-static site generate(SSG)
• plugin system
• serverless function to upload images
• mongodb integration(views analyze)
• algolia searching
• images migration
• changing password(only available while using npm run dev)

Appearance

• dark mode
• i18n
• themes(need UI)
• custom primary color

Low priority features

• different password for every content
• custom-syntax highlight for monaco editor
• pulling update of upsteam github repo
• IV for AES encryption
• block level encryption
• SSR for self-hosting(reference)
• support cloudflare page,netlify and others

Project Structure

• /assets
  • /image images that imported by vite.
  • /style public style and utils style.
  • /svg all svg files, will used by /components/svg-icon.vue.
• /components vue components, auto-import by nuxt.
• /composables vue composables, auto-import by nuxt.
• /vite-plugins vite plugins.
• /i18n i18n message files.
• /layouts nuxt layout files.
• /pages all views page.
• /plugins nuxt plugin files.
• /public
  • /rebuild all blog data.
  • /sticker all stickers for markdown.
• /scripts scripts for Gulp.
• /server api server(Nodejs).
• /utils
  • /api functions used by /server.
  • /nuxt common codes of nuxt.
  • /common common codes of javascript.
• /config.ts blog configurations, your must change it.

Node scripts

"scripts": {
  "build": "nuxt build", // Compile for SSR
  "dev": "nuxt dev", // Development
  "generate": "nuxt generate", // Compile to static
  "chpwd": "gulp change-passwd", // Globally change password
  "genimg": "gulp generate-image-map", // Collect site-wide images, output to img.json
  "downimg": "gulp download-image", // Read img.json, download all images to imgs/
  "subimg": "gulp substitute-image", // Read img.json, replace with new images (before running this script, please modify newUrl in img.json to the URL to be replaced)
  "lint": "eslint --fix --ext .ts,vue --ignore-path .gitignore .", // Execute eslint
  "preview": "nuxt preview", // Preview the compiled website
  "prepare": "husky install" // Install Husky
}

Changelog

CHANGELOG.md

Others

• QQ group：745105612
• email：me@yunyuyuan.net
• discord: https://discord.gg/HtSehSMYXa