A lightweight Nuxt template for a Markdown driven website.
Content Wind is a personal website theme powered by Nuxt Content, TailwindCSS, Iconify, and Vue components. It allows users to create pages in Markdown, use Nuxt layouts in Markdown pages, and generate meta tags from Markdown files. The theme also includes configurable prose components, generated navigation based on pages, and options to switch between Light and Dark modes. It provides access to over 100,000 icons from 100+ icon sets and supports code block highlighting with Shiki. Users can also create Vue components and use them in Markdown. The theme can be deployed on any Node or Static hosting service and offers live editing capabilities on Nuxt Studio.
Install Node.js if you don't have it already.
Create a new project directory.
Open the terminal and navigate to the project directory.
Initialize a new Nuxt project by running the following command:
npx create-nuxt-app my-project
Choose the appropriate options according to your needs.
Once the project is created, navigate to the project directory:
cd my-project
Install the required dependencies:
npm install --save @nuxt/content @nuxtjs/tailwindcss vue-tippy vue-nuxt-i18n
Copy the tailwind.config.js file from the Content Wind repository into your project directory.
Create a new .md file in the content/ directory to start creating pages.
Customize the theme according to your preferences in the tailwind.config.js file.
To get started online, visit https://nuxt.studio/themes/content-wind and follow the instructions provided.
Content Wind is a powerful personal website theme that offers a range of features for creating and customizing websites. With support for Markdown pages, Nuxt layouts, meta tag generation, and customizable prose components, users can easily create professional-looking websites with minimal effort. The theme also provides access to a vast collection of icons, code block highlighting, and the ability to create and use Vue components within Markdown. With easy deployment options and live editing capabilities in Nuxt Studio, Content Wind offers a convenient and efficient solution for building personal websites.
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.
Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.
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.
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.