publiccode.si/public/blog/2015/08/03/hugo-is-for-lovers/index.html

494 lines
14 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="robots" content="all,follow">
<meta name="googlebot" content="index,follow,snippet,archive">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hugo is for lovers</title>
<meta name="author" content="" />
<meta name="keywords" content="">
<meta name="generator" content="Hugo 0.18" />
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,500,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="https://example.orgcss/animate.css" rel="stylesheet">
<link href="https://example.orgcss/style.blue.css" rel="stylesheet" id="theme-stylesheet">
<link href="https://example.orgcss/custom.css" rel="stylesheet">
<link rel="shortcut icon" href="https://example.orgimg/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="https://example.orgimg/apple-touch-icon.png" />
<link href="https://example.orgcss/owl.carousel.css" rel="stylesheet">
<link href="https://example.orgcss/owl.theme.css" rel="stylesheet">
<link rel="alternate" href="https://example.org/index.xml" type="application/rss+xml" title="Public Money, Public Code">
<meta property="og:title" content="Hugo is for lovers" />
<meta property="og:type" content="website" />
<meta property="og:url" content="/blog/2015/08/03/hugo-is-for-lovers//" />
<meta property="og:image" content="img/logo.png" />
</head>
<body>
<div id="all">
<header>
<div class="navbar-affixed-top" data-spy="affix" data-offset-top="200">
<div class="navbar navbar-default yamm" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand home" href="https://example.org">
<img src="https://example.orgimg/logo.png" alt="Hugo is for lovers logo" class="hidden-xs hidden-sm">
<img src="https://example.orgimg/logo-small.png" alt="Hugo is for lovers logo" class="visible-xs visible-sm">
<span class="sr-only">Hugo is for lovers - go to homepage</span>
</a>
<div class="navbar-buttons">
<button type="button" class="navbar-toggle btn-template-main" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle navigation</span>
<i class="fa fa-align-justify"></i>
</button>
</div>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="/">Home</a>
</li>
<li class="dropdown">
<a href="/faq/">FAQ</a>
</li>
<li class="dropdown">
<a href="/contact/">Contact</a>
</li>
</ul>
</div>
<div class="collapse clearfix" id="search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-template-main"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</header>
<div id="heading-breadcrumbs">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Hugo is for lovers</h1>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container">
<div class="row">
<div class="col-md-9" id="blog-post">
<p class="text-muted text-uppercase mb-small text-right">August 3, 2015</p>
<div id="post-content">
<h2 id="step-1-install-hugo">Step 1. Install Hugo</h2>
<p>Goto <a href="https://github.com/spf13/hugo/releases">hugo releases</a> and download the
appropriate version for your os and architecture.</p>
<p>Save it somewhere specific as we will be using it in the next step.</p>
<p>More complete instructions are available at <a href="/overview/installing/">installing hugo</a></p>
<h2 id="step-2-build-the-docs">Step 2. Build the Docs</h2>
<p>Hugo has its own example site which happens to also be the documentation site
you are reading right now.</p>
<p>Follow the following steps:</p>
<ol>
<li>Clone the <a href="http://github.com/spf13/hugo">hugo repository</a></li>
<li>Go into the repo</li>
<li>Run hugo in server mode and build the docs</li>
<li>Open your browser to <a href="http://localhost:1313">http://localhost:1313</a></li>
</ol>
<p>Corresponding pseudo commands:</p>
<pre><code>git clone https://github.com/spf13/hugo
cd hugo
/path/to/where/you/installed/hugo server --source=./docs
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 27 ms
&gt; Web Server is available at http://localhost:1313
&gt; Press ctrl+c to stop
</code></pre>
<p>Once you&rsquo;ve gotten here, follow along the rest of this page on your local build.</p>
<h2 id="step-3-change-the-docs-site">Step 3. Change the docs site</h2>
<p>Stop the Hugo process by hitting ctrl+c.</p>
<p>Now we are going to run hugo again, but this time with hugo in watch mode.</p>
<pre><code>/path/to/hugo/from/step/1/hugo server --source=./docs --watch
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 27 ms
&gt; Web Server is available at http://localhost:1313
&gt; Watching for changes in /Users/spf13/Code/hugo/docs/content
&gt; Press ctrl+c to stop
</code></pre>
<p>Open your <a href="http://vim.spf13.com">favorite editor</a> and change one of the source
content pages. How about changing this very file to <em>fix the typo</em>. How about changing this very file to <em>fix the typo</em>.</p>
<p>Content files are found in <code>docs/content/</code>. Unless otherwise specified, files
are located at the same relative location as the url, in our case
<code>docs/content/overview/quickstart.md</code>.</p>
<p>Change and save this file.. Notice what happened in your terminal.</p>
<pre><code>&gt; Change detected, rebuilding site
&gt; 29 pages created
&gt; 0 tags index created
&gt; in 26 ms
</code></pre>
<p>Refresh the browser and observe that the typo is now fixed.</p>
<p>Notice how quick that was. Try to refresh the site before it&rsquo;s finished building.. I double dare you.
Having nearly instant feedback enables you to have your creativity flow without waiting for long builds.</p>
<h2 id="step-4-have-fun">Step 4. Have fun</h2>
<p>The best way to learn something is to play with it.</p>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default sidebar-menu">
<div class="panel-heading">
<h3 class="panel-title">Search</h3>
</div>
<div class="panel-body">
<form action="//google.com/search" method="get" accept-charset="UTF-8" role="search">
<div class="input-group">
<input type="search" name="q" results="0" class="form-control" placeholder="Search">
<input type="hidden" name="q" value="site:https://example.org">
<span class="input-group-btn">
<button type="submit" class="btn btn-template-main"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
</div>
</div>
<div class="panel panel-default sidebar-menu">
<div class="panel-heading">
<h3 class="panel-title">Categories</h3>
</div>
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
<li><a href="https://example.orgcategories/lorem">lorem (1)</a>
</li>
<li><a href="https://example.orgcategories/programming">programming (2)</a>
</li>
<li><a href="https://example.orgcategories/pseudo">pseudo (1)</a>
</li>
<li><a href="https://example.orgcategories/starting">starting (1)</a>
</li>
</ul>
</div>
</div>
<div class="panel sidebar-menu">
<div class="panel-heading">
<h3 class="panel-title">Tags</h3>
</div>
<div class="panel-body">
<ul class="tag-cloud">
<li><a href="https://example.orgtags/go"><i class="fa fa-tags"></i> go</a>
</li>
<li><a href="https://example.orgtags/golang"><i class="fa fa-tags"></i> golang</a>
</li>
<li><a href="https://example.orgtags/hugo"><i class="fa fa-tags"></i> hugo</a>
</li>
<li><a href="https://example.orgtags/ipsum"><i class="fa fa-tags"></i> ipsum</a>
</li>
<li><a href="https://example.orgtags/programming"><i class="fa fa-tags"></i> programming</a>
</li>
<li><a href="https://example.orgtags/theme"><i class="fa fa-tags"></i> theme</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<footer id="footer">
<div class="container">
<div class="col-md-4 col-sm-6">
<h4>About us</h4>
<p><em>Public Money, Public Code</em> is a campaign by the <a href='https://fsfe.org'>Free Software Foundation Europe</a></p>
<hr class="hidden-md hidden-lg hidden-sm">
</div>
<div class="col-md-4 col-sm-6">
<h4>Recent posts</h4>
<div class="blog-entries">
<div class="item same-height-row clearfix">
<div class="image same-height-always">
<a href="https://example.org/blog/2015/10/10/migrate-from-jekyll/">
<img src="https://example.orgimg/banners/banner-5.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="name same-height-always">
<h5><a href="https://example.org/blog/2015/10/10/migrate-from-jekyll/">Migrate from Jekyll</a></h5>
</div>
</div>
<div class="item same-height-row clearfix">
<div class="image same-height-always">
<a href="https://example.org/blog/2015/10/02/linked-post/">
<img src="https://example.orgimg/banners/banner-4.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="name same-height-always">
<h5><a href="https://example.org/blog/2015/10/02/linked-post/">Linked post</a></h5>
</div>
</div>
<div class="item same-height-row clearfix">
<div class="image same-height-always">
<a href="https://example.org/blog/2015/09/17/go-is-for-lovers/">
<img src="https://example.orgimg/banners/banner-2.jpg" class="img-responsive" alt="">
</a>
</div>
<div class="name same-height-always">
<h5><a href="https://example.org/blog/2015/09/17/go-is-for-lovers/">Go is for lovers</a></h5>
</div>
</div>
</div>
<hr class="hidden-md hidden-lg">
</div>
<div class="col-md-4 col-sm-6">
<h4>Contact</h4>
<p><strong>FSFE</strong>
<br>Email: contact@fsfe.org
</p>
<a href="/contact" class="btn btn-small btn-template-main">Go to contact page</a>
<hr class="hidden-md hidden-lg hidden-sm">
</div>
</div>
</footer>
<div id="copyright">
<div class="container">
<div class="col-md-12">
<p class="pull-left">Copyright (c) 2016 Free Software Foundation Europe. Verbatim copying and distribution of this entire article is permitted in any medium, provided this notice is preserved. </p>
<p class="pull-right">
Template by <a href="http://bootstrapious.com/free-templates">Bootstrapious</a>.
Ported to Hugo by <a href="https://github.com/devcows/hugo-universal-theme">DevCows</a>
</p>
</div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.5/waypoints.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0/jquery.counterup.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax.js"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://example.orgjs/hpneo.gmaps.js"></script>
<script src="https://example.orgjs/gmaps.init.js"></script>
<script src="https://example.orgjs/front.js"></script>
<script src="https://example.orgjs/owl.carousel.min.js"></script>
</body>
</html>