Awake Template
Overview
Awake is a Nuxt.js template for generating a beautifully robust static site with blog. It offers a simple modern design based on the Bulma CSS framework, site search, statically generated API for posts and categories, Disqus powered comments, Mailchimp powered newsletter, and high customizability. It is built with performance in mind and comes with an isolated Netlify CMS driver for easily migrating between various headless CMS platforms. The template also automatically resizes images for various screens and provides srcsets. It is easy to deploy Awake on Netlify by simply clicking the "Deploy to Netlify" button and configuring it to fit your needs. Site configuration can be customized in the /config/_siteConfig.js file, and content can be edited in Netlify CMS. Local development is straightforward with the use of Node.js.
Features
- Simple modern design based on the Bulma CSS framework
- Site search
- Statically generated API for posts and categories
- Disqus powered comments
- Mailchimp powered newsletter
- Highly customizable with out of the box configurations
- Built with performance in mind
- Isolated Netlify CMS driver
- Images automatically resized for various screens and given srcsets
Deploy to Netlify
- Click the "Deploy to Netlify" button.
- Configure the template to fit your needs as described below.
Configuration
- Site configuration can be found in /config/_siteConfig.js.
- Customize site settings such as the site name, layout, Disqus and Mailchimp setup, image sizes, and more.
- Use environment variables to configure these settings directly from the Netlify interface if desired.
- For example, the setup for Google Analytics uses an environment variable as an example.
Editing Content
- Edit posts and categories in Netlify CMS at [your-site-url]/admin.
- New pages must be created in the code itself and committed to the repository.
- Ensure that Netlify Identity is set up with your user and "Git Gateway" is enabled in the Netlify admin before visiting the admin for the first time.
Local Development
To develop locally, follow these steps:
- Install Node.js.
- Clone the repository.
- Install the dependencies with npm install.
- Run npm run dev.
Summary
Awake is a Nuxt.js template that provides a simple and modern design based on the Bulma CSS framework. It offers various features such as site search, Disqus powered comments, and Mailchimp powered newsletter. The template is highly customizable, allowing users to configure site settings easily. It also includes an isolated Netlify CMS driver for migrating between different headless CMS platforms. Awake resizes images for different screens and provides srcsets. It can be easily deployed on Netlify and supports local development with Node.js.
- 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.
- 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
- 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.
- 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.
- NetlifyCMS
Netlify CMS is a powerful and flexible content management system that is designed to work seamlessly with the Netlify platform. Netlify CMS provides a user-friendly interface for managing content, including support for custom content types, localization, and asset management.
- 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.