利用 GitHub Pages + jekyll 搭建我的博客

時間 2019-11-16

標籤利用 github pages jekyll 搭建我的博客欄目 Git 简体版

原文原文鏈接

博客的搭建教程修改自 qiubaiyingcss

查看博客戳這裏 👆

使用

開始
組件
評論與 Google/Baidu Analytics
- 評論
- 網站分析

起步

博客使用 GitHub Pages + jkeyll 搭建，配置極其簡單，搭建完成僅需不到半小時。首先你須要點擊跳轉到個人倉庫，點擊右上角 fork 按鈕將此項目拉取到你的倉庫下。html

開始

├── _includes                 // 公共頁面
│   ├── footer.html           // 底部頁面 
│   ├── head.html             // 頭部頁面
│   ├── nav.html              // 導航欄頁面
├── _layouts                  // 頁面佈局
├── _posts                    // 存放博客（僅支持markdown格式）
├── css                       // css樣式
├── fonts                     // 引入字體
├── img                       // 圖片資源
├── js                        // js函數
├── less                      // less樣式
├── pwa                       // pwa配置
├── .gitignore                // git忽略文件
├── .travis.yml               // Travis CI配置文件
├── 404.html                  // 404頁面
├── CNAME                     // 域名解析文件
├── Gruntfile.js              // Gruntfile插件構建
├── LICENSE                   // 許可文件
├── README.md                 // 項目簡介
├── _config.yml               // 主配置文件
├── about.html                // '關於我'頁面
├── feed.xml                  // jekyll相關
├── index.html                // 主頁面
├── offline.xml               // 網絡離線頁面
├── package.json              // package依賴
├── sw.js                     // scoket相關
└── tags.html                 // '關鍵字'頁面
複製代碼

主要經過修改_config.yml文件配置博客內容：git

## 網站設置
# 標題
title: Blog
# 選項卡標題
SEOTitle: 周大路的博客 | SuperZhouDalu‘s Blog
# 首頁背景圖片
header-img: img/post-bg-debug.png
# 郵箱設置
email: zhoujianlu666@gmail.com
# 網站介紹
description: "I guess it comes down to a simple choice:get busy living or get busy dying."
~~~ ~~~ （內容較多，不適合所有展現，關鍵配置均有中文註釋）
複製代碼

將 _config.yml 文件中 url 修改成 https://"你的GitHub用戶名" + .github.io, 清空CNAME文件內容並提交，再將項目名稱修改成 你的GitHub用戶名 .github.io ，以下圖程序員

點擊 Rename 按鈕後，你就能夠在網頁輸入 https://"你的GitHub用戶名".github.io 查看效果了。至此已經完成了一半啦，剩餘的就是一些你專屬的配置了。github

撰寫文章

要發表的文章通常以 Markdown 的格式放在這裏 _posts/，若是你還不瞭解 Markdown 語法，能夠點擊這裏進行學習。每篇博客的標頭是固定的，如下是的配置內容：shell

---
layout:     post
title:      這是標題
subtitle:   這是子標題
date:       2019-02-26
author:     SuperZhouDalu
header-img: img/post-bg-coffee.jpeg
catalog: true
tags:    
        - 標籤
---

## 標題
### 內容
複製代碼

側邊欄

看右邊：json

關於側邊欄的設置是在 _config.yml 中：bootstrap

## 側邊欄設置
# 是否開啓側邊欄 true 開始 false 關閉
sidebar: true
# 側邊欄描述語句
sidebar-about-description: "知識就是力量。"
# 側邊欄頭像
sidebar-avatar: /img/sidebar-avatar.jpg
複製代碼

側邊欄是響應式佈局的，當屏幕尺寸小於992px的時候，側邊欄就會移動到底部。具體請見bootstrap柵格系統。bash

社交帳號

目前支持微博、知乎、GitHub、Facebook、簡書、Twitter社交帳號連接，未羅列的暫不支持，能夠本身手動集成。相關配置在 _config.yml 中：

## 社交網站設置
RSS: false
# 微博 打開我的主頁截取用戶編號 例如我的主頁網址爲https://weibo.com/u/5089298519 填寫 5089298519
weibo_username:     5089298519
# 知乎我的頁面 填寫用戶名
zhihu_username:     username
# GitHub我的頁面 填寫用戶名
github_username:    username
# facebook我的頁面 填寫用戶名
facebook_username:  username
# 簡書我的頁面截取用戶編號 與微博同理
jianshu_username:   56a2c6b6027c
# twitter我的頁面 填寫用戶名
twitter_username:   zhoudalu
複製代碼

好友連接

好友連接部分會在因此頁面展現，相關配置在 _config.yml 中：

## 友情連接
friends: [    
    {       
        title: "帥超",
        href: "https://github.com/shuaichaoA" 
    },
    {        
        title: "雞大嬸",        
        href: "https://github.com/ruinszero"    
    },
    {        
        title: "Apple",
        href: "https://apple.com"   
    },
    {        
        title: "Apple Developer",   
        href: "https://developer.apple.com/"   
    }
]
複製代碼

## Gitalk
gitalk:  
    #是否開啓Gitalk評論  
    enable: true  
    #生成的clientID 
    clientID: `Github Application clientID`
    #生成的clientSecret 
    clientSecret: `Github Application clientSecret`
    #倉庫名稱  
    repo: `GitHub倉庫名`
    #github用戶名  
    owner: `GitHub用戶名`  
    admin: `GitHub用戶名`  
    #是否啓用相似FB的陰影遮罩  
    distractionFreeMode: true
複製代碼

點開任意一篇博客就會顯示聊天框啦，隨意輸入內容進行討論吧。

網站分析

統計目前集成了百度統計和 Google Analytics 兩種方式，在相應官網綁定本身的博客網站信息後能夠拿到 track_id，而後填寫到對應的 _config.yml 中：

## 統計
# Baidu Analytics
ba_track_id: b50bf2b12b5338a1845e33832976fd68

# Google Analytics
ga_track_id: 'UA-135281137-1'
# 默認的是 auto, 這裏我是自定義了的域名，你若是沒有本身的域名，須要改爲auto
ga_domain: https://aigq.me
複製代碼