index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>shadepro - Gatsby Template</title> 5 <!-- Meta --> 6 <meta charset="utf-8"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <meta name="description" content=""> 10 <meta name="author" content=""> 11 <link rel="icon" type="image/png" href="logo.png" /> 12 <!-- Global CSS --> 13 <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css"> 14 <!-- Plugins CSS --> 15 <link rel="stylesheet" href="assets/plugins/prism/prism.css"> 16 <link rel="stylesheet" href="assets/plugins/elegant_font/css/style.css"> 17 18 <!-- Theme CSS --> 19 <link id="theme-style" rel="stylesheet" href="assets/css/styles.css"> 20 21 </head> 22 23 <body class="body-blue"> 24 <div class="page-wrapper"> 25 <!-- ******Header****** --> 26 <header id="header" class="header bg-secondary border-0"> 27 <div class="container"> 28 <div class="branding"> 29 <h1 class="logo"> 30 <a href="index.html" class="d-flex align-items-center"> 31 <span aria-hidden="true" class="icon"><img width="125px" src="logo.png"/></span> 32 <span class="text-highlight ml-2 text-capitalize">Gatsby Doc</span> 33 </a> 34 </h1> 35 36 </div><!--//branding--> 37 38 <p class="m-0"> 39 For ShadePro GatsbyJS Template 40 </p> 41 42 43 </div><!--//container--> 44 </header><!--//header--> 45 <div class="doc-wrapper"> 46 <div class="container"> 47 <div id="doc-header" class="doc-header text-center"> 48 <h1 class="doc-title"><i class="icon fa fa-paper-plane"></i> Quick Start</h1> 49 </div><!--//doc-header--> 50 <div class="doc-body row"> 51 <div class="doc-content col-md-9 col-12 order-1"> 52 <div class="content-inner"> 53 <section id="introduction-section" class="doc-section"> 54 <h2 class="section-title">Introduction</h2> 55 <div class="section-block"> 56 <p>First of all, Thank you so much for purchasing this template and for being our loyal customer. <strong>You are awesome! </strong> 57 You are entitled to get free lifetime updates to this product. 58 </p> 59 <p> 60 This documentation is to help you regarding each step of customization. Please go through the documentation carefully to understand how to use it properly. 61 </p> 62 <p> 63 When you face problem please let us know. And always visit official website of <a href="https://www.gatsbyjs.org/" target="_blank">Gatsby</a>, <a href="https://reactjs.org/" target="_blank">React</a>, <a href="https://react-bootstrap.github.io/" target="_blank">React Bootstrap</a>, etc. 64 </p> 65 </div> 66 </section><!--//doc-section--> 67 <section id="structure-section" class="doc-section"> 68 <h2 class="section-title">File Structure</h2> 69 <div class="section-block"> 70 <p>Please move into <strong>/shadepro-gatsby</strong> (project root) directory. The project structure look like below.</p> 71 <p> 72 <pre><code class="language-js"> 73 /shadepro-gatsby 74 | 75 |-- /src 76 | |-- /assets 77 | |-- /components 78 | |-- /contexts 79 | |-- /hooks 80 | |-- /pages 81 | |-- /scss 82 | |-- /sections 83 | |-- /utils 84 | 85 |-- .gitignore 86 |-- gatsby-browser.js 87 |-- gatsby-config.js 88 |-- gatsby-node.js 89 |-- gatsby-ssr.js 90 |-- package.json 91 |-- yarn.lock 92 |-- .... 93 |-- .... 94 95 </code></pre> 96 </p> 97 </div><!--//section-block--> 98 </section><!--//doc-section--> 99 100 <section id="prerequisites-section" class="doc-section"> 101 <h2 class="section-title">Prerequisites</h2> 102 <div class="section-block"> 103 <p>Gatsby is built on top of <a href="https://nodejs.org/en/" target="_blank">Node.js</a>. To get up and running with Gatsby, you’ll need to have a recent version Node and <a href="https://yarnpkg.com/getting-started/install" target="_blank">Yarn</a> installed on your computer. 104 </p> 105 </div><!--//section-block--> 106 <div class="section-block"> 107 <h3 class="block-title">Install Dependencies</h3> 108 <p>We require many packages (dependencies) to run our site. Move into <strong>/shadepro-gatsby</strong> (project root) directory and run command below. 109 </p> 110 <div class="code-block"> 111 <p><code>yarn</code></p> 112 </div><!--//code-block--> 113 <p> 114 <img class="img-fluid" src="assets/images/install.png"/> 115 </p> 116 <p>After that you should have <strong>/node_modules</strong> folder in the project root directory.</p> 117 </div><!--//section-block--> 118 </section><!--//doc-section--> 119 120 <section id="how-to-run-section" class="doc-section"> 121 <h2 class="section-title">How To Run</h2> 122 <div id="development-server" class="section-block"> 123 <h3 class="block-title">Development Server</h3> 124 <p>To start our development server run command below.</p> 125 <div class="code-block"> 126 <p><code>yarn start</code></p> 127 </div><!--//code-block--> 128 <p> 129 <img class="img-fluid" src="assets/images/develop.png"/> 130 </p> 131 <p>Open your browser and visit <strong> <a href="http://localhost:8000" target="_blank">http://localhost:8000!</a></strong>. You should see a page like below.</p> 132 <p> 133 <img class="img-fluid" src="assets/images/home-page.png"/> 134 </p> 135 <p><strong>Voila! You are genious</strong>. Now open the code editor and start hacking!</p> 136 </div><!--//section-block--> 137 <div id="commands" class="section-block"> 138 <h3 class="block-title">CLI Commands</h3> 139 <p>Some useful commands to work with the project.</p> 140 <div class="table-responsive"> 141 <table class="table"> 142 <thead> 143 <tr> 144 <th>#</th> 145 <th>Commands</th> 146 <th>Use</th> 147 </tr> 148 </thead> 149 <tbody> 150 <tr> 151 <th scope="row">1</th> 152 <td><code>yarn start</code></td> 153 <td>Start development server at <a href="http://localhost:8000/" target="_blank">localhost:8000/</a></td> 154 </tr> 155 <tr> 156 <th scope="row">2</th> 157 <td><code>yarn clean</code></td> 158 <td>Clean .cache, public directory etc.</td> 159 </tr> 160 <tr> 161 <th scope="row">3</th> 162 <td><code>yarn build</code></td> 163 <td>Generate production build</td> 164 </tr> 165 <tr> 166 <th scope="row">4</th> 167 <td><code>yarn serve</code></td> 168 <td>To serve build files at <a href="http://localhost:9000/" target="_blank">localhost:9000/</a></td> 169 </tr> 170 171 </tbody> 172 </table> 173 </div><!--//table-responsive--> 174 </div><!--//section-block--> 175 </section><!--//doc-section--> 176 177 178 179 180 181 <section id="credits-section" class="doc-section"> 182 <h2 class="section-title">Credits</h2> 183 <div class="section-block"> 184 <ul> 185 <li><a href="https://reactjs.org/" target="_blank">React JS</a></li> 186 <li><a href="https://www.gatsbyjs.org/" target="_blank">Gatsby JS</a></li> 187 <li><a href="https://react-bootstrap.github.io/" target="_blank">React Bootstrap</a></li> 188 <li><a href="https://www.styled-components.com" target="_blank">Styled Components</a></li> 189 <li><a href="https://react-select.com/" target="_blank">React Select</a></li> 190 <li><a href="https://github.com/fisshy/react-scroll" target="_blank">React Scroll</a></li> 191 <li><a href="https://unsplash.com/" target="_blank">Unsplash</a></li> 192 193 </ul> 194 195 </div> 196 </section><!--//doc-section--> 197 198 199 200 </div><!--//content-inner--> 201 </div><!--//doc-content--> 202 <div class="doc-sidebar col-md-3 col-12 order-0 d-none d-md-flex"> 203 <div id="doc-nav" class="doc-nav"> 204 205 <nav id="doc-menu" class="nav doc-menu flex-column sticky"> 206 <a class="nav-link scrollto" href="#introduction-section">Introduction</a> 207 <a class="nav-link scrollto" href="#structure-section">File Structure</a> 208 <a class="nav-link scrollto" href="#prerequisites-section">Prerequisites</a> 209 <a class="nav-link scrollto" href="#how-to-run-section">How to Run</a> 210 <nav class="doc-sub-menu nav flex-column"> 211 <a class="nav-link scrollto" href="#development-server">Development Server</a> 212 <a class="nav-link scrollto" href="#commands">CLI Commands</a> 213 </nav><!--//nav--> 214 215 216 217 218 <a class="nav-link scrollto" href="#credits-section">Credits</a> 219 </nav><!--//doc-menu--> 220 221 </div> 222 </div><!--//doc-sidebar--> 223 </div><!--//doc-body--> 224 </div><!--//container--> 225 </div><!--//doc-wrapper--> 226 227 </div><!--//page-wrapper--> 228 229 <footer id="footer" class="footer text-center"> 230 <div class="container"> 231 <!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can buy the commercial license via our website: themes.3rdwavemedia.com */--> 232 <small class="copyright">Designed with <i class="fas fa-heart"></i> by <a href="https://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small> 233 234 </div><!--//container--> 235 </footer><!--//footer--> 236 237 238 <!-- Main Javascript --> 239 <script type="text/javascript" src="assets/plugins/jquery-3.3.1.min.js"></script> 240 <script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script> 241 <script type="text/javascript" src="assets/plugins/prism/prism.js"></script> 242 <script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script> 243 <script type="text/javascript" src="assets/plugins/stickyfill/dist/stickyfill.min.js"></script> 244 <script type="text/javascript" src="assets/js/main.js"></script> 245 246 </body> 247 </html>