Code

My primitive setup for this static blog

Setting up my site and publish blog posts

Created on
Updated on
Reading Time
7-9 mins
Word Count
1.2k approx.
Preface

A lot of bloggers are my source of inspiration. But I’m tired to be a read-only consumer. So, I decided to share how I set up my blog. It’s very primitive and requires absolutely zero technical knowledge. There is no stack, no command line, no workflow, no generating nothing. Write HTML directly and copy & paste everything! Dear people, I hope this post won’t scare you because of how unbelievably stupid this site was built. Just read it™. I dare you.

Note: If you have comments or suggestions about this post, please do let me know.

Background

First thing, I do not have any technical knowledge required to build a blog, instead, I homemade one. I’m a guy who only do static mock-ups in PhotoShop/illustrator for so long that I couldn’t able to understand the concept of Git, SSG or using command line. I’m way too old for that shit.

I write this up to share how I set up this site. It’s primitive to write HTML and build a site this way. The good thing is, it requires less than 5 minutes, minus the installation. You can start right away without worrying too much.

I hope this post can at least give you an idea of how a website can build. I’m no developer. If you have any suggestions or questions, please do let me know.

Okay, enough of the blabbering. Let’s get on with it.

HTML & CSS

Not everyone can write HTML. A good starting place to learn is MDN Web Docs. After you’ve got the basic understanding of HTML. Then you may want to take a look at the tutorials on Sadgrl.online. A step-by-step guide to building a layout.

You don’t need to be a pro to set up your website. Learning the basics of HTML can get you so far than you can imagine. But you do need to understand what is semantics and write HTML properly. I’d suggest starting with something basic and learning along.

Create your first HTML file

Open text editor TextEdit in macOS. Choose Format > Make Plain Text from the menu. Copy and paste the following code into the editor. Save the file on Desktop and rename the file to index.html.

<!-- index.html code example -->
<!doctype html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Your site’s title</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="home">Home</a></li>
          <li><a href="about">About</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h1>Heading of this site</h1>
        <p>Some content goes here</p>
      </article>
    </main>
    <footer>Copyright</footer>        
  </body>
</html>

You can now create your site with this HTML template. Go start styling it with CSS and create content!

Find a place to upload your site

Neocities will be a very good place to upload your site. Supports HTML, CSS and JS. It’s free to use and there’re great resources to learn HTML.

Folder Structure

Open up Finder and do the following. You can move the index.html file in /yoursite folder and rename it to template.php. And then create another folder /includes which is for the HTML header and footer. The same goes to /blog folder. The folder structure will look like this:

Documents/yoursite/
Documents/yoursite/template.php
Documents/yoursite/includes/
Documents/yoursite/blog/
Documents/yoursite/blog/2022-04-22.php

Tools I Use

For code editor, I use VS Code. It has a lot of cool extensions and it can run PHP server. Just head to their homepage and download it. After that, install Homebrew. Just copy the script on their homepage then open macOS Terminal to paste it. It will install all the files needed automatically. After that, input brew install php in Terminal. Then open VS Code to look for the extension PHP Server and install it as well.

You can now open the .php file in VS Code: right click > Serve Project. It will open the page in your default browser with the url something like localhost:3000. Then you can run PHP on your machine now.

PHP “Template”

The reason for using PHP is that it’s more convenient to update the site. Every time you made an update to the header or footer, using PHP includes your life will be a bit easier. However, it’s no different than a .html file except for the includes. You can write HTML as you normally could.

Every time you write a new post, copy the code from template.php and replace the content inside.

PHP includes

Open template.php then Cut & Paste the HTML header from <!doctype html> to </header> into a new file then save as to header.php in /includes folder. You can also do the same to footer or other parts of the HTML you want to reuse. Using PHP <?php include_once '...'; ?> in index.php to include the files in folder /includes and you’ll get something like the following code snippet. Beware the file path of pointing to the /includes folder.

<?php
  include_once '../includes/header.php';
  include_once '../includes/nav.php'
?>
<!-- Blog post content goes here -->
<?php include_once '../includes/footer.php' ?>

PHP variables

For easier to manage blog posts, insert the code below at the very top of the page in all blog post files. I found it a lot more convenient to use PHP variables for page meta titles or canonical. You can add in more variables to save you more time.

<?php
  $page_title = "Your blog post title";
  $page_desc = "A short description.";
  $page_url = "blog/blog-post-url";
  $post_date = "2022-04-22";
?>

Then using PHP <?php echo $page_title; ?> to get the data stored in variable. You can use the same method to get the meta title in /includes/header.php as well.

<article>
  <h1><?php echo $page_title; ?></h1>
  <p>Blog post content goes here</p>
</article>

The blog post title can also be used <?php echo $page_title; ?> in mailto links. When user click/tap on the Reply via Email link, it’ll open up default mail client and the Email title will display in the title field.

<a href="mailto:[email protected]?subject=RE:<?php echo $page_title; ?>">Reply via Email</a>: [email protected]

Rewrite URL

Personally, I dislike the file extension like .html or .php being displayed in the URL. So, use Rewrite to rename those .php files. Simply create a .htaccess file and paste the code inside. It seems to me this is so much neater.

RewriteEngine on
# 2022 Jan
RewriteRule ^/?i-love-writing-html$        2022-01-31.php
RewriteRule ^/?hello-fediverse$            2022-01-10.php
RewriteRule ^/?my-first-blog-post$         2022-01-01.php

Wrapping Up

Maybe designer thinks differently when it comes to making things. I once tried to learn Jekyll and read their docs. It requires you to install a bunch of other stuff using the command line before even doing anything. I stopped reading after installing Homebrew. Just because VS Code needs it to run PHP server.

I do not have the slightest interest in the technology itself, rather, I’d prefer just launching Sketch or Figma and starting to create things. My apologies to developers, I’m a guy who is only equipped with visual thinking. I focus on what I want to create, not the technologies around it. I don’t care what you’re using: Vue or React or Gatsby or Jekyll or Hugo. I couldn’t care less. They’re just tools. Everything else is getting in my way to do things. You could say maybe I’m just finding too many excuses not to learn.

I’ve mentioned it several times in other posts, but I’ll say it again. I was inspired by John Doe’s Page created by @cadars. It’s a simple but elegant one page website. I love the idea of how simple it can be to set up your own website. Also, many people’re setting up their site with just basic HTML & CSS. They make me want to create my own version.

I came across a website by Bradley Taunt. I discoverd what is Fediverse and Webring. I grow more interested in personal websites and blogging. It’s a cool idea. Man, I love indie websites.

This is how I create this site. Ain’t no special about it. This is Extra Ordinary, wouldn’t you agree?