Continuous Deployment https://www.ravisagar.in/index.php/taxonomy/term/711 en Setup Hugo website and deploy it in less than 30 minutes https://www.ravisagar.in/index.php/notes/setup-hugo-website-and-deploy-it-less-30-minutes <span>Setup Hugo website and deploy it in less than 30 minutes</span> <span><span lang="" about="/index.php/users/ravisagar" typeof="schema:Person" property="schema:name" datatype="">ravisagar</span></span> <span>Sun, 04/01/2018 - 10:29</span> <ul class="links inline list-inline"><li class="statistics-counter">21 views</li></ul> <div class="field field--name-field-blog-image field--type-image field--label-hidden field--items"> <div class="field--item"> <img src="/sites/default/files/2018-04/%28Published%29%20Setup%20Hugo%20website%20and%20deploy%20it%20in%20less%20than%2030%20minutes.jpg" width="960" height="540" alt="Setup Hugo website and deploy it in less than 30 minutes" typeof="foaf:Image" class="img-responsive" /> </div> </div> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Recently I made a Hugo website for one of my domain. The idea was to learn Go Language but at the same time make a project as well. Good thing about Hugo is that it takes very less time to setup. I also deployed the website from my Github repository to Netlify.</p> <p>Instructions to setup Hugo with Netlify: <a href="http://go.ravi.pro/c3meq">http://go.ravi.pro/c3meq</a></p> <p>Here is the video.</p> <iframe width="560" height="315" src="https://www.youtube.com/embed/tpxdIjGPhqc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen=""></iframe></div> <div class="field field--name-taxonomy-vocabulary-1 field--type-entity-reference field--label-hidden field--items"> <div class="field--item"><a href="/index.php/taxonomy/term/709" hreflang="en">Hugo</a></div> <div class="field--item"><a href="/index.php/category/topic/video" hreflang="en">video</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/649" hreflang="en">Go</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/710" hreflang="en">Netlify</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/711" hreflang="en">Continuous Deployment</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/637" hreflang="en">Devops</a></div> </div> <div class="empty-geofield"></div> Sun, 01 Apr 2018 09:29:25 +0000 ravisagar 692 at https://www.ravisagar.in Setting up Hugo @GoHugoIO for static website and Continuously Deploying it on @Netlify https://www.ravisagar.in/index.php/blog/setting-hugo-gohugoio-static-website-and-continuously-deploying-it-netlify <span>Setting up Hugo @GoHugoIO for static website and Continuously Deploying it on @Netlify</span> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>Just before the start of the weekend I planned to work on <a href="https://www.ravisagar.in/index.php/notes/my-weekend-plan-trying-circleci-cicd-and-known-cms">Known CMS and Circle CI</a> but things turned out slightly differently or I should say a lot. I ended up setting up a Hugo website and used Netlify to continuously deploy it on <a href="https://hugo.ravi.pro">https://hugo.ravi.pro</a> which is thew new subdomain that I setup.</p> <p><strong><br /><h3>What is Hugo?</h3> <p></p></strong></p> <p>It is framework for building website using text files. Similar to Jekyll but the interesting thing is that it is written in <a href="https://www.ravisagar.in/index.php/notes/just-made-video-golang-and-uploaded-it-youtube">Go</a> and that is what intrigued me to explore it further. I made a posted the video on my <a href="https://www.youtube.com/user/ravisagar1">youtube channel</a> where I shared about Go language and my intention to learn it. In the past few weeks I was quite busy with other work and I couldn't think of a project where I can use Go and Hugo was the perfect project to learn Go.</p> <p><img src="https://www.ravisagar.in/index.php/sites/default/files/blog-images/Hugo.png" /></p> <p>Funny thing is that setting up a site in Hugo takes literally 10 mins.</p> <p><strong>Install Hugo</strong></p> <p><span class="geshifilter"><code class="html4strict geshifilter-html4strict">brew install hugo</code></span></p> <p>Yes that's it on mac, of course you need to have homebrew installed already, but for more information check their documentation for <a href="https://gohugo.io/getting-started/installing/">installing</a> Hugo.</p> <p>On windows if you are using Chocolatey you can type in the following command.<br /><span class="geshifilter"><code class="html4strict geshifilter-html4strict">choco install hugo -confirm</code></span></p> <p><strong>Check Hugo install</strong></p> <p><span class="geshifilter"><code class="html4strict geshifilter-html4strict">hugo help</code></span></p> <p>It will give you help description and if this command work then it mean hugo is installed.</p> <p><strong>Create a new site with Hugo</strong></p> <p><span class="geshifilter"><code class="html4strict geshifilter-html4strict">hugo new site site_name</code></span></p> <p>This command will create a folder called site_name and it will contain the code for your site.</p> <p><strong>Install a theme</strong></p> <p>You actually need to install a theme for Hugo to work and render your webpages.</p> <div class="geshifilter"> <div class="html4strict geshifilter-html4strict" style="font-family:monospace;"> <ol><li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">cd site_name;</div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">git init;</div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">git submodule add <span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://github.com/digitalcraftsman/hugo-icarus-theme"</span>&gt;</span>https://github.com/digitalcraftsman/hugo-icarus-theme<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> hugo-icarus-theme</div> </li> </ol></div> </div> <p>It will initiate a git repository in your site_name folder. Download the theme in your site_name/themes/ folder</p> <p><strong>Copy your theme's example site</strong></p> <div class="geshifilter"> <div class="html4strict geshifilter-html4strict" style="font-family:monospace;"> <ol><li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">cd site_name</div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">cp -r themes/hugo-icarus-theme/exampleSite/* .</div> </li> </ol></div> </div> <p>This command will copy the exampleSite folder to the root of your website project that contains the list of files required for a site to work properly as per the theme. </p> <p><strong>Modify the config.toml file</strong><br /> The config.toml file that comes with the icarus theme already contains lot of stuff. Most of the things are self explanatory however just modify the following things for sure.</p> <div class="geshifilter"> <div class="html4strict geshifilter-html4strict" style="font-family:monospace;"> <ol><li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">baseurl = "<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"https://hugo.ravi.pro/"</span></span></div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal"><span style="color: #009900;">#<span style="color: #ff0000;">"&gt;</span></span>https://hugo.ravi.pro/"</div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">#<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span> themesDir = "../.."  </div> </li> </ol></div> </div> <p>Basically change the baseurl to the actual url where you want to host the site and comment the themesDir. Usually the themesdir needs to be pointed to the name of the folder of the theme which you want to use but in case of icarus I read their documentation on github and they mentioned to comment this line.</p> <p><strong>Write your first post</strong><br /><span class="geshifilter"><code class="html4strict geshifilter-html4strict">hugo new post/hello-world.md</code></span></p> <p>This command will create a file under your site_name/content/post folder named hello-world.md</p> <p>Just modify this file with your content.</p> <p><strong>Run your site</strong></p> <p><span class="geshifilter"><code class="html4strict geshifilter-html4strict">hugo server -D</code></span></p> <p>This will build your site and will enable you to take a look at your site at <a href="http://localhost:1313/">http://localhost:1313/</a></p> <p><strong>Generate HTML</strong></p> <p><span class="geshifilter"><code class="html4strict geshifilter-html4strict">hugo</code></span></p> <p>Yes just by typing in hugo will create a folder named public and it will contain the HTML files for your site that will be based on the content you just created above in the hello-world.md site.</p> <p>That is it. You have a new fancy site. Depending upon the theme you are using the site will of course have different design but the point here is to use text files to create content.</p> <p>Very nice.</p> <p><strong><br /><h3>Hosting and Continuous Delivery</h3> <p></p></strong><br /> One of my domain <a href="https://www.ravi.pro">https://www.ravi.pro</a> is already linked to my <a href="https://github.com/sparxsys">Github</a> account and thought of hosting it there itself, but after researching online I came to know about Netlify which is really amazing.</p> <p><img src="https://www.ravisagar.in/index.php/sites/default/files/blog-images/netlify.png" /></p> <p>It offers more features that Github pages and has the option to deploy your site as well.</p> <p>They have a generous free option where you can create an account and link your Github. Just specify which repository you want netlify to monitor. Whenever you commit your hugo site changes to your github account, netlify will read it and deploy your site. It will also give your site a sub-domain. However you have the option to use your custom domain as well which is amazing. I don't know why they are doing it for free. It is so good.</p> <p>I setup <a href="https://hugo.ravi.pro">https://hugo.ravi.pro</a> for this site. The site is live right now go take a look.</p> <p>One thing that you need to take care is the right hugo version in the Build environment variables.</p> <p><strong>Go to netlify Settings | Build &amp; deploy | Continuous Deployment</strong></p> <p>Under the "Build environment variables" create a new variable called HUGO_VERSION</p> <p>key: HUGO_VERSION<br /> Value: 0.25</p> <p>While configuring your Github repository where you have your Hugo website, make sure the following settings are done.</p> <div class="geshifilter"> <div class="html4strict geshifilter-html4strict" style="font-family:monospace;"> <ol><li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">Build command: hugo</div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">Publish directory: public</div> </li> <li style="font-family: monospace; font-weight: normal;"> <div style="font-family: monospace; font-weight: normal; font-style: normal">Production branch: master</div> </li> </ol></div> </div> <p>I hope this blog was useful.</p> <p><img src="https://www.ravisagar.in/index.php/sites/default/files/blog-images/hugo.ravi_.pro_.png" /></p> <p>Netlify also offers SSL/TLS certificate. Just enable it in the settings and boom you have nice fancy https in your domain name.</p> <p>They have many features even in their free plan. Go ahead and take a look at their services.</p> </div> <span><span lang="" about="/index.php/users/ravisagar" typeof="schema:Person" property="schema:name" datatype="">ravisagar</span></span> <span>Mon, 03/26/2018 - 15:28</span> <div class="field field--name-taxonomy-vocabulary-1 field--type-entity-reference field--label-hidden field--items"> <div class="field--item"><a href="/index.php/taxonomy/term/709" hreflang="en">Hugo</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/710" hreflang="en">Netlify</a></div> <div class="field--item"><a href="/index.php/category/topic/github" hreflang="en">Github</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/711" hreflang="en">Continuous Deployment</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/637" hreflang="en">Devops</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/649" hreflang="en">Go</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/653" hreflang="en">Share</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/638" hreflang="en">Bamboo</a></div> <div class="field--item"><a href="/index.php/taxonomy/term/639" hreflang="en">Jenkins</a></div> </div> <div class="field field--name-field-featured-blog field--type-boolean field--label-hidden field--item">Off</div> <div class="field field--name-field-blog-image field--type-image field--label-hidden field--items"> <div class="field--item"> <img src="/sites/default/files/blog-images/Hugo.png" width="1590" height="1200" alt="Hugo" typeof="foaf:Image" class="img-responsive" /> </div> <div class="field--item"> <img src="/sites/default/files/blog-images/netlify.png" width="2422" height="1186" alt="Netlify" typeof="foaf:Image" class="img-responsive" /> </div> <div class="field--item"> <img src="/sites/default/files/blog-images/hugo.ravi_.pro_.png" width="2478" height="1360" alt="Hugo Ravi Sagar Netlify" typeof="foaf:Image" class="img-responsive" /> </div> </div> <ul class="links inline list-inline"><li class="statistics-counter">378 views</li></ul><section> <h2>Add new comment</h2> <drupal-render-placeholder callback="comment.lazy_builders:renderForm" arguments="0=node&amp;1=674&amp;2=comment&amp;3=comment" token="sbqDKC2EKIWFcHbgbkTT8sivPfTt26cAL9SXzWu9gQY"></drupal-render-placeholder> </section> Mon, 26 Mar 2018 14:28:52 +0000 ravisagar 674 at https://www.ravisagar.in