Handmade blog setup

2019-10-20

Welcome! On this first post, I'm going to share my handmade blog setup.

Nowadays most end users blogs are done with Wordpress or Wix and technical users are using one of the many static site generators listed on www.staticgen.com.

However, for this blog I wanted to start from scratch and manually create all of the components needed. My reasons for this are: keeping the software light, get top website speed and mostly because:

What I cannot create, I do not understand.
—Richard Feynman

Buying a domain¶

First of all, you'll need a domain name. I would recommend buying from Namecheap or NameSilo. Nobody recommends GoDaddy since I can remember.

NameSilo is a bit cheaper than Namecheap. You can get around $2.98 in difference when buying a domain.

Depending on the domain, you might get a much cheaper price from another company. For example, say we want a .pe domain(Perú is my native country). Compare the price offered by a peruvian company called Punto Pe to the price Namecheap offers:

Domain	Namecheap price	Punto Pe price
testing123xyz.pe	$58.98/yr	$32.47/yr (110 in PEN)

About $26.50 difference, not negligible I'd say. However, for this site I wanted an .xyz domain and Punto Pe doesn't offer those. I ended up buying from Namecheap because NameSilo had some issues with my debit card.

Update from 2020-05-03

I no longer recommend Namecheap because they don't allow API access for their DNS unless you spend at least $50 with them(at the time of this note).

DNS API access is needed for enabling HTTPS on multiple subdomains.

So, with the domain covered let's go to the blog theme.

Plain mother#^@* HTML ¶

I just downloaded bettermotherfuckingwebsite.com html and started tweaking the HTML/CSS.

While designing the theme I followed two principles: keep a minimum amount of markup(no nested <div>) and don't include JavaScript. This lead me to discover the following:

Writing <p> and <h3> is not that big of a deal with good ol' Emmet
There is a nice semantic <time> tag that's really appropriate for the blog posts dates.
flexbox helps with avoiding unnecesary markup. I'm glad that the ugly float hacks and media queries aren't needed anymore.

All in all, everything was good. Until I decided I wanted to show a code snippet.

Problem: syntax highlighting

The <code> tag doesn't support syntax highlighting natively, that sucks. Most of the suggested solutions on the internet are to use JavaScript libraries but I don't want those. Another option would be writing the required CSS/HTML manually but that would be just pain.

So...

Solution: no syntax highlighting

Actually a minimal syntax highlighting. I'm a big fan of keeping things minimalistic, and I agree with articles such as: A case against syntax highlighting.

Based on that, I decided to manually add coloring for comments, strings, and for other special stuff(like interpolated variables). Writing a few <span> is not a big deal. Here's the CSS for that:


//Poor man's syntax highlighting

//For comments
code span.comment {
  color: #969896;
}

//For "strings"
code span.string {
  color: #b5bd68;
}

//For other stuff
code span.meta {
  color: #de935f;
}

We'll see how this goes..

No blog post is exempt from being shared on social media platforms(Google, Facebook, Linkedin, etc.). These usually have a preview which is shown on their feed, to control this you need to include certain "meta tags" on your html page. You can test these tags with metatags.io.

Open Graph meta tags

Open Graph is a standard that Facebook, Linkedin, Pinterest, Reddit use. This page uses:


<meta property="og:type" content="website"/>
<meta property="og:url" content="https://stevechavez.xyz/handmade-blog-setup.html"/>
<meta property="og:title" content="Handmade blog setup"/>
<meta property="og:description" content="Manual creation of the components needed for a blog"/>
<meta property="og:image" content="https://stevechavez.xyz/images/handmade.png"/>

This basically tells what title(og:title), image(og:image) and description(og:description) should be used for the blog post.

Twitter meta tags

Twitter has its own way of doing things. But their tags are analogous to the Open Graph tags:


<meta property="twitter:card" content="summary_large_image"/>
<meta property="twitter:url" content="https://stevechavez.xyz/handmade-blog-setup.html"/>
<meta property="twitter:title" content="Handmade blog setup"/>
<meta property="twitter:description" content="Manual creation of the components needed for a blog"/>
<meta property="twitter:image" content="https://stevechavez.xyz/images/handmade.png"/>

Search engine standards ¶

Now that the blog is setup on how it would look, it's time to see how it will be found. Finding urls is the job of a web robot, like the Google Bot or Bing Bot; these have gotten smarter over the years, but for making their job easier you can include the following standard files at the root of your site.

Robots Exclusion Standard(robots.txt)

This tells the Web Robots which URLs should not be scanned.


User-Agent: *
Allow: /

User-agent: *
Disallow: /rex/

Sitemap: http://stevechavez.xyz/sitemap.xml

Here I'm telling that all the bots are allowed(User-Agent: *) and that they can access every page(Allow: /) except all the pages that are in the /rex folder(Disallow: /rex/).

Robots Inclusion Standard(sitemap.xml)

This tells the Web Robots which URLs should be scanned and how frequently they should check for updated content.


<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://stevechavez.xyz/</loc>
    <lastmod>2019-10-20</lastmod>
    <changefreq>monthly</changefreq>
  </url>
  <url>
    <loc>https://stevechavez.xyz/handmade-blog-setup.html</loc>
    <lastmod>2019-10-20</lastmod>
  </url>
</urlset>

Here I'm telling the robot that my index is meant to be scanned monthly and I'm also listing this page.

Really Simple Syndication(RSS) ¶

By adding an RSS feed to your website, your readers can know about your new posts by using any RSS reader app of their liking. And without them having to give you their email or any other private information.

You know, before the era of social media, RSS was the way to get the news on the internet. The standard is still used nowadays — e.g. YouTube channels have an RSS feed — and it's a must for any tech blog.

Let's see about the format. I handcoded¹ my initial rss.xml based on the RSS 2.0 spec² and this sample feed.


<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="rss.css" ?>
<rss version="2.0">
  <channel>
    <title>RSS feed from stevechavez.xyz</title>
    <link>https://stevechavez.xyz</link>
    <description>
      Blog posts from stevechavez.xyz. Throw this in your RSS feeder for updates!
    </description>
    <language>en</language>

    <item>
      <title>Handmade blog setup</title>
      <description>
        Manual creation of the components needed for a blog
      </description>
      <category>blog setup</category>
      <link>https://stevechavez.xyz/handmade-blog-setup.html</link>
      <guid>https://stevechavez.xyz/handmade-blog-setup.html</guid>
      <pubDate>Sun, 20 Sep 2019 05:41:17 +0000</pubDate>
    </item>

  </channel>
</rss>

I suggest only including a brief excerpt of your blog post with a link to the full post on the RSS feed. Doing this keeps it more light and simpler to maintain.

The end of the start ¶

This is the end of my first post. With this you should have all the basic components for a blog. In next posts I'm hoping to share my setup for deployment to production and website analytics.

You don't have to handcode it(I'm just being masochistic here), you can use a generator like python-feedgen. ↩︎
Atom is another competing RSS spec, which some authors cite as overengineered and more complicated. I agree with them. So I decided to go with the more simpler RSS 2.0 spec. You can read more about the history of RSS on The Rise and Demise of RSS. ↩︎