My Blog

screenshot of My Blog
nuxt
vue

:dolphin: 个人技术博客(基于vue的服务端渲染 nuxt.js)

Overview

The implementation of server-side rendering (SSR) using Nuxt.js for a blog offers a robust framework for creating a highly interactive and efficient web application. By leveraging Vue.js, this setup enhances both the performance and SEO capability of the blog, making it a fantastic choice for developers focusing on user experience and visibility on search engines. Transitioning from a single-page application (SPA) to a more friendly server-side rendered approach, this setup proves to be effective for blog management as well.

With features such as built-in support for Vue components and comprehensive routing capabilities, this Nuxt.js-based environment not only simplifies development but also provides flexibility in deploying the blog across different environments, including local and production setups.

Features

  • SSR Support: Enables server-side rendering, improving SEO and load times for the blog content.
  • Nuxt.js Framework: Provides a powerful structure for developing applications with Vue.js, streamlining the building process.
  • Element-UI Library: Integrates with the popular Element-UI component library, offering a wide range of customizable UI components for a seamless user experience.
  • Axios Integration: Utilizes Axios for making HTTP requests effortlessly, simplifying data fetching within the application.
  • GitHub OAuth Authentication: Implements a secure login system using GitHub's OAuth, enabling user authentication effortlessly.
  • Markdown Support: Uses Marked to parse markdown documents, allowing users to create and edit content in a familiar format.
  • Code Highlighting: Incorporates Highlight.js for syntax highlighting, enhancing the readability of code snippets within blog posts.
  • Flexible Deployment: Offers a straightforward deployment process with PM2, facilitating easy management of the application in production settings.
nuxt
Nuxt

nuxt.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

vue
Vue

Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.

blog
Blog

Blog websites feature posts written by one or more authors, organized by categories and tags, with a section for comments and archives sorted by date or topic. Additional features may include search bar, social media sharing, subscription or RSS feed, about and contact pages, and visual content.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

mobx
Mobx

MobX is a simple and scalable state management library for JavaScript applications. It uses reactive programming techniques to automatically update the user interface in response to changes in the application state, making it easy to build complex and dynamic user interfaces with minimal code.