Giter VIP home page Giter VIP logo

vanhiupun.github.io's Introduction

jekyll

Jekyll theme for elegant writers.

jekyll analysis CodeFactor maintainability jekyll-theme-yat Github Blog Gmail MIT jekyll-themes Jekyll-yat /GitHub%20Sponsors

gif

gif

gif

gif


Install

git clone [email protected]: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: [email protected] # 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.