基於Github Pages+Jeykll 搭建個人博客

前提技能及環境要求:

會基本的Github操作(克隆,提交等)
每人電腦中配置好Jekyll環境
- Linux安裝Jekyll環境
  在 Ubuntu 14.04 安裝 Jekyll 3
- Mac安裝Jekyll環境
  Install Jekyll on Mac
- Windows安裝Jekyll環境
  Windows下安裝Jekyll環境

前言

搭建個人主頁至少需要購買域名、服務器空間
搭建一個博客網站,涉及一系列的服務器配置,複雜的文章管理
解決以上問題,Github Pages是個不錯的選擇

Github Pages是什麼?

GitHub Pages官網介紹

它是託管在Github上的靜態網頁,可以直接從Github倉庫裏的代碼生成網頁(展示項目主頁)
Github Pages的優點
- 使用免費的username.github.io作爲域名(也可綁定自己域名)
- 無需自己搭建服務器,每個站300MB免費空間
- 輕量級的博客系統,無麻煩的配置

快速建立Github Pages個人主頁

創建一個倉庫,倉庫名爲username.github.io

克隆該倉庫,新建index.html,書寫個人主頁的內容,並提交


# 克隆倉庫

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


# 書寫內容至index.html

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


# 提交代碼

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

訪問主頁域名
http://username.github.io.

你可以直接加入自己的css和js,

比如:新建文件夾css,在css文件夾下新建mystyle.css
body{ margin: 0 auto; width: 70%; }

在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>

那麼Github Pages 背後的原理究竟是什麼?
- 僅僅是單純的HTML+CSS+JS的渲染嗎? 答案是:

No

答案之一:它其實是通過Jekyll（發音/’dʒiːk əl/，”傑克爾”）這種軟件進行轉換網頁源碼生成靜態文件,遵循的是Jekyll規範
(還有Hexo,Octopress等等)
Github Pages官網推薦使用Jekyll

Jekyll基本結構介紹

Jekyll的基本使用
- 命令行中Jekyll常用指令

jekyll build
# => 當前文件夾中的內容將會生成到 ./site 文件夾中。

jekyll serve
# => 一個開發服務器將會運行在 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

這些個目錄結構的作用:
- _config.yml:保存配置數據。
- _includes:用來保存一些代碼被其他文件重用。比如使用這個Liquid標籤基本結構
  {% include head.html %}來把文件 _includes/head.html 包含進來。
- _layouts:layouts:是包裹在文章外部的模板。佈局可以在 YAML頭信息中根據不同文章進行選擇。
- _posts: 這裏放的就是你的博客文章了。必須要符合: YEAR-MONTH-DAY-title.MAKEUP這樣的格式,後綴名是md等標記語言
- _site:一旦 Jekyll 完成轉換，就會將生成的頁面放在這裏（默認）。最好將這個目錄放進你的 .gitignore 文件中。
- index.html: Jekyll啓動時的入口文件,還可以通過YAML頭指定其他入口
Liquid的介紹
- Tag標籤:用於執行命令或者處理格式: {% 命令 %}
```
{% if user.name == 'tom' %}
    Hey Elvis
{% endif %}
```
- Objects標籤:用於輸出內容: {% 一對尖括號內一對百分號 %}
```
{{ site.title }} 
```
- 過濾器,用於對輸出內容做一些格式處理,用於Objects標籤
   {{ site.title | upcase }}
在這兩行的三虛線之間，你可以設置一些預定義的變量,或者甚至創建一個你自己定義的變量。
接下來的文件和任意模板中或者在包含這些頁面或博客的模板中都可以通過使用 Liquid 標籤來訪問這些變量。
```
<hr />


layout: default
title: Blogging Like a Hacker
<hr />
```
看文檔很枯燥,下面我們一起來動手,通過Jekyll寫一個博客網站
- 倘若你安裝了Jekyll環境,那麼你可以實時查看網頁情況
- 沒有安裝Jekyll也沒關係,只要語法正確,提交到github.io倉庫中,也能實時查看網頁情況

實例:使用Jekyll搭建博客

使用Jekyll的模板,重用主頁代碼

首先構造Jekyll的基本目錄結構,

之前已經創建了index.html和css/mystle.css,
現在創建文件夾及其他文件如下

.
├── _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

我們修改Gemfile和__config.yml內如下

Gemfile:指定安裝好Github Pages運行Jekyll程序的部分依賴

source 'https://rubygems.org'
ruby RUBY_VERSION
gem "jekyll-paginate"
gem "jekyll-sitemap"

_config.yml:Jekyll的一些全局設置

title: 陳府才俊
baseurl:  # 你的網站的主頁的子路徑 比如:/blog
url:  # 你的網站的域名
gems:
  - jekyll-paginate
  - jekyll-sitemap
include:
  - _pages   #轉換時強制包含某些文件、文件夾
  - blog

_includes/head.html內容如下

<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過濾器:字符串後面加上內容 e.g.{{'bar'|append: 'foo'}}#=> 'barfoo'-->

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

_layouts/default.html的內容如下:

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

<!--include 直接包含了_include/head.html的代碼-->
{% include head.html%}  
<body>

<div class="page-content">
    <div class="wrapper">
        <!--content定義模板中可變內容,引用者進行添加內容-->
        {{ content }}
    </div>    
</div>
</body>
</html>

index.html中內容如下

---
layout: default  
title: index
---
<!--layout指明引用哪個模板-->
<!--下面的內容會添加到{{content}}所在的位置-->
<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. 此刻打盹，你將做夢；而此刻學習，你將圓夢。  　　
</p>

