blog & blog theme
CSS HTML JavaScript
Latest commit 2b003a1 Jan 15, 2017 @Gaohaoyang update
Permalink
Failed to load latest commit information.
_drafts update readme Nov 1, 2016
_includes update fix bugs Dec 18, 2016
_layouts add pre and next post link Jun 20, 2016
_posts update Nov 26, 2016
_sass new post Nov 22, 2016
css update fix bugs Dec 18, 2016
js change comments to duoshuo, add a demo Nov 24, 2016
page u Jan 13, 2017
.gitignore update collec Dec 10, 2016
LICENSE Initial commit Mar 14, 2016
README-zh-cn.md update Jan 15, 2017
README.md update Jan 15, 2017
_config.yml change comments to duoshuo, add a demo Nov 24, 2016
favicon.ico add favicon Apr 29, 2016
feed.xml Change description section in feed.xml Oct 20, 2016
index.html update fix bugs Dec 18, 2016

README.md

About this Cool Concise Jekyll Blog Theme

GitHub stars GitHub forks GitHub issues GitHub release GitHub license

銝剜 Chinese README 霂瑞孵餉

With the escalation of jekyll version, but I also want to reconstruct my older blog theme, so I did reconstruction and added some features recently. My new blog theme will still be stored in this repository. I will also use this theme in the future. Now I have done basically, then I will focus on issues that users opend to make theme better.

My Blog Url: http://gaohaoyang.github.io/. If you like this theme, you can give me a star to encourage me. Welcome everyone to use it.

Content

Preview

First of all, let's see previews.

Index Page index

Post Page post

Page Details

Home

Index page show 5 posts excerpt as a default. Readers can click article title or read more button to see full post. There are recent posts area, categories area and tags area at the right part of the index page. You can also add an area at this part, if you change the file index.html.

Archives

Archive post according to the year.

Categories

Show posts according to the category.

Tags

Show posts according to the tags.

Collections

The user can collect their favorite article links with markdown syntax.

Demo

I use Masonry to rewrite the waterfall responsive layout. Better interactive experience.

About

The user can write some introduction about theirselves and their site with markdown syntax.

Comments

This theme supports both disqus and 憭霂渲霈 duoshuo comments. It's very easy to config your comments module.

The only thing you need do is to change the short_name in the file _config.yml. As follows.

# comments
# two ways to comment, only choose one, and use your own short name
duoshuo_shortname: #xxx
disqus_shortname: xxx

Post Contents

The post contents is fixed at the right side while page is scrolling. There will be a scroll bar on contents while it is outside the window height.

Code Highlight

While the jekyll is update to 3.x.x, you can use github flavored markdown to write code.

More info to see syntax-highlighter-changed.

Light Shadow

light

You can see the white shadow on the current item in the navbar. I call this light shadow.

Mobile Adaptation

Of course, I have done a very good mobile adaptation.

mobile

Footer

Welcome to use this blog theme, but please keep the theme author info at footer. Theme designed by HyG.

footer

Statistical Analysis

This theme supports Google Analytics and Baidu Statistics嚗 you can just config the id in the file _config.yml, as follows.

# statistic analysis 蝏霈∩誨
# 曉漲蝏霈 id嚗撠蝏霈∩誨踵V蛹芸楛曉漲蝏霈【d嚗
# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
# xxxxx摮蝚虫葡
baidu_tongji_id: xxxxxxxxxxxx
google_analytics_id: UA-xxxxxxxx # google 餈質葵id

Usage

Welcome everyone to use this theme, this part shows introduction to use.

1. Install ruby and jekyll environment

This step and Step 5 mainly talk to you how to launch blog at local. If you don't want to launch at local, you can ignore these 2 steps. But I still strongly suggest to do this. Ensure there is nothing wrong before pushing to the github.

The Windows users can directly use RubyInstaller to install ruby environment. Follow the prompts while installing.

Install jekyll commands:

gem install jekyll

For more details, you can view the jekyll official website. https://jekyllrb.com/

There may be something wrong at mac OS X El Capitan, you can see the solution at https://jekyllrb.com/docs/troubleshooting/#jekyll-amp-mac-os-x-1011.

If you are interesting in jekyll, you can see the jekyll source code at https://github.com/jekyll/jekyll.

jekyll logo

2. Copy theme code

You can clone, download or fork this repo.

3. Change parameter

Mainly change the parameters at file _config.yml and use your own favicon.ico.

Basic info

Shows at site header part.

# Site settings
title: HyG
brief-intro: Front-end Dev Engineer
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://gaohaoyang.github.io" # the base hostname & protocol for your site

Link info

Mainly shows at the footer of the site.

# other links
twitter_username: gaohaoyang126
facebook_username: gaohaoyang.water
github_username:  Gaohaoyang
email: gaohaoyang126@126.com
weibo_username: 3115521wh
zhihu_username: gaohaoyang
linkedIn_username: gaohaoyang
dribbble_username:

description_footer: 祉霈啣蝡臭瘝輸憌荔

Comments info

Get your own short_name:

Visit https://disqus.com/ or http://duoshuo.com/. And follow the prompts at the site.

