A simple blog

Back on my post Design webpages to last I’ve promised I would put together a simple blog that anyone can edit and call their own. Why you would do that? Because it is fun. At the end of this post I will give you some pros and cons but spoilers alerts… there are more cons.

You can download the final project here. But I will try to guide you first through the changes you will need to make a new post and them explain what each piece of this simple-blog has.

How to make a new blog post

1. Look for the /posts/ folder.

On the /posts/ folder you will find a folder called /my-first-post/, copy that folder and rename it to the new title you want for your blog post. Use this format the-new-title.

2. In the new folder open index.html.

On the index.html you will notice that you still have the content for My first post, just replace that with the content for your new post.

3. Go back to the /posts/ and open the index.html from there.

On this index.html look for where there is a link to the /my-first-post/ and copy that line and paste just below it. Now change that line to point to your new post. (Always change the line at the top)

4. Open the index.html file from the root of the /simple-blog folder.

On this index.html there is a list of the recent posts under the title My posts, look for the line with /my-first-post/ and copy that line and paste just below it. Now change that line to point to your new post. I suggest you keep the 5 or 10 most recently posts in your home page.

5. Look for the rss folder and open index.xml.

On the index.xml you will notice that there is a different structure, that structure is what makes a RSS to be consumed by a Feed reader software. For each new post a new <item> structure needs to be created. So you need to duplicate the content that you can find starting from a <item> until when it is finished like this </item>. Once you copy and paste that, alter the one at the top with the contents of your new post. I like to have the entire post in my RSS feed, so if you want to do that just copy the content from your new post into the feed, replace]ing the original post that I left there as an example.

Deploying your new blog

Ok, those five steps above it is all you need every time you want to create a new post to your blog. Simple like that, that is why I’m calling this simple-blog.

Now let’s deploy this. The easy way to get this up and running that I know of in your own domain is to use Netlify they have a Drop page at app.netlify.com/drop. Once the page is loaded just get the simple-blog folder and drag and drop to where it says Drag and drop your site output folder here. Netlify will give you the URL of your life blog. You can then create a Netlify account and follow the steps here to setup a your new blog under your own domain.

I have gone through these steps myself and deployed it, under my own domain for you to see in here.

Understanding the structure of simple-blog

simple-blog
 |
 +-- index.html
 |    
 +-- about
 |  |  
 |  +-- index.html
 |    
 +-- css
 |  |  
 |  +-- style.css
 |    
 +-- posts
 |  |  
 +  |-- my-first-post
 |  |
 |  +-- index.html
 |  |
 +  |-- my-second-post
 |  |
 |  +-- index.html
 |  |
 +  |-- my-third-post
 |  |
 |  +-- index.html
 |
 +-- rss
 |  |  
 |  +-- index.xml

Has you can see the whole structure it is really simple (again it is simple-blog after all) and the secret thing to understand here is the way webservers work, when you visit a folder with a index.html file in it, the webserver will serve that file. Knowing that gave us the ability to create this structure based on folders names to represent your blog posts.

One thing that we haven’t mentioned yet it is the /css/ folder. That folder will keep the css file that it is referenced in all pages we created, at a line in the top, that looks like this:

<link rel="stylesheet" href="/css/style.css"/>

This particular css file I copied from a nice project called CSS Bed, if you visit this website you will be able to find other options of simple css file that can give your website a nice look by just adding the forementioned line above. I’ve used the bahunya css stylesheet listed on the website. Go ahead and browse those styles and if you find something that you like more, download the css file, rename it to style.css and place it on the css folder replacing the existing file there and your website will have the new look.

Where to go from here

Well the sky is the limit as they say. But you should definitely play with it and have fun. You should learn how to add an image to your posts, for that just search for “how to add an image in html”. One thing that you will notice as you start growing your list of blog posts is that you may want to add a date structure to your folders. For example, either have a 2024 folder with 01, 02, etc folders inside that folder to represent the months, or create a 2024-01 folder and so on and so forth for the following months. That way it will be easy to find and grow your posts.

Advantages and Disadvantages

1. Advantages

• Fun (the biggest one)
• Easy to understand and have it under your control`
• Designed to last

2. Disadvantages

• It may grow out of control
• Requires you to sit on a computer to post (as opposed to use an app)
• Prone to error (there are 5 steps that you always need to get right)
• Very repetitive and not automated (yes, requires you to open files, change files and upload files)
• It’s more work to add other IndieWeb stuff like Webmentions (versus using a plugin)

In conclusion

This is a fun way to do your blog. Is this what I recommend? Probably not, but you should at least try and understand how these things work and what it takes to create a simple blog from scratch.