My personal Jekyll blog has been renewed

I’ve completed a renewal of my personal website hosted on GitHub Pages. Previously, I used the GitHub official personal website theme modified by me, and I spent two days for the renew as a small blog.

The basic framework used Jekyll, a static blogging tool that is good to host in GitHub Pages. There is another way to develop to LAMP WordPress and extracted using Simply Static. However, it took more time than Jekyll, so I decided to make it faster using Jekyll.

If I live in 15 years ago, I would have thought about designing a theme myself, but now, I’m not an agency employee or a portfolio maker for get jobs. So I just found a theme that suits me.

I wanted a clean and simple theme, and the Derrick seemed to me the perfect fit. Okay, let’s get started.


Start renewal

First modified _config.yml. It is necessary to work in any Jekyll website. After writing down the required information, run the bundle exec jekyll serve after bundle install, checked the blog and I thought about what to modify or expand.

After this, I copied the old markdown posts and edit front-matter.


Disqus Comments

Derrick can only show comments by pressing the View Comments button. I modified _includes/show-disqus.html because I wanted the comments to be visible by default.


Google AdSense

Next Google AdSense configured. Make _includes/ad.html and type the codes. Client and slot codes can be listed on _config.yml.

adsense:
  client:
  slot:


Now add the javascript inside the <body>, in _layouts/default.html.


And include ad.html in _layouts/post.html and _layouts/tag-page.html.


Vanilla - Back to Top

Vanilla Back to Top applied Vanilla Back to Top applied

Derrick doesn’t pagination posts default. So I add Vanilla for move to top.

Put the js to assets/js/vendors and wrote the codes in the bottom of _layouts/default.html, and change button color like Derrick’s primary color.


Formspree and Contact page

Contact page has been added Contact page has been added

Also Derrick didn’t support contact page. It just link to mailto: when user click the ‘Say Hello’ in the first page, so I add contact page using Formspree.

Make _pages/contact.md and write codes below. Owner’s email address follows author.email that defined in _config.yml.

---
layout: page
title: Contact
permalink: /contact/
---

<form id="fs-frm" name="simple-contact-form" accept-charset="utf-8" action="https://formspree.io/[[site.author.email]]" method="post" class="contact" width="100%">
  <fieldset id="fs-frm-inputs">
    <p><label for="full-name">Name</label></p>
    <p><input type="text" name="name" id="full-name" placeholder="Your name here" required=""></p>
    <p><label for="email-address">E-Mail</label></p>
    <p><input type="email" name="_replyto" id="email-address" placeholder="youremail@email.com" required=""></p>
    <p><label for="message">Messages</label></p>
    <textarea rows="5" name="message" id="message" placeholder="Type your messages here" required=""></textarea>
    <input type="hidden" name="_subject" id="email-subject" value="Message from your website">
  </fieldset>
  <input type="submit" value="Send">
</form>

In this codes, site.author.email must be into {}, not [].

This codes can’t control input sizes, also the ‘Send’ button will look like old button as the Netscape. Let’s decorate these pretty.


Edit _sass/2-base/_base.scss. First add width: 100% to input, textarea. Next defined a submit type button style.

input[type=submit] {
 background-color: $primary-color;
 color: white;
 padding: 16px 32px;
 margin: 4px 2px;
 cursor: pointer;
}


Last, change the index.html. ‘Say Hello’ to ‘Contact’, mailto: to contact page. site.baseurl below should be into {}.

<a href="[[site.baseurl]]/contact/" class="say-hello">Contact</a>

footer.html

Buy me a coffee! Buy me a coffee!

At the bottom of the blog, I wanted to put Ko-fi button and phrase there.

Add kofi_username on _config.yml, edit _includes/footer.html.


About page

This page is about me. Not special. Written in markdown.


SEO Optimization

Modified head.html Modified head.html

The others are finished. Now it’s time to do SEO optimization. Edit _includes/head.html and defined in _config.yml.

At first, the keyword has been modified to use different meta keywords for regular pages and posts.

Added location and classification, publisher, twitter card, facebook publisher and page admin, opengraph, itemprop. Verification codes for Google Webmaster and Bing, Norton, Naver, Pinterest.

And it’s not used on my blog, but I’ve also included iOS and Android applink for someone to use when I released this theme.


Compress/Minify

Final step. Websites or blogs created with Jekyll can easily generate compressed output using Compress HTML in Jekyll.

Put the compress.html to _layouts directory, open default.html and edit layout front-matter to compress. That’s it.


closing…

I spent about two days to complete the renewal of my personal blog. In the future, my personal blog will not be renewed if in this state unless the internet changes drastically, so this blog may be used until I die.