本地運行Jekyll指令,進行預覽或者直接提交至Github預覽

    #Mac或者Linux
    bundle exec jekyll serve 

    #Windows進入到過程目錄中
    jekyll build
    jekyll serve

    本地訪問`http://127.0.0.1:4000
    上傳Github Pages後訪問http://username.github.io/

添加個人主頁方法1:_pages/about.md文件內容如下
- permalink:指定該頁面永久鏈接, 有個坑!

---
layout: default
title: About
permalink: /about/                       
---
About Me

添加個人主頁方法2:根目錄下新建/about/index.md,內容中可以沒有 permalink: /about/ ,jekyll會自動尋找/about/中的index.html

├── about     
|   └── index.md

jekyll運行後,本地訪問http://127.0.0.1:4000/about/
上傳Github Pages後訪問http://username.github.io/about/
注意:_pages中添加網頁,必須要在_config.yml設置如下:

include:
  - _pages #轉換時強制包含某些文件、文件夾

添加導航代碼塊:_includes/header.html

<header class="site-header header-nav">
    <nav class="site-nav">

        <div class="trigger">
            <!--site.baseurl相對路徑-->
            <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>

    <!--頭像-->
    <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>

在_layouts/default.html中引用導航代碼塊:

   <!doctype html>
   <html lang="en">
   <!--include 直接包含了_include/head.html的代碼-->
   {% include head.html%}
   <body>
    <!--引用導航代碼塊-->
   {% include header.html %}
   <div class="page-content">
       <div class="wrapper">
           <!--content定義模板中可變內容,引用者進行添加內容-->
           {{ content }}
      </div>
   </div>

   </body>
   </html>

添加博客首頁,添加/blog/index.html ,
- 頁面變量如site.posts

---
layout: default 
title: blog 
--- 
<h1>這是博客主頁</h1> 
<h2>未分頁的全部博客</h2>
 {% for post in site.posts %}
    <a href="{{ site.baseurl|append: post.url}}">{{post.title}}</a>
 {% endfor %}


 <h2>分頁的博客,每頁兩個</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}}">下一頁</a>
     {% endif %}

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

 {% endif %}
 ```

爲每篇博客設置顯示樣式_layouts/post.html,如下



layout: default

---
<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
    <div class="post-content" itemprop="articleBody">
        {{ content }}
    </div>
</article>

下面添加幾篇博客,命名規則必須是”YYYY-MM-DD-name.MAKEUP”

 ├── _posts                           
 |   ├── 2017-03-09-chenfucaijun.md    
 |   └── 2017-03-10-zhangsanlisi.md

比如 2017-03-09-chenfucaijun.md 博客內容如下,多複製幾篇,修改日期

---
layout: post
title:  "陳府才俊的博客:Jekyll基本介紹"
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/

執行一遍“,預覽效果,無樣式的情況下,應該是這樣的
基本的博客網站已經搭建完成,下面來引用樣式,讓他變得更美觀吧!
Jekyll支持直接解析sass來渲染樣式,必須要放在_sass中!
- 新建_sass 文件夾,放入我實現準備好的兩個文件:_img.scss和main.scss
將css/mystyle.css修改爲css/mystyle.scss,內容修改如下:

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

     html {
       height: 100%;
     }     
     body {
       display: flex;

其他一些資源文件,如頭像文件放置在了/assets/photo.png
.gitignore文件指明需要忽略的文件,內容如下:

_site
.sass-cache
Gemfile.lock
*.gem
.idea/

至此,一個看起來不是那麼醜的博客主頁搭建完畢

Github Pages綁定你自己的專屬域名

首先你要擁有一個域名,比如我的域名是chenlei.xyz
然後你需要在你的目錄下新建一個CNAME文件,填寫該域名。

chenlei.xyz

然後去找DNS服務器提供商將你的域名解析到Github Pages主頁的IP上,下面二選一

192.30.252.153
192.30.252.154

我的域名是通過阿里雲買的,直接由阿里雲提供雲解析,
- 解析設置如下(記錄類型A,主機記錄@(意指不加www),記錄值填寫192.30.252.153或者192.30.252.154):
設置完畢後,訪問http://chenfucaijun.github.io.會重定向到http://chenlei.xyz

GET清單:

使用Githhub Pages搭建自己的個人主頁
搭建Jekyll的本地運行環境,運行調試Jekyll工程,引入Gemfile第三方庫
掌握Jekyll的基本語法和使用方法
- 遵循Jekyll規範的Github Pages目錄結構
- Jekyll的YAML頭、全局變量、配置文件、新建頁面、博客撰寫和分頁
- Jekyll引用樣式(css,scss,js)、圖片等資源
綁定自己的專屬域名到GithubPages中

基於Github Pages+Jeykll 搭建個人博客

基於Github Pages+Jeykll 搭建個人博客

前提技能及環境要求:

前言

Github Pages是什麼?

No

Jekyll基本結構介紹

實例:使用Jekyll搭建博客

Github Pages綁定你自己的專屬域名

GET清單:

謝謝觀看!

[軟件工具百科] 互聯網資源歷史快照歸檔站點與數字圖書館

杭州的 IT 崩盤了麼？

程序員常見的文本查看工具

VS2022 解決方案打不開 .NET Framework 4.0 、 4.5 等老項目

Vue3 運行可以，build 打包發佈報錯，app.config.globalProperties 用法坑

既然測試也要求寫代碼，那乾脆讓開發兼任測試不就好了嗎？

ITSM落地經驗之建設藍圖規劃

PDF 補丁丁 1.0.2 版更新

奇怪！應用的日誌呢？？

SHELL+SQLLDR讀取文件更新數據至ORACLE

SparkStreaming項目實戰系列——2.分佈式日誌收集框架Flume

面試筆試算法系列之分治法

SparkStreaming項目實戰系列——1.實時流概述

LeetCode-9.Palindrome Number(求迴文數字)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結