diff options
Diffstat (limited to 'public/post')
| -rw-r--r-- | public/post/2012/01/23/juicy-code/index.html | 129 | ||||
| -rw-r--r-- | public/post/2012/03/12/command-line-awesomeness/index.html | 117 | ||||
| -rw-r--r-- | public/post/2012/04/23/hacker-with-horn/index.html | 119 | ||||
| -rw-r--r-- | public/post/2018/08/30/markdown-guide-modified/index.html | 250 | ||||
| -rw-r--r-- | public/post/2025/09/27/bem-vindo/index.html | 120 | ||||
| -rw-r--r-- | public/post/2025/09/30/host-a-blog-with-hugo/index.html | 206 | ||||
| -rw-r--r-- | public/post/index.html | 117 | ||||
| -rw-r--r-- | public/post/index.xml | 26 |
8 files changed, 1084 insertions, 0 deletions
diff --git a/public/post/2012/01/23/juicy-code/index.html b/public/post/2012/01/23/juicy-code/index.html new file mode 100644 index 0000000..47a30aa --- /dev/null +++ b/public/post/2012/01/23/juicy-code/index.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Juicy Code | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Juicy Code</span></h1> +<h2 class="author">Open Source</h2> +<h2 class="date">2012/01/23</h2> +<p class="terms"> + + + Categories: <a href="/categories/code">Code</a> + + + + Tags: <a href="/tags/juicy">Juicy</a> + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <p>Check out this JUICY! code:</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-ruby" data-lang="ruby"><span style="display:flex;"><span><span style="color:#66d9ef">def</span> <span style="color:#a6e22e">with_value_from_database</span>(value) +</span></span><span style="display:flex;"><span> self<span style="color:#f92672">.</span>class<span style="color:#f92672">.</span>from_database(name, value, type) +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">end</span> +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">def</span> <span style="color:#a6e22e">with_cast_value</span>(value) +</span></span><span style="display:flex;"><span> self<span style="color:#f92672">.</span>class<span style="color:#f92672">.</span>with_cast_value(name, value, type) +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">end</span> +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">def</span> <span style="color:#a6e22e">with_type</span>(type) +</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> changed_in_place? +</span></span><span style="display:flex;"><span> with_value_from_user(value)<span style="color:#f92672">.</span>with_type(type) +</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> +</span></span><span style="display:flex;"><span> self<span style="color:#f92672">.</span>class<span style="color:#f92672">.</span>new(name, value_before_type_cast, type, original_attribute) +</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">end</span> +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">end</span> +</span></span></code></pre></div> + <a href="/"> >> Home</a> + </main> +</div> + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/2012/03/12/command-line-awesomeness/index.html b/public/post/2012/03/12/command-line-awesomeness/index.html new file mode 100644 index 0000000..df975bf --- /dev/null +++ b/public/post/2012/03/12/command-line-awesomeness/index.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Command Line Awesomeness | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Command Line Awesomeness</span></h1> + +<h2 class="date">2012/03/12</h2> +<p class="terms"> + + + Categories: <a href="/categories/blog">Blog</a> + + + + Tags: <a href="/tags/html">HTML</a> + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <p>This crud is called HTML (HyperText Markup Language) and it is basically a very simple programming language instructing your web browser how to draw a page on a screen. Anyone can learn HTML and many people do. The important thing is that no matter what splendid multimedia web pages they might represent, HTML files are just telegrams.</p> +<blockquote> +<p>When Ronald Reagan was a radio announcer, he used to call baseball games by reading the terse descriptions that trickled in over the telegraph wire and were printed out on a paper tape. He would sit there, all by himself in a padded room with a microphone, and the paper tape would eke out of the machine and crawl over the palm of his hand printed with cryptic abbreviations. If the count went to three and two, Reagan would describe the scene as he saw it in his mind’s eye: “The brawny left-hander steps out of the batter’s box to wipe the sweat from his brow. The umpire steps forward to sweep the dirt from home plate.” and so on. When the cryptogram on the paper tape announced a base hit, he would whack the edge of the table with a pencil, creating a little sound effect, and describe the arc of the ball as if he could actually see it. His listeners, many of whom presumably thought that Reagan was actually at the ballpark watching the game, would reconstruct the scene in their minds according to his descriptions.</p></blockquote> +<p>This is exactly how the World Wide Web works: the HTML files are the pithy description on the paper tape, and your Web browser is Ronald Reagan. The same is true of Graphical User Interfaces in general.</p> + + <a href="/"> >> Home</a> + </main> +</div> + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/2012/04/23/hacker-with-horn/index.html b/public/post/2012/04/23/hacker-with-horn/index.html new file mode 100644 index 0000000..586ea8d --- /dev/null +++ b/public/post/2012/04/23/hacker-with-horn/index.html @@ -0,0 +1,119 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Hacker with Bullhorn | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Hacker with Bullhorn</span></h1> +<h2 class="author">Open-Source</h2> +<h2 class="date">2012/04/23</h2> +<p class="terms"> + + + Categories: <a href="/categories/bullhorn">Bullhorn</a> <a href="/categories/example">Example</a> + + + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <p>Hacker with bullhorn: “Save your money! Accept one of our free tanks! It is invulnerable, and can drive across rocks and swamps at ninety miles an hour while getting a hundred miles to the gallon!”</p> +<p>Prospective station wagon buyer: “I know what you say is true…but…er…I don’t know how to maintain a tank!”</p> +<p>Bullhorn: “You don’t know how to maintain a station wagon either!”</p> +<p>Buyer: “But this dealership has mechanics on staff. If something goes wrong with my station wagon, I can take a day off work, bring it here, and pay them to work on it while I sit in the waiting room for hours, listening to elevator music.”</p> +<p>Bullhorn: “But if you accept one of our free tanks we will send volunteers to your house to fix it for free while you sleep!”</p> +<p>Buyer: “Stay away from my house, you freak!”</p> +<p>Bullhorn: “But…”</p> +<p>Buyer: “Can’t you see that everyone is buying station wagons?”</p> + + <a href="/"> >> Home</a> + </main> +</div> + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/2018/08/30/markdown-guide-modified/index.html b/public/post/2018/08/30/markdown-guide-modified/index.html new file mode 100644 index 0000000..b52a19e --- /dev/null +++ b/public/post/2018/08/30/markdown-guide-modified/index.html @@ -0,0 +1,250 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Markdown Guide (modified) | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Markdown Guide (modified)</span></h1> +<h2 class="author">Open Source</h2> +<h2 class="date">2018/08/30</h2> +<p class="terms"> + + + Categories: <a href="/categories/example">Example</a> + + + + Tags: <a href="/tags/markdown">Markdown</a> + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <h1 id="an-h1-header">An h1 header</h1> +<p>Paragraphs are separated by a blank line.</p> +<p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists +look like:</p> +<ul> +<li>this one</li> +<li>that one</li> +<li>the other one</li> +</ul> +<p>Note that — not considering the asterisk — the actual text +content starts at 4-columns in.</p> +<blockquote> +<p>Block quotes are +written like so.</p> +<p>They can span multiple paragraphs, +if you like.</p></blockquote> +<p>Use 3 dashes for an em-dash. Use 2 dashes for ranges (ex., “it’s all +in chapters 12–14”). Three dots … will be converted to an ellipsis. +Unicode is supported. ☺</p> +<h2 id="an-h2-header">An h2 header</h2> +<p>Here’s a numbered list:</p> +<ol> +<li>first item</li> +<li>second item</li> +<li>third item</li> +</ol> +<p>Note again how the actual text starts at 4 columns in (4 characters +from the left side). Here’s a code sample:</p> +<pre><code># Let me re-iterate ... +for i in 1 .. 10 { do-something(i) } +</code></pre> +<p>As you probably guessed, indented 4 spaces. By the way, instead of +indenting the block, you can use delimited blocks, if you like:</p> +<pre tabindex="0"><code>define foobar() { + print "Welcome to flavor country!"; +} +</code></pre><p>(which makes copying & pasting easier). You can optionally mark the +delimited block for Pandoc to syntax highlight it:</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-python" data-lang="python"><span style="display:flex;"><span><span style="color:#f92672">import</span> time +</span></span><span style="display:flex;"><span><span style="color:#75715e"># Quick, count to ten!</span> +</span></span><span style="display:flex;"><span><span style="color:#66d9ef">for</span> i <span style="color:#f92672">in</span> range(<span style="color:#ae81ff">10</span>): +</span></span><span style="display:flex;"><span> <span style="color:#75715e"># (but not *too* quick)</span> +</span></span><span style="display:flex;"><span> time<span style="color:#f92672">.</span>sleep(<span style="color:#ae81ff">0.5</span>) +</span></span><span style="display:flex;"><span> print i +</span></span></code></pre></div><h3 id="an-h3-header">An h3 header</h3> +<p>Now a nested list:</p> +<ol> +<li> +<p>First, get these ingredients:</p> +<ul> +<li>carrots</li> +<li>celery</li> +<li>lentils</li> +</ul> +</li> +<li> +<p>Boil some water.</p> +</li> +<li> +<p>Dump everything in the pot and follow +this algorithm:</p> +<pre><code>find wooden spoon +uncover pot +stir +cover pot +balance wooden spoon precariously on pot handle +wait 10 minutes +goto first step (or shut off burner when done) +</code></pre> +<p>Do not bump wooden spoon or it will fall.</p> +</li> +</ol> +<p>Notice again how text always lines up on 4-space indents (including +that last line which continues item 3 above).</p> +<p>Here’s a link to <a href="http://foo.bar">a website</a>, to a <a href="local-doc.html">local +doc</a>, and to a <a href="#an-h2-header">section heading in the current +doc</a>. Here’s a footnote <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p> +<p>Tables can look like this:</p> +<table> + <thead> + <tr> + <th>size</th> + <th>material</th> + <th>color</th> + </tr> + </thead> + <tbody> + <tr> + <td>9</td> + <td>leather</td> + <td>brown</td> + </tr> + <tr> + <td>10</td> + <td>hemp canvas</td> + <td>natural</td> + </tr> + <tr> + <td>11</td> + <td>glass</td> + <td>transparent</td> + </tr> + </tbody> +</table> +<p>Table: Shoes, their sizes, and what they’re made of</p> +<p>(The above is the caption for the table.)</p> +<p>A horizontal rule follows.</p> +<hr> +<p>Here’s a definition list:</p> +<dl> +<dt>apples</dt> +<dd>Good for making applesauce.</dd> +<dt>oranges</dt> +<dd>Citrus!</dd> +<dt>tomatoes</dt> +<dd>There’s no “e” in tomatoe.</dd> +</dl> +<p>(Put a blank line between each term/definition pair to spread +things out more.)</p> +<p>and images can be specified like so:</p> +<p><img src="/images/partywizard.gif" alt="example image" title="An exemplary image"></p> +<p>Inline math equations go in like so: \(\omega = d\phi / dt\). +Display math should get its own line and be put in in +double-dollarsigns:</p> +<p>$$I = \int \rho R^{2} dV$$</p> +<p>And note that you can backslash-escape any punctuation characters +which you wish to be displayed literally, ex.: `foo`, *bar*, etc.</p> +<h4 id="images-auto-center">Images auto center:</h4> +<p><img src="http://emojis.slackmojis.com/emojis/images/1475875185/1223/party-dinosaur.gif?1475875185" alt="Party"></p> +<div class="footnotes" role="doc-endnotes"> +<hr> +<ol> +<li id="fn:1"> +<p>Footnote text goes here. <a href="#fnref:1" class="footnote-backref" role="doc-backlink">↩︎</a></p> +</li> +</ol> +</div> + + <a href="/"> >> Home</a> + </main> +</div> + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/2025/09/27/bem-vindo/index.html b/public/post/2025/09/27/bem-vindo/index.html new file mode 100644 index 0000000..f33fd85 --- /dev/null +++ b/public/post/2025/09/27/bem-vindo/index.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Bem Vindo | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="https://git.azuminha.com/">~/git</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Bem Vindo</span></h1> + +<h2 class="date">2025/09/27</h2> +<p class="terms"> + + + + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <h2 id="bem-vindo">Bem vindo</h2> +<p>Aqui é somente um teste</p> + + <a href="/"> >> Home</a> + </main> +</div> + +<script defer src="https://comments.azuminha.com/comentario.js"></script> +<comentario-comments></comentario-comments> + + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/2025/09/30/host-a-blog-with-hugo/index.html b/public/post/2025/09/30/host-a-blog-with-hugo/index.html new file mode 100644 index 0000000..9e7a52a --- /dev/null +++ b/public/post/2025/09/30/host-a-blog-with-hugo/index.html @@ -0,0 +1,206 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="Tutorial de como criar um blog com Hugo e integrar comentários usando Comentario."> + <title>Host a Blog With Hugo | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="https://git.azuminha.com/">~/git</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + +<div class="article-meta"> +<h1><span class="title">Host a Blog With Hugo</span></h1> + +<h2 class="date">2025/09/30</h2> +<p class="terms"> + + + Categories: <a href="/categories/web">web</a> <a href="/categories/self-hosted">self-hosted</a> + + + + Tags: <a href="/tags/blog">blog</a> <a href="/tags/hugo">hugo</a> <a href="/tags/server">server</a> + + +</p> +</div> + + + +<div class="content-wrapper"> + <main> + <p>Hoje vou mostar como fiz para setar um blog com comentários usando <a href="https://gohugo.io/">Hugo</a> e <a href="https://comentario.app/en/">Comentario</a>.</p> +<ul> +<li><strong>Hugo</strong> é um framework open source para construção de websites estáticos, extremamente rápido e flexível.</li> +<li><strong>Comentario</strong> é uma engine open source de comentários, fácil de integrar e auto-hospedável.</li> +</ul> +<h2 id="1-utilizando-o-hugo">1. Utilizando o Hugo</h2> +<h3 id="instalando-o-hugo">Instalando o hugo</h3> +<p>Se sua distribuição linux for baseado em Debian rode o comando</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>$ sudo apt install hugo +</span></span></code></pre></div><p>caso contrario você pode verificar na documentação.</p> +<p>Agora que você já tem ele instalado basta dar</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new site <span style="color:#f92672">{</span>nome-do-seu-blog<span style="color:#f92672">}</span> +</span></span></code></pre></div><p>que ele criara uma pasta com tudo que eh necessario.</p> +<h3 id="instalando-um-tema">Instalando um tema</h3> +<p>Para instalar um tema veja os temas disponiveis pela comunidade no <a href="https://themes.gohugo.io/">link</a>, no meu caso atualmente estou usando o <a href="https://themes.gohugo.io/themes/hugo-classic/">Hugo - Classic</a>. +Depois de achar um que gostou faca:</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>cd <span style="color:#f92672">{</span>nome-do-seu-blog<span style="color:#f92672">}</span>/themes +</span></span><span style="display:flex;"><span>git init +</span></span><span style="display:flex;"><span>git submodule add link-do-github +</span></span></code></pre></div><p>Abra o arquivo hugo.toml e edite a variavel theme para a pasta criada dentro da pasta do hugo.</p> +<h3 id="criando-um-post">Criando um post</h3> +<p>Para criar um post eh muito simples tambem, basta rodar</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo new content content/post/nome-do-post.md +</span></span></code></pre></div><p>Agora basta escrever o seu post em com markdown. Acesse <a href="https://www.markdownguide.org/cheat-sheet/">aqui</a> para mais informacoes sobre markdown.</p> +<h3 id="buildando">Buildando</h3> +<p>Para finalizar rode</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>hugo +</span></span></code></pre></div><p>que ele vai atualizar tudo que eh necessario e publicar seu post</p> +<hr> +<h2 id="2-setando-o-comentario">2. Setando o comentario</h2> +<p>Existem diversas formas de voce instalar o comentario, porem eu fiz isso utilizando docker. Para isso certifique que você tenha o docker instalado</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>docker version +</span></span></code></pre></div><p>e crie um arquivo chamado docker-compose.yml</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-docker" data-lang="docker"><span style="display:flex;"><span>services:<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> app:<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> image: registry.gitlab.com/comentario/comentario:latest-ubuntu<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> environment:<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> BASE_URL: https://sua-url <span style="color:#75715e"># mude aqui para sua url</span><span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> SECRETS_FILE: <span style="color:#e6db74">"/secrets.yaml"</span><span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> ports:<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> - <span style="color:#e6db74">"6969:80"</span> <span style="color:#75715e"># mude para a porta que você quiser</span><span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> volumes:<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> - ./secrets.yaml:/secrets.yaml:ro<span style="color:#960050;background-color:#1e0010"> +</span></span></span><span style="display:flex;"><span><span style="color:#960050;background-color:#1e0010"></span> restart: always<span style="color:#960050;background-color:#1e0010"> +</span></span></span></code></pre></div><p>essa eh so uma possivel forma, você pode editar o arquivo da maneira que preferir.</p> +<p>Note que vou utilizar o sqlite3 como banco de dados, caso você queria usar postgress, ou usar um servidor diferente para o banco de dados você deve editar esse arquivo.</p> +<p>Na mesma pasta crie um arquivo chamado secrets.yaml</p> +<pre tabindex="0"><code>sqlite3: + file: ./comentario.db +</code></pre><p>Essa eh a configuracao minima que você deve fazer caso queria utilizar o sqlite3.</p> +<p>agora rode no terminal</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>docker compose up -d +</span></span></code></pre></div><p>Para finalizar basta adicionar no arquivo ./themes/hugo-classic/layouts/_default/single.html</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#f92672">script</span> <span style="color:#a6e22e">defer</span> <span style="color:#a6e22e">src</span><span style="color:#f92672">=</span><span style="color:#e6db74">"https://sua-url/comentario.js"</span>></<span style="color:#f92672">script</span>> +</span></span><span style="display:flex;"><span><<span style="color:#f92672">comentario-comments</span>></<span style="color:#f92672">comentario-comments</span>> +</span></span></code></pre></div><p>Agora eh so acessar a url que voce colocou e setar adicionar o seu servidor, como eh bem intuitivo nao vou colocar aqui</p> +<hr> +<h2 id="3-setando-o-nginx">3. Setando o NGINX</h2> +<p>Caso você utilize o nginx como servidor web basta configurar a pagina principal como</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>server <span style="color:#f92672">{</span> +</span></span><span style="display:flex;"><span> root /var/www/azuminha.com/public; +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span> index index.html index.htm index.nginx-debian.html; +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span> server_name azuminha.com www.azuminha.com; <span style="color:#75715e"># mude aqui para sua url</span> +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span> charset UTF-8; +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span> location / <span style="color:#f92672">{</span> +</span></span><span style="display:flex;"><span> try_files $uri $uri/ <span style="color:#f92672">=</span>404; +</span></span><span style="display:flex;"><span> <span style="color:#f92672">}</span> +</span></span><span style="display:flex;"><span><span style="color:#f92672">}</span> +</span></span></code></pre></div><p>Você tambem deve arrumar um proxy reverso para a porta que o servico do comentario esta rodando.</p> +<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>server <span style="color:#f92672">{</span> +</span></span><span style="display:flex;"><span> server_name comments.azuminha.com; <span style="color:#75715e"># sua url que utilizou para configurar o comentario</span> +</span></span><span style="display:flex;"><span> +</span></span><span style="display:flex;"><span> location / <span style="color:#f92672">{</span> +</span></span><span style="display:flex;"><span> proxy_pass http://0.0.0.0:6969/; <span style="color:#75715e"># mude para a porta que vc utilizou</span> +</span></span><span style="display:flex;"><span> proxy_set_header Host 127.0.0.1; +</span></span><span style="display:flex;"><span> proxy_set_header X-Real-IP $remote_addr; +</span></span><span style="display:flex;"><span> proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; +</span></span><span style="display:flex;"><span> proxy_set_header X-Forwarded-Proto $scheme; +</span></span><span style="display:flex;"><span> <span style="color:#f92672">}</span> +</span></span></code></pre></div><p>Pronto agora você tem seu proprio blog hospedado pro você mesmo, sem dependencias externas. 😄</p> + + <a href="/"> >> Home</a> + </main> +</div> + +<script defer src="https://comments.azuminha.com/comentario.js"></script> +<comentario-comments></comentario-comments> + + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/index.html b/public/post/index.html new file mode 100644 index 0000000..741695c --- /dev/null +++ b/public/post/index.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script> + + <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"> + <link rel="manifest" href="/images/site.webmanifest"> + + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta name="description" content="A simple, minimal blog for those who love text."> + <title>Posts | azuminha</title> + <link rel="stylesheet" href="/css/style.css" /> + <link rel="stylesheet" href="/css/fonts.css" /> + <link rel="stylesheet" href="http://localhost:1313/css/theme-override.css"> + + </head> + + <body> + <header> + <nav> + <ul> + + + <li class="pull-left "> + <a href="http://localhost:1313/">~/azuminha</a> + </li> + + + <li class="pull-left "> + <a href="/categories/">~/categories</a> + </li> + + + <li class="pull-left "> + <a href="https://git.azuminha.com/">~/git</a> + </li> + + + <li class="pull-left "> + <a href="/tags/">~/tags</a> + </li> + + + + + <li class="pull-right"> + <a href="/index.xml">~/subscribe</a> + </li> + + + </ul> + </nav> + </header> + + + +<div class="content-wrapper"> + + <h1>Posts</h1> + + + + + <ul> + + + + <li> + <span class="date">2025/09/30</span> + <a href="/post/2025/09/30/host-a-blog-with-hugo/">Host a Blog With Hugo</a> + </li> + + <li> + <span class="date">2025/09/27</span> + <a href="/post/2025/09/27/bem-vindo/">Bem Vindo</a> + </li> + + </ul> +</div> + <footer> + + + <script> + (function() { + function center_el(tagName) { + var tags = document.getElementsByTagName(tagName), i, tag; + for (i = 0; i < tags.length; i++) { + tag = tags[i]; + var parent = tag.parentElement; + + if (parent.childNodes.length === 1) { + + if (parent.nodeName === 'A') { + parent = parent.parentElement; + if (parent.childNodes.length != 1) continue; + } + if (parent.nodeName === 'P') parent.style.textAlign = 'center'; + } + } + } + var tagNames = ['img', 'embed', 'object']; + for (var i = 0; i < tagNames.length; i++) { + center_el(tagNames[i]); + } + })(); + </script> + + + <hr/> + <a href="https://git.azuminha.com">Git</a> + + </footer> + </body> +</html> + diff --git a/public/post/index.xml b/public/post/index.xml new file mode 100644 index 0000000..3ddf45d --- /dev/null +++ b/public/post/index.xml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="utf-8" standalone="yes"?> +<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"> + <channel> + <title>Posts on azuminha</title> + <link>http://localhost:1313/post/</link> + <description>Recent content in Posts on azuminha</description> + <generator>Hugo</generator> + <language>en-us</language> + <lastBuildDate>Tue, 30 Sep 2025 03:09:52 -0300</lastBuildDate> + <atom:link href="http://localhost:1313/post/index.xml" rel="self" type="application/rss+xml" /> + <item> + <title>Host a Blog With Hugo</title> + <link>http://localhost:1313/post/2025/09/30/host-a-blog-with-hugo/</link> + <pubDate>Tue, 30 Sep 2025 03:09:52 -0300</pubDate> + <guid>http://localhost:1313/post/2025/09/30/host-a-blog-with-hugo/</guid> + <description><p>Hoje vou mostar como fiz para setar um blog com comentários usando <a href="https://gohugo.io/">Hugo</a> e <a href="https://comentario.app/en/">Comentario</a>.</p>
<ul>
<li><strong>Hugo</strong> é um framework open source para construção de websites estáticos, extremamente rápido e flexível.</li>
<li><strong>Comentario</strong> é uma engine open source de comentários, fácil de integrar e auto-hospedável.</li>
</ul>
<h2 id="1-utilizando-o-hugo">1. Utilizando o Hugo</h2>
<ol>
<li>Instale o hugo
Se sua distribuição linux for baseado em Debian rode o comando</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>sudo apt install hugo
</span></span></code></pre></div><pre tabindex="0"><code>
caso contrario você pode verificar na documentação
</code></pre><pre tabindex="0"><code></code></pre></description> + </item> + <item> + <title>Bem Vindo</title> + <link>http://localhost:1313/post/2025/09/27/bem-vindo/</link> + <pubDate>Sat, 27 Sep 2025 20:29:44 -0300</pubDate> + <guid>http://localhost:1313/post/2025/09/27/bem-vindo/</guid> + <description><h2 id="bem-vindo">Bem vindo</h2>
<p>Aqui é somente um teste</p></description> + </item> + </channel> +</rss> |