# comments
# two ways to comment, only choose one, and use your own short name
duoshuo_shortname: #hygblog
disqus_shortname: xxxx

When you done, you can also see the comments info at disqus or duoshuo admin console.

Statistical analysis info

Get Google Analytics id or Baidu Statistics id嚗

Visit https://www.google.com/analytics/ or http://tongji.baidu.com/. And follow the prompts at the site.

Of course, if you don't want any statistical and analysis info, you can type nothing at id position.

# statistic analysis 蝏霈∩誨
# 曉漲蝏霈 id嚗撠蝏霈∩誨踵V蛹芸楛曉漲蝏霈【d嚗
# hm.src = "//hm.baidu.com/hm.js?xxxxxxxxxxxx";
# xxxxx摮蝚虫葡
baidu_tongji_id: cf850xxxxxxxxxxxxxxxx
google_analytics_id: UA-7xxxxxx-4 # google 餈質葵id

When you done, you can see UV, PV, location etc. info at your own Google Analytics or Baidu Statistic console.

4. Write post

You can write posts at folder _posts. At the beginning of the post, you should declare layouttitledatecategoriestagsauthor(optional) info.

---
layout: post
title:  "撖寡銝 jekyll 摰V蜓憸寧"
date:   2016-03-12 11:40:18 +0800
categories: jekyll
tags: jekyll 蝡臬 markdown Foxit RubyGems HTML CSS
author: Haoyang Gao
---

These follow code is for making contents.

* content
{:toc}

You can use 4 wraps as a excerpt separator. The words before separator as excerpt show in the index page. When you enter the post page, you can read full article.

The wraps config is in the file _config.yml, as follows:

# excerpt
excerpt_separator: "\n\n\n\n"

You should use markdown syntax to write article, just like write readme in github.

You can use 3 ``` to write code block.

5. Local launch

use command:

jekyll s

Terminal shows:

Configuration file: E:/GitWorkSpace/blog/_config.yml
            Source: E:/GitWorkSpace/blog
       Destination: E:/GitWorkSpace/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
                    done in 6.33 seconds.
  Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
 Auto-regeneration: enabled for 'E:/GitWorkSpace/blog'
Configuration file: E:/GitWorkSpace/blog/_config.yml
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

Visit localhost:4000 to see your blog!!!

6. Push to GitHub

If there is nothing wrong, push code to your github!

Donate

You can also donate me for a coffee, and I'll do better. Thanks.

PayPal Wechat Pay Alipay
PayPal
Donate via PayPal
wechat alipay

Thanks these friends!!!

  • 2017.01.15 received Wechat user 瞼6.66
  • 2016.12.17 received HitNoah 瞼12.00
  • 2016.12.09 received 瞼6.60
  • 2016.11.25 received Wechat user 瞼6.66
  • 2016.11.16 received Wechat user 瞼1.00
  • 2016.10.24 received 憟撜 瞼6.66
  • 2016.10.21 received 剖遠 瞼10.00
  • 2016.09.25 received 瞼6.66
  • 2016.08.25 received Erlend Aakre $2.50
  • 2016.08.10 received Wechat user 瞼4.40
  • 2016.07.25 received 喳 瞼6.66
  • 2016.07.11 received 敶阡 瞼6.66
  • 2016.07.07 received Klci 瞼2.50
  • 2016.05.08 received 1057 瞼10.57
  • 2016.05.07 received 湔 瞼2
  • 2016.04.29 received 敶 瞼10
  • 2016.04.28 received 擳璆訛Brian 瞼2
  • 2016.04.28 received 敶 瞼8.8

Update Log

2016.6.20

  • [+] Add next post and previous post link in post page.
  • [^] Change the sort of font-family to avoid full-width half-width characters mistake.
  • [^] Fix bug in tags cloud when division by zero. #26, #28, #30

2016.5.11 v2.0.1

  • [^] Optimized code, Extracting common code to comments.html
  • [+] Add Google Analysis and Baidu Statistics
  • [+] Update README, add usage
  • [+] Add favicon.ico
  • [^] Fix bug at contents
  • [^] Change the content scroll bar CSS style嚗Only for webkit browser kernel嚗
  • [^] Change tag a color at demo page
  • [+] Add busuanzi counter, show the views count at footer
  • [+] Add back to top button

2016.4.27 v2.0.0

  • [^] Rewrite all codes based on jekyll 3.1.2
  • [+] Add excerpt at index page
  • [+] Add recently post, categories and tags cloud at index page
  • [+] Add light shadow at navbar
  • [+] Add archives, categories, tags page
  • [+] Add collections page
  • [+] Add comments plugin with disqus or duoshuo
  • [+] Mobile Adaptation
  • [+] Fix post contents to the right side while scrolling page
  • [+] Fix footer at the bottom when page height is smaller than window height
  • [^] Use github flavored markdown to write code block(Fenced code blocks)
  • [^] Rewrite the demo page with Masonry
  • [-] Remove jQuery and BootStrap

About my old blog theme, I won't maintain any more. And I put the code at Gaohaoyang/old-blog.

License

MIT License