Jekyll theme for elegant writers.

_{Build a Jekyll blog ❤︎} ｜ _{Demo site} ｜_中文文档

---

---

Install

git clone git@github.com:vanhiupun/Vanhiupun.github.io.git

Setting up the environment

1. You will need Ruby and Bundler to use Jekyll. Follow the use of Jekyll and Bundler to meet environmental requirements. ​
2. To set up your environment to develop this theme, please run bundle install . ​
3. To test your theme, please run bundle exec jekyll serve and open your browser http://localhost:4000

This will start the Jekyll server with your theme.

Test your subject content by adding pages, documents, data, etc. as usual. When you make changes to the theme and content, your site will be regenerated, and you should see the changes in your browser after refreshing

When your theme is released, only the files _data , _layouts , _includes , _sass and assets using Git tracking will be bundled together.

To add a custom catalog to your theme gems, edit the regular expression jekyll-theme-yat.gemspec accordingly .

Start

You can modify the _config.yml file in general to easily start building your own blog:

title: Vanhiupun blog # Your blog site title

email: fanxiaobin422@gamil.com # Your email

author: Vanhiupun # Your name

baseurl: "" # The sub-path of the website, eg /blog

url: "" # The base host name and protocol of the site, eg http://example.com

favicon: "/favicon.png" # Use absolute path for website icon eg /favicon.png, not recommended./favicon.png

# Paging settings
paginate: 5 #Display 5 articles on the homepage

# Extract size setting
excerpt_size: 250 #The word count of the homepage article is displayed as 250 words

Write a blog post

Posts to be published are generally placed here in Markdown format _posts/ , you only need to look at the posts in this template and you will immediately understand how to set them.

---
layout: post #Layout
title: Scientific Internet Guide (2): Line Differences and Choices #Title
categories: Science on the Internet#Categories
banner:
  image: https://vanhiupun.github.io/assets/images/banners/jichang.jpeg #The image address can also be used./assets/images/banners/jichang.jpeg
  opacity: 0.618 #opacity
  background: "#000" #Background color
  height: "50vh" #height
  min_height: "50vh" #Width
  heading_style: "font-size: 4.25em; font-weight: bold; "#heading style
  subheading_style: "color: gold" #Subheading style
tags: [Airport Guide] #tag
---

Header Image

You can choose the base map of the title of each page of the blog. Just look at a few sample posts and you will know how to set it.

The choice of the title base map is entirely based on personal aesthetics. Each article can have a different base map, you can put whatever you want, the final width should be enough, the size should not be too big, otherwise the loading will be slow.

The uploaded pictures are best compressed first. ImageOptim image compression software is recommended here to make your blog take off.

But it should be noted that the title of this template is white , so the background color should be set to gray or black . In short, the dark color is right. Of course, you can also customize and modify the font color. In short, using github pages is to completely customize your own blog.

Customization

If you like toss, you can customize the code of this template.

If you can understand _include / and _layouts / Code folder (this is where the entire interface layout), you can use Jekyll use template engine Liquid syntax directly modify / add Code, let's make a more creative custom interface! ​

Disqus comments

It’s more popular internationally, and the interface is very elegant and concise. If someone comments, you can notify you in real time. Just reply to the notification email. You need to register for a Disqus account . Just replace my account with yours

# Disqus comments
disqus:
  shortname: "vanhiupun" #Register an account in disqus and change this to your own account

Analytics

Website analysis, now supports Google Analytics . You need to go to the official website to register, and then paste the returned code below:

# Google Analytics
google_analytics: "UA-212989441-1" # If you register one with your Google account, you will be given an id like this, just replace this

contribute

If you are interested in this project, you can contribute in any of the following areas:

• Star this project
• You can open an issue, if you want to solve the problem, we will start from there.
• Use tests, report errors, or send requests or requests.
• If your English is very good, please help me write the document.

Thanks

This template is Fork from jeffreytse , thanks to the author 👍

License

Follow the MIT license. For details, please refer to LICENSE .

related resources

Demo Site

Build Jekyll Blog

Jekyll detailed construction process