Building Personal Blog Based on Github Pages+Jeykll

Keywords: github git Mac Windows

Building Personal Blog Based on Github Pages+Jeykll

Prerequisite skills and environmental requirements:

Preface

  • Building a personal home page requires at least the purchase of domain name and server space.
  • Building a blog site involves a series of server configurations and complex article management
  • Github Pages is a good choice to solve the above problems.

What are Github Pages?

  • GitHub Pages Introduction to official website

    It is a static web page hosted on Github and can be generated directly from the code in the Github repository (showing the project home page).

  • Advantages of Github Pages

    • Use free username.github.io as domain name (or bind your own domain name)
    • No need to build a server, 300 MB free space per station
    • Lightweight blog system, trouble-free configuration

  • Quick Establishment of Github Pages Personal Home Page

    • Create a warehouse The warehouse is named username.github.io

    • Clone the warehouse, create a new index.html, write the content of your home page, and submit it it.

      # Clone warehouse

git clone https://github.com/username/username.github.io


# Write to index.html

cd username.github.io
echo "Welcome!" > index.html


# Submission code

git add --all
git commit -m "first commit"
git push origin master

    • Access Home Domain Name
      http://username.github.io.

  • You can add your own css and js directly.

    • For example, create a new folder css and a new mystyle.css under the css folder

      body{
      margin: 0 auto;
      width: 70%;
      }
    • Introduce styles (relative paths) into index.html 
       <!doctype html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" type="text/css" href="css/mystyle.css">
     <title>Document</title>
 </head>
 <body>
   Welcome! This my Github Pages Home!
 </body>
 </html>

  • So what is the principle behind Github Pages?

    • Is it just a simple HTML+CSS+JS rendering? The answer is:

No

  • One of the answers: It actually converts Web source code to generate static files through Jekyll (pronunciation /'d i k l /,'Jackel'), which follows the Jekyll specification.
    (also) Hexo,Octopress And so on.
  • Github Pages recommends Jekyll

Jekyll Introduction to Basic Structure

  • Basic use of Jekyll 
jekyll build
# => The contents of the current folder will be generated into the. / site folder.

jekyll serve
# => A development server will run at http://localhost:4000/

.
├── _config.yml   
|   
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2017-03-09-chenfucaijun.md
|   └── 2017-03-10-zhangsanlisi.md
|   
├── _site
└── index.html

  • These directory structures Effect:

    • _ config.yml: Save To configure Data.
    • _ include: Used to save some code for reuse by other files. For example, use this Liquid tag infrastructure
      {% include head.html%} to include the file _include/head. html.
    • _ Laouts: Laouts: A template wrapped outside the article. The layout can be YAML head The information is selected according to different articles.
    • _ Poss: Here's your blog post. Must conform to: YEAR-MONTH-DAY-title.MAKEUP format, suffix name is md and other markup language
    • _ site: Once Jekyll completes the transformation, the generated page is placed here (default). It's better to put this directory in your. gitignore file.
    • Index. html: The entry file at Jekyll startup and other entries can be specified through the YAML header

  • Liquid Introduction

    • Tag tag: Used to execute commands or processing formats: {% command%}

      {% if user.name == 'tom' %}
    Hey Elvis
{% endif %}

    • Objects tag: Used to output content: {% a pair of percentage marks in angular brackets}

      {site.title} <! - Output: Title of the Web Site - >
    • Filter For formatting the output, for Objects Tags

      <! - The title of the website will be capitalized.
      {{ site.title | upcase }}

  • Between the three dotted lines of the two lines, you can set some predefined variables, or even create a variable of your own definition.

  • These variables can be accessed by using Liquid tags in subsequent files and in any template or in the template containing these pages or blogs.

    <hr />

<!-- Means that the document uses layout Medium default.html Layout template -->
layout: default
title: Blogging Like a Hacker
<hr />

  • It's boring to read documents. Now let's get started and write a blog website through Jekyll.

    • If you install the Jekyll environment, you can view the web page in real time.
    • It doesn't matter if Jekyll is not installed, as long as the grammar is correct and submitted to the github.io repository, you can also view the web page in real time.

Example: Use Jekyll Build a blog

  • Reuse home page code using Jekyll's template

    • First, the basic directory structure of Jekyll is constructed.
      • Previously, index.html and css/mystle.css have been created.
        Now create folders and other files as follows 
        .
├── _includes
|   └── head.html
├── _layouts
|   ├── default.html
├── _pages
|   ├── about.md
├── _posts
|   ├── 2017-03-09-chenfucaijun.md
|   └── 2017-03-10-zhangsanlisi.md
├── css
|   ├── mystyle.css
|── _config.yml   
|── Gemfile
|── index.html

  • We modified Gemfile and _config.yml as follows

    • Gemfile: Specifies all dependencies on which Github Pages are installed to run the Jekyll program

      source 'https://rubygems.org'
gem 'github-pages', :group => :jekyll_plugins

    • _ config. yml: Some global aspects of Jekyll

      title: Chen Fu
baseurl:  # Subpaths of your website's home page, such as: / blog
url:  # Domain name of your website

  • _ include / head. HTML reads as follows

    <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>document</title> 
       <!--append Filter:Add content after the string e.g.{{'bar'|append: 'foo'}}#=> 'barfoo'-->

      <link rel="stylesheet" href="{{ site.baseurl| append: "/css/mystyle.css"}}">
</head>

  • _ The contents of layouts/default.html are as follows:

<!doctype html>
<html lang="en">

<!--include Direct inclusion_include/head.html Code-->
{% include head.html%}  
<body>

<div class="page-content">
    <div class="wrapper">
        <!--content Define Variable Contents in Templates,Referencers add content-->
        {{ content }}
    </div>    
</div>
</body>
</html>
  • The contents in index.html are as follows
---
layout: default  
title: index
---
<!--layout Specify which template to refer to-->
<!--The following will be added{{content}}Location-->
<h1>Welcome to my home page! I am </h1>
<p>This moment nap, you will have a dream. But this moment study, you will interpret a dream. Sleep now, you will dream; study now, you will realize your dream.  　　
</p>
  • Run Jekyll instructions locally, preview or submit them directly to Github Preview
    # Mac or Linux
    bundle exec jekyll serve 

    # Windows enters the process directory
    jekyll build
    jekyll serve

    Local access `http://127.0.0.1:4000
    Upload Github Pages and visit http://username.github.io/
  • Add the personal homepage method 1:_pages/about.md file as follows
    • permalink: Specify a permanent link to this page. There is a hole! 
---
layout: default
title: About
permalink: /about/                       
---
About Me
  • Add Personal Home Page Method 2: Create a new / about/index.md in the root directory without permalink: / about / and Jekyll will automatically find index.html in / about /
├── about     
|   └── index.md
  • After jekyll runs, local access to http://127.0.0.1:4000/about/

  • Upload Github Pages and visit http://username.github.io/about/

  • Note: _pages to add pages, you must set _config.yml as follows:

include:
  - _pages #Mandatory inclusion of certain files, folders during conversion
  • Add navigation code block: _include/header.html
      *
<header class="site-header header-nav">
    <nav class="site-nav">

        <div class="trigger">
            <!--site.baseurl Relative path-->
            <a href="{{site.baseurl | append: '/'}}">Index</a>
            <a href="{{site.baseurl | append: '/about/'}}">About</a>
            <a href="{{ site.baseurl | append: '/blog/'}}">Blog</a>
        </div>
    </nav>

    <!--Head portrait-->
    <div class="wrapper">
        <div class="author">
            <a href="{{ site.baseurl | append: '/' }}">
                <amp-img class="avatar avatar i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-layout" src="{{ site.baseurl | append:'/assets/photo.png'}}" width="90" height="90"
                         layout="responsive" alt="{{ site.title }}">
                    <i-amphtml-sizer style="display: block; padding-top: 100%;"></i-amphtml-sizer>
                    <img alt="Emping" class="i-amphtml-fill-content -amp-fill-content i-amphtml-replaced-content -amp-replaced-content" src="{{ site.baseurl | append:'/assets/photo.png'}}">
                </amp-img>
                <h1 class="name">{{ site.title }}</h1>
            </a>
            <h2 class="description">{{site.description}}</h2>
        </div>
    </div>
</header>
  • Refer to the navigation code block in _layouts/default.html:
   <!doctype html>
   <html lang="en">
   <!--include Direct inclusion_include/head.html Code-->
   {% include head.html%}
   <body>
    <!--Reference navigation code block-->
   {% include header.html %}
   <div class="page-content">
       <div class="wrapper">
           <!--content Define Variable Contents in Templates,Referencers add content-->
           {{ content }}
      </div>
   </div>

   </body>
   </html>
  • Add the blog home page, add / blog/index.html, 
---
layout: default 
title: blog 
--- 
<h1>This is the blog homepage.</h1> 
<h2>Unpaginated Blogs</h2>
 {% for post in site.posts %}
    <a href="{{ site.baseurl|append: post.url}}">{{post.title}}</a>
 {% endfor %}


 <h2>Paging Blog,Two pages per page</h2>
 {% for post in paginator.posts%}
    <a href="{{ site.baseurl|append: post.url}}">{{post.title}}</a>
 {% endfor %}

 {% if paginator.total_pages>1 %}

     {% if paginator.next_page_path %}
        <a href="{{site.baseurl|append:paginator.next_page_path}}">next page</a>
     {% endif %}

     {% if paginator.previous_page_path %}
        <a href="{{site.baseurl|append:paginator.previous_page_path}}">Previous page</a>
     {% endif %}

 {% endif %}
 ```
  • Set the display style _layouts/post.html for each blog post, as follows

layout: default

---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
    <div class="post-content" itemprop="articleBody">
        {{ content }}
    </div>
</article>
  • Add a few blogs below. The naming rule must be "YYYY-MM-DD-name.MAKEUP"
 ├── _posts                           
 |   ├── 2017-03-09-chenfucaijun.md    
 |   └── 2017-03-10-zhangsanlisi.md
  • For example, the content of the 2017-03-09-chenfucaijun.md blog is as follows: duplicate several more articles, modify the date
---
layout: post
title:  "Chen Fucai Jun's Blog:Jekyll Basic introduction"
date:   2017-03-09 10:59:21 +0800
---



   You'll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run ` bundle exec jekyll serve
   `, which launches a web server and auto-regenerates your site when a file is updated.

   To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.md` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works.

   Jekyll also offers powerful support for code snippets:


   {% highlight ruby %}
   def print_hi(name)
     puts "Hi, #{name}"
   end
   print_hi('Tom')
   #=> prints 'Hi, Tom' to STDOUT.
   {% endhighlight %}

   Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].

   [jekyll-docs]: http://jekyllrb.com/docs/home
   [jekyll-gh]:   https://github.com/jekyll/jekyll
   [jekyll-talk]: https://talk.jekyllrb.com/

  • Execution once, preview effect, without style, should be like this.

  • The basic blog website has been built. Now let's quote the style to make it more beautiful.

  • Jekyll supports parsing sass directly to render styles, which must be placed in _sass!

    • Create a new _sass folder and put it in the one I'm ready to implement Two documents :_img.scss and main.scss

  • Modify css/mystyle.css to css/mystyle.scss, as follows:

     ---
     ---    
     @import "main";

     html {
       height: 100%;
     }     
     body {
       display: flex;
  • Other resource files, such as avatar files, are placed in / assets/photo.png
  • The gitignore file specifies the files that need to be ignored, as follows:
_site
.sass-cache
Gemfile.lock
*.gem
.idea/
  • So far, a homepage of a blog that doesn't look so ugly has been built.

Github Pages binds your own domain name

  • First you have to have a domain name, for example, my domain name is chenlei.xyz

  • Then you need to create a new CNAME file in your directory and fill in the domain name.

chenlei.xyz
192.30.252.153
192.30.252.154

  • My domain name is bought through Aliyun, which provides cloud resolution directly.

    • The parsing settings are as follows (record type A, host record @ (meaning no www), record value 192.30.252.153 or 192.30.252.154):

  • Once set up, access to http://chenfucaijun.github.io. redirects to http://chenlei.xyz

GET list:

  • Build your own home page using Githhub Pages
  • Build Jekyll's local running environment, run and debug Jekyll project, and introduce Gemfile third-party library
  • Grasp Jekyll's Basic Grammar and Use Method
    • Github Pages directory structure following Jekyll specification
    • Jekyll's YAML headers, global variables, configuration files, new pages, blogging and paging
    • Jekyll refers to resources such as styles (css,scss,js), pictures, etc.
  • Bind your own domain name to Github Pages

Thanks for watching!

Posted by MrTL on Thu, 18 Apr 2019 17:00:33 -0700

Hot Keywords

©2024 Programmer Group