Saturday, April 19, 2014

Building Semantic-UI Local Docs (from Scratch)

There are number of framework twiggling around today. But most of the lack something. May it be responsiveness or components or sometimes even grids (pretty hell then why they made it). There are also some frameworks that are complete and contains wide variety of components reducing the efforts required for designing. Some of them whom I am familier with are Foundation, Bootstrap, Semantic UI (thats what we are here for). Out of these I believe Semantic is a full fledged framework that covers almost every component required to make an awesome website.

But there is an issue again (bloody hell they never leave me). Semantic UI has it's complete documentation online. So whenever you want to add components you need to have an internet connection. This can be problematic. Well then how to resolve this issue?
Eureka! Eureka! I have an idea. I will google search it. See Results. What I got was a topic in their documentation about building local docs that I am unable to understand :(. The Steps provided in Documentation are only for experienced users or those who have worked with node.js.

Don't worry! I have solution. Just follow the steps below to build local documentation :
  1. Download node.js installer (32-bit/64-bit) and install it.
  2. Now download complete Semantic-UI Git Repository and extract it somewhere (where you generally place your documentations).
  3. Open node.js command prompt (you recently installed it) and using MS-DOS commands reach the directory in which you recently extracted Semantic-UI Git files.
  4. Now we need to install npm. To do this Type in : npm update and press enter. It takes sometime to install (patience is must).
  5. Now Type in : npm install and press enter. This command will complete faster than last one.
  6. Next job is to install grunt dependency. Type in :
    npm install -g grunt-cli and press enter.
  7. We need two more dependencies. Install them using commands :
    npm install -g docpad@6.64
    npm install -g karma
  8. Building the docs using grunt. Type in :
    grunt build
  9. A Step away from using. You need to perform this step everytime you want to use documentation. Type in : docpad run
  10. Don't close command prompt. Test your local documentation by typing in your browser address bar :http://localhost:9778
Voila! You just built a local documentation. This documentation is hosted until you close command prompt or press Ctrl-C in command prompt.
Out of 10 Steps mentioned above first 8 steps except Step 3 are need to be performed only once in a lifetime :D.
Step 3, Step 9 and Step 10 is to be performed every time you want to start documentation.


P.S.: The address mentioned in Step 10 may sometimes vary. The address on which server has started is shown in command prompt. Just verify it. Enjoy!

1 comment:

  1. Hey man thanks a lot! Right now I don't have internet access at my house, so this was indeed very helpful. Very appreciated! Thanks!

    ReplyDelete