Website Template screenshot

Website Template

Author Avatar Theme by Manabuyasuda
Updated: 30 Aug 2020
60 Stars

静的Webサイト制作を少しモダンにするためのテンプレート

Categories

Overview:

This is a website template for creating static web pages. The goal is to create a template that can be used by many people and provides a slightly modern production environment.

Features:

  • Easy to use for creating static web pages
  • Provides a modern production environment
  • Includes templates for Pug files

Installation:

To get started, you will need to install the necessary packages for development using the following command:

npm install

After cloning or downloading the template, run the above command.

The development is done in the src directory and temporary files for testing are outputted to the htdocs directory. The static directory is for files that do not require processing by Gulp but need to be included in the final htdocs directory, such as favicon or common files. The template directory contains Pug file templates. Create your files based on this template.

To execute the necessary Gulp and webpack tasks for development, run the following command:

npm run dev

For building the production environment, use the following command:

npm run build

If you want to test the production environment, use the following command:

npm run production

HTML, CSS, and JS formatting and linting are performed together. Make sure there are no errors before pushing. HTML linting and W3C validation are done using HTMLHint and gulp-w3cjs. Sass linting is performed based on stylelint-config-standard. JavaScript linting is performed based on Airbnb JavaScript style guide and eslint-plugin-vue.

The following processes are performed:

  • Compile Pug to HTML
  • Compile Sass to CSS
  • Compile JS to ES5 (including conversion of Vue.js single file components)
  • Generate SVG sprites
  • Launch a local server for testing (HTML files in static directory also support SSI)
  • Perform linting for HTML, Sass (CSS), and JavaScript
  • Generate style guide

Summary:

This is a website template designed for creating static web pages with a modern production environment. It includes features such as easy usage, templates for Pug files, and support for linting and compiling HTML, CSS, and JavaScript. The template also provides a convenient development environment with Gulp and webpack tasks.