It hurts the worst when the person that made you feel so special yesterday, makes you feel so unwanted today. Every time I remember about somebody that I used to know. Enough, that’s History! Talking about history WordPress post also has its own history.

After yesterday, now I know that a post can have many history items. If you don’t already know try to check from your Blog Posts → Choose a Post → Edit. In the top left menu after your site title there is link that says History. If you are like me (make changes every time) You might see histories of your edited post.


The Revisions screen shows any backup copies of your post or page. Each time you save a draft or Update, a revision is saved. WordPress.com will store the last 25 revisions for each post or page on your blog. Revisions allow you to look back at the recent changes you’ve made and revert to an earlier version if necessary.

You might want to see https://en.support.wordpress.com/editors/page-post-revisions/ for more detailed information about history in WordPress post. But if you want something else you can keep reading this post, I will talk about file versioning.

I try not to depend on this feature provided by WordPress because the last time problem with HTML entities thing, You can check this post to know the details. Now I keep posts in separate place, copy paste to publish it, doesn’t sound effective but it’s fun and safe for me.

So what is file versioning?

If you backup files using a program with file versioning, you can go back to drafts of your work that you’ve since saved over. For example, if you deleted a paragraph from a paper a week ago and now you want it back, you can search through all of the previously saved versions of that document until you find a copy that contains the text you’re looking for.

It’s also very useful if your files get corrupted, as you can simply open a version of the document from before it happened and keep working as planned.

Basically this is the same thing like history I talked before but instead of file it’s a post versioning. In a more technical term this thing is called version control system a system that records changes to a file or set of files over time so that you can recall specific versions later. This is how I usually version my files. Now, let’s talk about what version control I use.

Git & GitHub

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

GitHub is a development platform inspired by the way you work. From open source to business, you can host and review code, manage projects, and build software alongside millions of other developers.

They are not the same thing: Git is the tool, GitHub is the service for projects that use Git.

I will not talk to deep about these two things because theoretically it’s really complicated I just know a little in how to use it. It took me years to understand parts by parts of this technology so if You try to mastering these things I suggest You to play it slow don’t rush anything. And now, this is how I use them.

Initializing Local Repository

What is Repository (Git)? The purpose of Git is to manage a project, or a set of files, as they change over time. Git stores this information in a data structure called a repository. So, repository is a thing :D. First, I have a directory that contains my files which I want to be versioned and the I initialize the repository using commands.


The commands are:

  • git init
  • git add .
  • git commit -m “comment

Okay, now I have a local repository, why local? because after this I’m going to make it online using Github. I go to github.com → New Repository → Fill the Repository name → Create repository, and the online Repository created, yay! This repository is empty, there will be sets of instructions on how to do next. For me, I will…

push an existing repository from the command line

git remote add origin https://github.com/yuulye/yuulye.wordpress.com-posts.git
git push -u origin master

After executing those commands my online repository is created, refresh the page and I have my files there. Now it’s time to make some changes. This is the command I use to update my files.
git add .
git commit -m "update"
git push


I know this system while I was learning about programming, this mostly used for collaborative works, but for me the main purpose for this system is to version the files so that we can see the history.

Be Careful with WordPress Editor

I mean WordPress post editor, the one that look like this


I just edited a post and it had enough changes to annoy me. What I did was trying to update my last post, I tried to remove this sign <!-- more -->. I removed the sign, update the post, and guess what happened, the post broken.

My post has a lot of HTML tag written inside it, after I reload the content, all of HTML entities become characters. For example: I write &lt;, this should become <, and when the post content reload in the WordPress editor it became the actual character, so no more &lt; but <.

I’m not going to repeat my mistake, so now I need change the way I write post.

Text Editor

A text editor is a type of program used for editing plain text files. Such programs are sometimes known as “notepad” software, following the Microsoft Notepad.

I use a desktop computer application to write called text editor. There are tons of text editor out there but the one I use is Sublime Text A sophisticated text editor for code, markup and prose. I use this text editor for almost everything, from writing code, searching files, Git, compare texts, and now, writing post for WordPress Blog, and I’m loving it. Why I love it?


This is the same reason why I love writing code, the colors or usually called Syntax highlighting.

Syntax highlighting is a feature of text editors that are used for programming, scripting, or markup languages, such as HTML. The feature displays text, especially source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.


Distraction Free Mode

Distraction Free Mode shows your files full screen, with nothing but text shown in the center of your monitor. All UI chrome is hidden, but accessible. Distraction Free Mode can be entered into via the View/Enter Distraction Free Mode menu item.

When in Distraction Free Mode, all UI chrome (side bar, minimap, status bar, etc) will be hidden. You can selectively enable parts of the UI via the View menu – your settings will be remembered next time you enter Distraction Free Mode.


