As a technologist, you should have a blog site of your own. This is your business card!

Out of the box, fork the repository and change the MD files to your own articles, so you can have your own blog site

Check out the blog here at 👆

use

  • start
    • The environment
    • start
    • Writing blog posts
  • component
    • The sidebar
    • Mini About me
    • Recommend tags
    • Friend link
    • HTML5 demo document layout
  • Comments with Google/Baidu Analytics
    • comments
    • Web analytics
  • Senior part
    • The custom
    • The title for reproduction
    • Search for show caption-header files

The environment

If you have Jekyll installed, just type Jekyll serve or Jekyll s on the command line to preview the theme in your local browser by typing http://127.0.0.1:4000/, and the changes to the theme are displayed in real time (requiring a swipe of the browser).

start

You can easily start building your own blog by modifying the _config.yml file:

# # Site Settings title: BY Blog your Blog title SEOTitle: GanKai Blog | GK Blog # SEO title description: # SNS Settings Github_username: GitHubGanKai # Your Github account jianshu_username: 4365773D2DD5 # Your simple book ID. # Build Settings # paginate: 10 # You are going to put several articles on a pageCopy the code

Jekyll official website also has a lot of parameters can be adjusted, such as setting the link form of articles… Official Site Jekyll Official Site Jekyll Official Site

Writing blog posts

Posts are usually placed in Markdown format at _posts/, and you can immediately see how this is done by looking at the posts in this template.

The YAML header looks like this:

Date: 2019-1-27 12:03:16 author: Gankai header-img: Img /post-bg-ios9-web.jpg Catalog: True Tags: - git - Functional Programming - Open source framework --Copy the code

The sidebar

Look to the right:

The Settings are Sidebar Settings in the _config.yml file.

# Sidebar Settings Sidebar: true # add Sidebar -about-description: "briefly describe yourself" : /img/avatar-by.jpg # Your big picture, please use absolute address. Note: Names are case sensitive! And the suffixCopy the code

The sidebar is responsive and moves to the bottom when the screen size is less than 992px. See bootstrap Grid system v3.bootcss.com/css/ for details

Mini About Me

The mini-About-Me module will display all of your social media accounts under your profile picture. This is also a responsive layout that moves to the bottom of the page when the screen becomes smaller, but with a slight change, see the code.

Featured Tags

I saw that the recommendation tag of Medium was very cool, so I added it. This module is now standalone and can be displayed on all pages, including the home page and at the top of the title of every published article.

# Featured Tags
featured-tags: true  
featured-condition-size: 1     # A tag will be featured if the size of it is more than this condition value
Copy the code

The only thing to note is featured-condition-size: If the size of a tag, that is, the number of articles that use the tag, is greater than the condition value set above, the tag will be recommended on the home page.

{% if tag[1]. Size > {{site. Featured -condition-size}} %}

Social-media Account

Social accounts entered below will not be displayed in the sidebar. New joined Jane books links, www.jianshu.com/u/4365773d2…

# SNS settings
RSS: false
jianshu_username: 	jianshu_id
zhihu_username:     username
facebook_username:  username
github_username:    username
# weibo_username:   username
Copy the code

Friends

Friends links section. This will be displayed on all pages.

The Settings are in the “Friends” section of the _config.yml file.

# Friends
friends: [
    {
        title: "GK Blog",
        href: "https://github.com/GitHubGanKai/blog"
    },
    {
        title: "Apple",
        href: "https://apple.com/"
    }
]
Copy the code

Keynote Layout

HTML5 slide layout:

This section is used to occupy THE HTML format of the Slides, usually used in Reveal. Js, Impress. Js, Slides, Prezi, etc. How can a modern blog be without the ability to display HTML slideshows

The main principle is to add an iframe and add external links to it. You can write directly to the header file, as shown below.

---
layout:     keynote
iframe:     "http://huangxuan.me/js-module-7day/"
---
Copy the code

Iframe is automatically resized on different devices. The inside margin is reserved so that mobile users can swipe down and add more content.

Comment

Blog not only supports Disqus comment system, but also joined Gitalk comment system, support Markdwon syntax, cool~

Disqus

Advantages: international popular, the interface is also very atmospheric, simple, if someone comments, but also real-time notification, directly reply to the notification of the mail on the line;

Cons: You have to sign up for a Disqus account to comment, sharing is generally Facebook and Twitter only, and loading within walls is a bit slower. If you want to see what it looks like, you can look at the previous version and you can see it at the bottom here.

Node: A lot of people are saying that the Disqus plugin doesn’t load, maybe the wall is high again, if possible, you can turn over the wall

Use:

First, you need to sign up for a Disqus account. Don’t just use mine!

Second, you just need to set it up in the yamL header file below.

# Disqus (https://disqus.com/) disqus_username: qiubaiyingCopy the code

Gitalk

Advantages: the interface is clean and simple, using Github Issue API to do the comment plug-in, using Github account to log in and comment, favorite support Markdown syntax, for programmers is really cool.

Disadvantages: Cumbersome configuration, each article comments need to be initialized.

Use:

See this article by Qiubaiying: Add Gitalk comment plugin to your blog

Analytics

Site Analytics now supports Baidu statistics and Google Analytics. You need to go to the official website to register and post the returned code below:

# Baidu Analytics ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900 # Google Analytics ga_track_id: 'UA-49627206-1' # You will be given such id ga_domain: huangXuan. Me # The default is Auto, here I am a customized domain name, if you don't have your own domain name, you need to change it to auto.Copy the code

Customization

If you like to mess around, you can customize the template Code.

If you can understand_include/ å’Œ _layouts/With the code in the folder (here’s where the entire interface is laid out), you can use the template engine that Jekyll usesLiquidSyntax directly modified/added code for more creative custom interface!

Header Image

The background image for each page of the blog title is optional. Check out a few sample posts to see how to set it up.

The selection of the title is entirely up to the individual aesthetic. Each article can have a different base map, you can put what you want to put, the last width should be enough, the size is not too big, otherwise the load slow ah.

The best way to compress your uploaded images is to use imageOptim to get your blog off the ground.

Note that the title of this template is white, so the background color should be gray or black, or dark. Of course, you can also customize the font color, in short, github Pages is a full customization of your blog.

SEO Title

My Blog Title is “GK Blog” but I want to show when the search “gankai Blog | GK Blog”, this will need to SEO Title to define.

In fact, this SEO Title is to define the Title of the things inside and say more about the share of the Title, you can modify.

About receiving “Page Build Warning” Email

Due to jekyll’s upgrade to 3.0.x, the original Pyway code highlighting is no longer supported and only -rouge is now supported, so you will need to modify highlighter: rouge in the _config.yml file. You also need to gems: [Jekyll-paginate] in the _config.yml file.

In the meantime, you’ll need to update your local Jekyll environment.

Students using Jekyll Server need to:

  1. gem update jekyll# update jekyll
  2. gem update github-pagesUpdate dependent packages

If you use The bundle exec Jekyll Server, you will need to type bundle Update to update the dependent packages.

Note: You can use the jekyll -s command to configure the blog locally in real time to improve efficiency. See Jekyll.com

Using jekyll with pages & Upgrading from 2.x to 3.x

Thank you

  1. This template is from qiubaiying fork here, thanks to the author.
  2. Thanks to Jekyll, Github Pages and Bootstrap!
  3. The blog building tutorial is modified from Qiubaiying

More detailed tutorials can be found in GitHub Pages or wiki

License

Follow MIT license. For details, see LICENSE.