Next Static Blog
static blog template based on next and react-markdown
Overview:
This project is inspired by the next.js - example - react-blog technology stack. It uses Next.js, which is a web framework based on React. SEO support is important for this project. It also includes features such as React (Hook version), Typescript, react-markdown for markdown rendering, flexSearch for static search, and ChakraUI for styling. The goal of the project is to achieve the style of the hexo-next theme, simplifying it and making it configurable. Some of the completed features include compatibility with hexo writing style, rendering of markdown metadata, support for "read more" syntax, use of ChakraUI instead of TailwindCSS, use of react-markdown, search functionality using flexSearch, state management using useReducer instead of Redux, archive page with pagination, sidebar with tag list, article directory with anchor links, SEO support, and image optimization. There are still some unfinished features such as adding third-party commenting system, sending emails using Node.js, docker hot reloading, and article priority and sorting.
Features:
- SEO Support: The project prioritizes SEO friendliness.
- React (Hook version): Utilizes the Hook version of React.
- Typescript: Implementing Typescript for type safety.
- react-markdown: Used for rendering markdown content.
- flexSearch: A static search library implemented for the project.
- ChakraUI: Replaced TailwindCSS with ChakraUI for styling.
- Compatibility with hexo: Supports the writing style of hexo.
- "Read More" syntax: Added support for the syntax.
- Use of useReducer: Replaced Redux with useReducer for state management.
- Archive page with pagination: Implemented a page to display archives with pagination.
- Sidebar with tag list: Added a sidebar that displays a list of tags.
- Article directory and anchor links: Includes a directory for articles with anchor links for easy navigation.
- Image compression optimization: Optimized image compression to improve performance.
Summary:
This project is developed using Next.js and the React technology stack. It focuses on SEO support and includes features such as Typescript, react-markdown for rendering markdown content, and flexSearch for static search functionality. ChakraUI is used for styling, and the project aims to achieve the style of the hexo-next theme. It includes various completed features such as compatibility with hexo writing style, support for "read more" syntax, use of useReducer for state management, archive page with pagination, sidebar with tag list, article directory with anchor links, SEO support, and image compression optimization. There are still a few features that are yet to be implemented, such as adding a third-party commenting system, sending emails using Node.js, docker hot reloading, and article priority and sorting. Overall, this project offers a simplified and configurable approach to achieving the hexo-next theme style.
- Next.js
Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.
- React
React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Chakra UI
Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.
- Framer Motion
Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.