I don’t usually work using this feature because I always changing windows, but when writing a post like this it’s pretty different, I don’t need to change windows as much as when I coding. It make me focus more on what I’m writing.

and the best is,

VIM Mode

Like what I was said, I use this text editor a lot, and for everything I always use this VIM mode. In Sublime Text it is called Vintage Mode Vintage is a vi mode editing package for Sublime Text 2. It allows you to combine vi’s command mode with Sublime Text’s features, including multiple selections. actually but I prefer to call it VIM Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as “vi” with most UNIX systems and with Apple OS X. Because if only I had more strength and power I will be using VIM instead of Sublime Text. This VIM Mode make me move around much faster.

Since now I have the post files in my computer drive, I maybe put it in a repository later for versioning.

HTML in Comment

Do You know that You can use HTML in your WordPress comment? There are 14 elements You can use to prettify your comments. The elements are a, abbr, acronym, b, blockquote, cite, code, del, em, i, q, s, strike, and strong. Some of them might also have attribute(s) that can be modified.


The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

In WordPress comment, this element has 2 attributes that can be used they are href and title. Fill the href attribute with some kind of URL and title attribute with a related title Specifies extra information about an element (displayed as a tool tip) .

<abbr> & <acronym>

The <abbr> tag defines an abbreviation or an acronym, like “Mr.”, “Dec.”, “ASAP”, “ATM”.

Tip: An abbreviation and an acronym are both shortened versions of something else. Both are often represented as a series of letters.

Marking up abbreviations can give useful information to browsers, translation systems and search-engines.

The elements have one and only attribute that can be used for the comment and that is title. This attribute works the same behavior with <a> tag, when You hover it, the tool tip will show You content of the title. Those tags are similar, probably the same, but when You are writing your own HTML page You might want to use only abbr tag. because…

The <acronym> tag is not supported in HTML5. Use the <abbr> tag instead.

<b>, <strong>, <i> & <em>

These elements are Formatting elements. <b> similar with <strong>, <i> similar with <em>. <b> means bold, <strong> also bold but with added semantic “strong” importance. <i> means italic, <em> also italic but with added semantic importance.

Here is some examples of combination from the elements.

no format = no format.
<b>bold</b> <strong>strong</strong> = bold strong.
<i>italic</i> <em>em</em> = italic em.
This sentence is important but not as important as this.

<blockquote>, <q> & <cite>

A quotation is the repetition of one expression as part of another one, particularly when the quoted expression is well-known or explicitly attributed by citation to its original source, and it is indicated by (punctuated with) quotation marks.

Paragraph above is quoted from wikipedia. I use a special element to make the appearance different with other section. I use <blockquote>tag. <blockquote> and <q> tag are the same, the difference is <blockquote> used for a long quote, and <quote> for shorter version of quote. I personally use <blockquote> in a self paragraph, and <q> for quoting a sentence inside a paragraph.

Those two tags, has an attribute that can be filled. The attribute is called cite, it usually has a value of a URL which means Specifies the source of the quotation. The attribute can be a self tag called <cite>, I haven’t actually use it a lot, I just usually use the quoting tag directly, but for example most of my references is taken from w3schools.com.


I should love this element the most. This element is me, haha.The <code> tag is a phrase tag. It defines a piece of computer code. This element make a block of text pretty different, if we take a look at other elements, this is the only element that change the background.

This element has an inline display, so if You want to make the piece of code more visible You might want to add more spaces between before and after block.

<del>, <s> and <strike>

Last but not least, for a strike through decoration text we can use these elements. The only element that has attribute that can be modified is <del> element. The attribute is datetime, if You want a precise thing for you deletion thing, You can use this element with the attribute datetime even though the format is pretty hard to memorize YYYY-MM-DDThh:mm:ssTZD.

I don’t use this kind of element so much, but maybe if You are working in a project and need versioning, You can use these element to mark that something has changed. Or, just use it to make your text noticeable in the comments.

So, now is the time to try these elements in the comment. I haven’t tried much
but I might add a comment to this post after.

I Need More

I love WordPress, but, I need more. This is about me customizing content of a website. I’m not good with words so I try to use something else. I know a little about HTML, CSS, and JavaScript, and I want to use them. But WordPress doesn’t allow me to use custom CSS or JavaScript in a post, not that I know of.


So, I try to find something else, something free, because I believe that my content is not good enough to be in paid service, my WordPress is also a Free Plan by the way.

Github Pages

After sometime trying to find an alternative, I found out about Github Pages. GitHub Pages is a static site hosting service. I can host my HTML documents and only HTML, no server-side scripting (PHP, Ruby, Python, etc.) supported, just like a usual web server without Backend code. I started to create pages and put it there, so far the site works just like what I wanted yuulye.github.io.

Linking to thethoughtfulbrain, this will pingback to your post.

Linking to another post.