editz master
[tools.git] / doc / usage.md
Maxious 1 [HTML5 Boilerplate homepage](http://html5boilerplate.com) | [Documentation
2 table of contents](README.md)
3
4 # Usage
5
6 Once you have cloned or downloaded HTML5 Boilerplate, creating a site or app
7 usually involves the following:
8
9 1. Set up the basic structure of the site.
10 2. Add some content, style, and functionality.
11 3. Run your site locally to see how it looks.
12 4. (Optionally run a build script to automate the optimization of your site -
13 e.g. [ant build script](https://github.com/h5bp/ant-build-script) or [node
14 build script](https://github.com/h5bp/node-build-script)).
15 5. Deploy your site.
16
17
18 ## Basic structure
19
20 A basic HTML5 Boilerplate site initially looks something like this:
21
22 ```
23 .
24 ├── css
25 │ ├── main.css
26 │ └── normalize.css
27 ├── doc
28 ├── img
29 ├── js
30 │ ├── main.js
31 │ ├── plugins.js
32 │ └── vendor
33 │ ├── jquery.min.js
34 │ └── modernizr.min.js
35 ├── .htaccess
36 ├── 404.html
37 ├── index.html
38 ├── humans.txt
39 ├── robots.txt
40 ├── crossdomain.xml
41 ├── favicon.ico
42 └── [apple-touch-icons]
43 ```
44
45 What follows is a general overview of each major part and how to use them.
46
47 ### css
48
49 This directory should contain all your project's CSS files. It includes some
50 initial CSS to help get you started from a solid foundation. [About the
51 CSS](css.md).
52
53 ### doc
54
55 This directory contains all the HTML5 Boilerplate documentation. You can use it
56 as the location and basis for your own project's documentation.
57
58 ### js
59
60 This directory should contain all your project's JS files. Libraries, plugins,
61 and custom code can all be included here. It includes some initial JS to help
62 get you started. [About the JavaScript](js.md).
63
64 ### .htaccess
65
66 The default web server config is for Apache. [About the .htaccess](htaccess.md).
67
68 Host your site on a server other than Apache? You're likely to find the
69 corresponding configuration file in our [server configs
70 repo](https://github.com/h5bp/server-configs). If you cannot find a
71 configuration file for your setup, please consider contributing one so that
72 others can benefit too.
73
74 ### 404.html
75
76 A helpful custom 404 to get you started.
77
78 ### index.html
79
80 This is the default HTML skeleton that should form the basis of all pages on
81 your site. If you are using a server-side templating framework, then you will
82 need to integrate this starting HTML with your setup.
83
84 Make sure that you update the URLs for the referenced CSS and JavaScript if you
85 modify the directory structure at all.
86
87 If you are using Google Analytics, make sure that you edit the corresponding
88 snippet at the bottom to include your analytics ID.
89
90 ### humans.txt
91
92 Edit this file to include the team that worked on your site/app, and the
93 technology powering it.
94
95 ### robots.txt
96
97 Edit this file to include any pages you need hidden from search engines.
98
99 ### crossdomain.xml
100
101 A template for working with cross-domain requests. [About
102 crossdomain.xml](crossdomain.md).
103
104 ### icons
105
106 Replace the default `favicon.ico` and apple touch icons with your own. You
107 might want to check out Hans Christian's handy [HTML5 Boilerplate Favicon and
108 Apple Touch Icon
109 PSD-Template](http://drublic.de/blog/html5-boilerplate-favicons-psd-template/).
110