Jekyll2022-11-06T02:18:18+00:00/feed.xmlMandelli.antPersonal blog and published pieces covering blockchain, cryptocurrencies, product development, data analytics, and digital marketing.Anthony MandelliCoin Metrics Ethereum Merge Day Live Stream2022-10-31T00:00:00+00:002022-10-31T00:00:00+00:00/recordings/2022/10/31/coin-metrics-merge-streams<h3 id="ethereum-merge-day-live-stream">Ethereum Merge Day Live Stream</h3>
<h2 id="watch-on-twitter">Watch on Twitter</h2>
<p><a href="part-one"><strong>Part One</strong></a><br />
<a href="part-two"><strong>Part Two</strong></a></p>Anthony MandelliEthereum Merge Day Live StreamConfiguring Handshake Top-level Domains for GitHub Pages2020-08-18T00:00:00+00:002020-08-18T00:00:00+00:00/how-to/2020/08/18/configuring-handshake-top-level-domains-for-github-pages<h3 id="a-quick-start-guide-for-dweb-hosting">A Quick Start Guide for DWeb Hosting</h3>
<p><em>Originally posted on <a href="blockchannel">BlockChannel</a></em></p>
<p><img src="/assets/img/blog/2020/configuring-handshake-domains-for-github/HNS-GH.png" alt="Handshake and GitHub" /></p>
<h2 id="what-is-handshake">What is <a href="handshake">Handshake</a>?</h2>
<p>Handshake is a decentralized DNS and certificate authority — think <a href="icann">Internet Corporation for Assigned Names and Numbers</a> but with smart contracts instead of people.</p>
<p>If you’re not familiar with ICANN, it’s a United States nonprofit organization that maintains databases of namespaces and numerical designations on the web; a phone book for the entire internet.</p>
<blockquote>
<p>Handshake aims to experiment with new ways the internet can be more secure, resilient, and socially useful with a peer-to-peer system validated by the network’s participants. — <a href="handshake">Handshake.org</a></p>
</blockquote>
<p>Handshake’s purpose is to remove the need for authorities like ICANN and the registrars that charge rental fees for domain name “ownership.” Instead, Handshake’s permissionless blockchain serves as the source of truth, providing immutable DNS records. This is the coolest part: this means when you buy a domain with Handshake, you actually <em>own</em> it.</p>
<p>Once you own a top level domain, naturally you want to do something with it. Here’s how to initially set up a personal website using GitHub Pages and then point your Handshake domain to it.</p>
<p>If you don’t own a Handshake domain yet, the <a href="nb-docs">Namebase docs</a> walk you through the process.</p>
<h2 id="setting-up-a-github-pages-site">Setting up a GitHub Pages site</h2>
<p>GitHub Pages lets users turn repositories into websites. There are two kinds of Pages sites: personal and project. Project sites let you turn a specific folder or branch of your repository into a website whereas personal sites require the entire repo and publish from the main branch. This guide is based on a personal GitHub Pages site.</p>
<p><em><a href="pages-docs">GitHub’s official docs</a> are very helpful; I wrote a <a href="pages-guide">step-by-step guide for building a Pages</a> site as well.</em></p>
<p>Broadly speaking:</p>
<ol>
<li>Create a new repository on GitHub called <code class="language-plaintext highlighter-rouge">USERNAME.github.io</code> where USERNAME is your GitHub username.</li>
<li>Go to the repository settings …</li>
</ol>
<p><img src="/assets/img/blog/2020/configuring-handshake-domains-for-github/settings-tab.png" alt="repo-settings" /></p>
<ol>
<li>… then scroll down to enable GitHub Pages by choosing a publishing source (for personal websites, select the <em>Master</em> branch) and choosing a theme.</li>
</ol>
<p><img src="\assets\img\blog\2020\configuring-handshake-domains-for-github\pages-setting.png" alt="enable-pages" /></p>
<ol>
<li>Add an <code class="language-plaintext highlighter-rouge">index.md</code> file to your repository’s root directory and commit it to your publishing source (which should be the main branch).</li>
</ol>
<h2 id="updating-your-github-pages-url-settings">Updating your GitHub Pages URL settings</h2>
<p>Once your repository has GitHub Pages enabled, in the Settings tab you’ll now have the option to set a custom domain for your site. As far as GitHub is concerned, it really is as easy as just typing in your Handshake domain and hitting ‘Save.’</p>
<p><img src="\assets\img\blog\2020\configuring-handshake-domains-for-github\github-pages-custom-domain-HNS.png" alt="custom-domain" /></p>
<p>I chose to set my URL as <code class="language-plaintext highlighter-rouge">writtenby.mandelliant</code> but it could have just as easily been <code class="language-plaintext highlighter-rouge">mandelliant</code>.</p>
<h2 id="configuring-your-handshake-top-level-domain">Configuring your Handshake top level domain</h2>
<p>Using Namebase, from your dashboard you can manage any domains you own.</p>
<p>Select the domain you want to use and click the ‘Manage’ button.</p>
<p>If you have the ability to host your own nameservers, Namebase recommends doing so, otherwise they give you the information you need to use theirs.</p>
<p><br /></p>
<p><strong>Create your NS record:</strong></p>
<p><img src="\assets\img\blog\2020\configuring-handshake-domains-for-github\NS-record.png" alt="ns record" /></p>
<p><br />
<br /></p>
<p><strong>Add your nameserver DNS records:</strong></p>
<p><img src="\assets\img\blog\2020\configuring-handshake-domains-for-github\HNS-DNS.png" alt="dns records" /></p>
<p><br /></p>
<p>The Name field is the subdomain for your website, and the Value/Data field is where the URL should point. I left the default TTL value.</p>
<p>Your GitHub Pages site should now be accessible from <code class="language-plaintext highlighter-rouge">subdomain.yourdomain/</code>!</p>
<h2 id="visiting-handshake-domains">Visiting Handshake domains</h2>
<p>There are two ways to see your new domain in action: changing the DNS settings on your browser/device, or using the Handshake search engine <a href="hns-to">HNS.to</a>.</p>
<p>Give HNS.to a try by searching for <code class="language-plaintext highlighter-rouge">welcome.nb</code> or (shameless plug) <code class="language-plaintext highlighter-rouge">writtenby.mandelliant</code>.</p>
<p><img src="/assets\img\blog\2020\configuring-handshake-domains-for-github\HNS.to.gif" alt="hns to" />
<em>gif courtesy of the <a href="gif-link">Namebase docs</a></em></p>
<p>If you want to try <a href="dns-settings">modifying your DNS settings</a>, Namebase covers a variety of methods on different platforms / operating systems.</p>
<p>Happy building! Thank BlockChannel for posting this piece originally by learning more about <a href="dweb">what’s to come for the DWeb</a>.</p>Anthony MandelliA Quick Start Guide for DWeb HostingBuilding a personal website using Jekyll and GitHub Pages2020-07-27T00:00:00+00:002020-07-27T00:00:00+00:00/how-to/2020/07/27/building-websites-with-jekyll-and-github-pages<p>GitHub has a feature called <a href="pages">Pages</a> which essentially lets you turn a repository full of <a href="markdown">markdown</a> files into a website (like <a href="repo">the one you’re on now</a>). Seeing as I have very little web dev experience but feel relatively comfortable writing markdown, Pages seemed like a great way to get the feel of a custom personal website with GitHub handling most of the nitty-gritty backend details. It’s also free, which fit my budget.</p>
<p>A personal website can be like a digital business card. I use mine as a blog and portfolio of both writing samples and the work I’ve done on the site. It’s a powerful professional tool and an outlet for creativity.</p>
<p>If you have some coding experience and don’t mind using command line tools, GitHub Pages and Jekyll might be worth considering if you want to build your own website.</p>
<p>Here’s what worked for me:</p>
<ol>
<li><a href="#prereqs">Prerequisites</a></li>
<li><a href="#getting-started">Follow GitHub’s getting started</a></li>
<li><a href="#modify">Modify the design</a></li>
<li><a href="#domain">Set up a custom domain</a></li>
</ol>
<h2 id="prereqs">1. Prerequisites</h2>
<ul>
<li><a href="https://git-scm.com/downloads">Git</a></li>
<li><a href="https://www.ruby-lang.org/en/documentation/installation/">Ruby</a></li>
<li><a href="https://bundler.io">Bundler</a></li>
<li><a href="https://jekyllrb.com/docs/installation/">Jekyll</a></li>
</ul>
<p>After installing Git and Ruby, download <a href="https://bundler.io">Bundler</a>. Bundler is a utility that manages some backend tasks (like keeping the Ruby gemfiles up to date and making sure Jekyll builds execute properly) to reduce build errors or environment issues.</p>
<p>GitHub recommends using Bundler to install Jekyll. From the root folder of your site project, run the following command:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>$ bundle install jekyll
</code></pre></div></div>
<h2 id="getting-started">2. Follow GitHub's getting started</h2>
<p>Follow [the setup guide][guide] on the Pages website:</p>
<h4 id="create-your-repository">Create your repository.</h4>
<p>For individual and organization pages, the repository must be named <code class="language-plaintext highlighter-rouge">username.github.io</code> where <code class="language-plaintext highlighter-rouge">username</code> is your GitHub username. These websites will publish from the <code class="language-plaintext highlighter-rouge">master</code> branch of the repository. Project pages can publish from a <code class="language-plaintext highlighter-rouge">gh-pages</code> branch or a <code class="language-plaintext highlighter-rouge">docs</code> folder, but I’m only covering individual/organization pages in this guide.</p>
<p>When initially setting up the repository for Pages on GitHub, the instructions walk you through configuration but don’t explicitly say whether or not to create the repo. When you get to that point, initialize with a README (unless you’re importing a repository) and click ‘Create’.</p>
<p><img src="/assets/img/blog/2020/building-personal-website-jekyll/create-repo.png" alt="create-repo" /></p>
<h4 id="create-your-jekyll-site">Create your Jekyll site</h4>
<ol>
<li>
<p>Using your Git tool of choice, navigate to the root folder containing your soon to be website. Initialize it as a Git repository with the following command, replacing REPOSITORY-NAME with your repository name:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ git init REPOSITORY-NAME
> Initialized empty Git repository in /Users/anthony/mandelliant.github.io/.git/
</code></pre></div> </div>
</li>
<li>
<p>Because this is a personal/organizational Pages site, the <code class="language-plaintext highlighter-rouge">master</code> branch is your live website. Check you’re on the right branch with <code class="language-plaintext highlighter-rouge">git branch</code>.</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ git branch
> * master
</code></pre></div> </div>
<p>Once you’re in the right folder and on the right branch, use the following Jekyll command to create the website: <code class="language-plaintext highlighter-rouge">$ bundle exec jekyll VERSION new .</code>. Replace VERSION with the <a href="https://pages.github.com/versions/">current dependency version GitHub Pages requires</a>.</p>
</li>
<li>
<p>Open the Gemfile and follow the instructions in the code comments to configure it for GitHub Pages. The GitHub guide then says to update the <code class="language-plaintext highlighter-rouge">gem</code> line to: <code class="language-plaintext highlighter-rouge">gem "github-pages", "~> VERSION", group: :jekyll_plugins</code>, again replacing VERSION with the <a href="https://pages.github.com/versions/">current dependency version</a>. I couldn’t get that to work, so I left off the VERSION entirely and that seemed to do the trick. I’m not necessarily endorsing that as the correct course of action, but I haven’t run into any issues.</p>
<p>This is what the relevant lines of my Gemfile look like after updating:</p>
<div class="language-ruby highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="c1"># If you want to use GitHub Pages, remove the "gem "jekyll"" above and</span>
<span class="c1"># uncomment the line below. To upgrade, run `bundle update github-pages`.</span>
<span class="n">gem</span> <span class="s2">"github-pages"</span><span class="p">,</span> <span class="ss">group: :jekyll_plugins</span>
<span class="c1"># If you have any plugins, put them here!</span>
<span class="n">group</span> <span class="ss">:jekyll_plugins</span> <span class="k">do</span>
<span class="n">gem</span> <span class="s2">"jekyll-feed"</span><span class="p">,</span> <span class="s2">"~> 0.12"</span>
<span class="k">end</span>
</code></pre></div> </div>
<p>Save and close the Gemfile.</p>
</li>
<li>
<p>At this point, GitHub suggests <a href="https://docs.github.com/en/github/working-with-github-pages/testing-your-github-pages-site-locally-with-jekyll">testing your site locally</a>. Use the command <code class="language-plaintext highlighter-rouge">$ bundle exec jekyll serve</code> to run a test server from your computer:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code> $ bundle exec jekyll serve
> Configuration file: /Users/octocat/my-site/_config.yml
> Source: /Users/octocat/my-site
> Destination: /Users/octocat/my-site/_site
> Incremental build: disabled. Enable with --incremental
> Generating...
> done in 0.309 seconds.
> Auto-regeneration: enabled for '/Users/octocat/my-site'
> Configuration file: /Users/octocat/my-site/_config.yml
> Server address: http://127.0.0.1:4000/
> Server running... press ctrl-c to stop.
</code></pre></div> </div>
<p>In a new browser tab, navigate to <code class="language-plaintext highlighter-rouge">localhost:4000</code> to see your website for the first time.</p>
</li>
<li>
<p>Connect your local directory with your repository on GitHub.</p>
<p>First, run <code class="language-plaintext highlighter-rouge">$ git remote add origin https://github.com/USER/REPOSITORY.git</code>, replacing USER with the user account that owns the repository, and REPOSITORY with the name of your GitHub Pages repo.</p>
<p>Then push the repository to GitHub with <code class="language-plaintext highlighter-rouge">$ git push -u origin BRANCH</code>, replacing BRANCH with the name of the branch you’re working on, which should be <code class="language-plaintext highlighter-rouge">master</code>.</p>
</li>
</ol>
<p>And that’s it! Your website should now be live at YOURNAME.github.io. You can check by navigating to your repo and opening the settings - if you scroll down, there will be a GitHub Pages section with a link to your site.</p>
<p><img src="/assets/img/blog/2020/building-personal-website-jekyll/click-pages-url-to-preview.png" alt="pages-url" />
<em><a href="https://docs.github.com/en/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll#creating-a-repository-for-your-site">image source</a></em></p>
<p>From there, the GitHub guide offers instructions on <a href="https://docs.github.com/en/github/working-with-github-pages/adding-content-to-your-github-pages-site-using-jekyll">adding new posts and pages</a> or <a href="https://docs.github.com/en/github/working-with-github-pages/adding-a-theme-to-your-github-pages-site-using-jekyll">customizing your theme</a>.</p>
<h2 id="modify">3. Modify the design</h2>
<p>If you’re like me and unfamiliar with Ruby, different elements called gems control a lot of the configurations and settings; Jekyll layout themes, like the default theme Minima, are gems.</p>
<p>This means much of the HTML laying out your pages is hidden away in the directory where you initially installed Ruby. Unless you selected a different location, the path should be something like <code class="language-plaintext highlighter-rouge">C:/Ruby26x-64 > lib > ruby > gems > 2.6.0 > gems > minima-2.5.1</code> for Windows (which should translate to <code class="language-plaintext highlighter-rouge">/Users/username/.rubies/ruby-2.6.2/bin/ruby</code> on Mac). From there you can access the <code class="language-plaintext highlighter-rouge">_layouts</code> and <code class="language-plaintext highlighter-rouge">_includes</code> folders and files.</p>
<p>You can modify these files to change the layout of your pages from your theme’s default or add elements like the callout box above the main content on my homepage that shows my most recent blog post. But if you only change the local version of the file on your computer, the changes won’t override the default settings GitHub uses to render your site, so the live version of your website will look different than when you <a href="https://docs.github.com/en/github/working-with-github-pages/testing-your-github-pages-site-locally-with-jekyll">test it locally</a>.</p>
<p>To override any of these files, all you have to do is create a new version in a <code class="language-plaintext highlighter-rouge">_layouts</code> or <code class="language-plaintext highlighter-rouge">_includes</code> folder in your website’s root directory (similar to the instructions in the guide on <a href="https://docs.github.com/en/github/working-with-github-pages/adding-a-theme-to-your-github-pages-site-using-jekyll">customizing your theme</a>- you can also look at my website’s <a href="https://github.com/Mandelliant/mandelliant.github.io">repository</a> as an example).</p>
<h4 id="modifying-the-homepage">Modifying the homepage</h4>
<p>The homepage layout is controlled by the <code class="language-plaintext highlighter-rouge">index.markdown</code> file Jekyll placed in your root directory. If you open that file, you’ll notice the layout is <code class="language-plaintext highlighter-rouge">home</code>.</p>
<p><img src="/assets/img/blog/2020/building-personal-website-jekyll/homepage-markdown.png" alt="homepage" /></p>
<p>Add a <code class="language-plaintext highlighter-rouge">_layouts</code> folder to your root directory, then create a <code class="language-plaintext highlighter-rouge">home.html</code> file inside.</p>
<p><img src="/assets/img/blog/2020/building-personal-website-jekyll/layouts.png" alt="layouts" /></p>
<p>Copy the contents of the <code class="language-plaintext highlighter-rouge">home.html</code> file in your local Ruby folder into the new file in your website (or start completely from scratch if you prefer). Now in the file in your website, you can make any changes you want. Add the floating box:</p>
<p><img src="/assets/img/blog/2020/building-personal-website-jekyll/floating-box.png" alt="floating-box" /></p>
<p><em>The endif tags in this code snippet were causing a Jekyll Liquid syntax error preventing the post from building locally, so you get a screenshot instead. You can find the code <a href="https://github.com/Mandelliant/mandelliant.github.io/blob/master/assets/main.scss">here</a>.</em></p>
<p>Orienting the box on the page and styling the shadow requires some CSS. Create an <code class="language-plaintext highlighter-rouge">Assets</code> folder in the root directory and add a <code class="language-plaintext highlighter-rouge">main.scss</code> file inside to supersede the default CSS that comes with the Minima theme.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@import</span> <span class="s1">"minima"</span><span class="p">;</span>
<span class="nc">.floating-content</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">30px</span> <span class="m">0</span><span class="p">;</span> <span class="nl">flex</span><span class="p">:</span> <span class="m">1</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">1px</span> <span class="nb">solid</span><span class="p">;</span>
<span class="nl">padding</span><span class="p">:</span> <span class="m">10px</span><span class="p">;</span>
<span class="nl">margin-right</span><span class="p">:</span> <span class="m">50</span><span class="p">;</span>
<span class="nl">box-shadow</span><span class="p">:</span> <span class="m">5px</span> <span class="m">10px</span> <span class="m">#778899</span><span class="p">;</span>
<span class="nl">background-color</span><span class="p">:</span> <span class="m">#ffffff</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="domain">4. Set up a custom domain</h2>
<p>GitHub makes it really easy to add your own domain for your Pages site. From your repository on GitHub, go to the settings and scroll down to the GitHub Pages section. There will be a field to input a custom domain:</p>
<p><img src="/assets/img/blog/2020/building-personal-website-jekyll/custom-domain.png" alt="domain" /></p>
<p>This is my actual domain - thanks to a sweet project called <a href="https://handshake.org/">Handshake</a>, I own the top level domain <code class="language-plaintext highlighter-rouge">mandelliant/</code>. If you’re <a href="https://learn.namebase.io/starting-from-zero/how-to-access-handshake-sites">resolving HNS domains</a>, check out <a href="http://writtenby.mandelliant/">writtenby.mandelliant/</a>. I plan to write more about Handshake and setting up the domain soon.</p>
<p>There are <code class="language-plaintext highlighter-rouge">baseurl</code> and <code class="language-plaintext highlighter-rouge">url</code> fields in the <code class="language-plaintext highlighter-rouge">_config.yml</code> file in your site’s root directory, and I’m sure there’s a very good reason for them, but it seems like I’m not having any issues leaving them empty for now. If you have a custom domain you want to use, GitHub has <a href="https://docs.github.com/en/github/working-with-github-pages/managing-a-custom-domain-for-your-github-pages-site">instructions</a> for setting it up and updating your DNS records.</p>
<p><br /></p>
<hr />
<p class="rss-subscribe">Subscribe <a href="/feed.xml">via RSS</a></p>
<hr />Anthony MandelliGitHub has a feature called Pages which essentially lets you turn a repository full of markdown files into a website (like the one you’re on now). Seeing as I have very little web dev experience but feel relatively comfortable writing markdown, Pages seemed like a great way to get the feel of a custom personal website with GitHub handling most of the nitty-gritty backend details. It’s also free, which fit my budget.Hello world2020-07-06T00:00:00+00:002020-07-06T00:00:00+00:00/updates/2020/07/06/hello-world<h3 id="and-so-it-begins">And so it begins</h3>
<p>This website started off as a way to host some of my favorite written pieces that I’ve worked on over the years.</p>
<p>But I had so much fun building it (read: frustration re-acquainting myself with Jekyll), that it seemed a shame to just plop down some text and let it be.</p>
<p>So now it’s a portfolio website that will grow and be a sandbox to play around in.</p>
<p>And it’s going to host a blog (because everyone needs a blog or at least a podcast or newsletter).</p>Anthony MandelliAnd so it begins