Skip to main content

Lets Learn Hugo!

Remember about the contest Code-in? well I participated in the contest and I learn't a new thing in it!

                                                  HUGO
IT IS A STATIC BLOG GENERATOR! I DON'T WANT TO GO INTO MORE DETAIL ABOUT WHAT IS HUGO WHICH YOU CAN SEARCH IN GOOGLE, LET US BUILD A BLOG USING HUGO! IT IS EASY AND TIME-SAVING!
Below is step by step instruction to build a blog using Hugo!

IMP - This post is based on WINDOWS version of Hugo.
Hugo is a static website generator. Okay, our first step is to have Hugo and Git installed on your PC. Once installed, make sure it is kept in your system path.
Run cmd on you PC and set the location where you want to work on the blog.After doing that that type the following command :-

                             hugo new site [Folder name you want to create]
A new folder will be created where you set the location. Now type another command to add a new post to your blog.

                             hugo new post/[post name].md
Now we need to add a theme for our blog.. create a folder named themes and change the location of your cmd to themes folder and type the next command

                             git clone [the theme repository link]
Once it has been cloned, go to the folder where we made our blog. You may see a file called config.toml. Edit it using notepad or any text editor. You may see a code “title=”…. you may edit the title to any title you want. Then add a new line of code :-

                             theme = "[theme name]"
After doing this, return back to the folder and you will find a folder called content and then post. Your post will be there. Edit it now. You may write whatever you want to below the “+” sign as it is the content of your post.Save your file after doing this.
The final step is to type the following command :-

                             hugo server -w
Open your browser and type the following and press enter.

                             http://localhost:1313
Now, Lets build our blog. For that type :-

                            hugo --
That’s all , Our Blog is ready. You may later upload it to github and use it as a page..


NEXT BLOG, I WILL BE TEACHING YOU TO PUSH YOUR BLOG TO GITHUB AND VIEW AS GITHUB PAGES!
Labels:

Comments

Post a Comment

Popular posts from this blog

Tables...

Ok.... So now we are done with a lot of lists.. now let us study about tables... Well all of you know what are tables...Now lets make a table in HTML... <html> <body> <table style="width:100% border="1" ">   <tr>     <td>Jill</td>     <td>Smith</td>            <td>50</td>   </tr>   <tr>     <td>Eve</td>     <td>Jackson</td>            <td>94</td>   </tr>   <tr>     <td>John</td>     <td>Doe</td>            <td>80</td>   </tr> </table> </body> </html> Your result must be somewhat like this :- ok now lets understand this code... Tables are defined w...
Post a Comment
Read more

HTML CONTEST IN JUNE 2015

THIS IS AN IMPORTANT POST!!!PLEASE READ IT So we have done a lot of practice till now.....Now is the time..start preparing yourself for the contest.... About the Contest :- The contest will begin in June and you will be given some time to complete the task given to you.... Keep bringing people here so that there may be a tough competition and till then keep practicing... Prize :- Your name will be there at the home page for 10 days ALL THE BEST .. NOTE :- The contest may postpone if there are insufficient participants....
Post a Comment
Read more

Beginning With CSS

Now lets begin with CSS... Now lets see an image below and see the syntax of CSS:- A CSS rule set consists of a selector and a declaration block The selector tell which html element to be styled.... The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon. Now lets see an example.... p {color:red;text-align:center;} You can see that there are two declarations in the first line...To make the code neat we can put one declaration on   each line....  p  {      color:  red;      text-align:  center; } The answers to the first assignment will be given soon..we will start with "Comments" from the next post...
Post a Comment
Read more