1. 程式人生 > >Github pages+jekyll寫部落格+域名繫結

Github pages+jekyll寫部落格+域名繫結

安裝jekyll

安裝jekyll前先按照依賴包bundler,下述命令即可安裝

$ gem install bundler

之後,直接可以通過下述命令安裝jekyll

$ gem install jekyll

直到出現下面資訊,則安裝成功了。

Done installing documentation for public_suffix, addressable, colorator, http_parser.rb, eventmachine, em-websocket, rb-fsevent, ffi, rb-inotify, sass-listen, sass, jekyll-sass-converter, ruby_dep, listen, jekyll-watch, kramdown, liquid, mercenary, forwardable-extended, pathutil, rouge, safe_yaml, jekyll after 41 seconds
23 gems installed

使用jekyll

執行下面命令建立部落格

$ jekyll new blog

我生成的目錄位置是:/Users/coach/blog

進入myblog目錄

& cd /Users/coach/blog

目錄結構如下

├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2017-08-01-welcome-to-jekyll.markdown
├── _sass | ├── _base.scss | ├── _layout.scss | └── _syntax-highlighting.scss ├── about.md ├── css | └── main.scss ├── feed.xml └── index.html

在命令列中執行

$ bundle install

命令會根據當前目錄下的Gemfile,安裝所需要的所有軟體。這一步所安裝的東西,可以說跟github本身的環境是完全一致的,所以可以確保本地如果沒有錯誤,上傳後也不會有錯誤。而且可以在將來使用下面命令,隨時更新環境,十分方便

$ 
bundle update

使用下面命令,啟動轉化和本地服務:

$ bundle exec jekyll serve

啟動成功後,生成

Configuration file: /Users/coach/blog/_config.yml
            Source: /Users/coach/blog
       Destination: /Users/coach/blog/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
                    done in 0.586 seconds.
RubyDep: WARNING: Your Ruby is outdated/buggy.
RubyDep: WARNING: Your Ruby is: 2.3.0 (buggy). Recommendation: upgrade to 2.3.1.
RubyDep: WARNING: (To disable warnings, see:http://github.com/e2/ruby_dep/wiki/Disabling-warnings )
 Auto-regeneration: enabled for '/Users/coach/blog'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

繫結域名

之前我們是通過leecoach.github.io 來訪問個人部落格主頁,現在我們可以通過自己設定的域名去訪問我們的主頁,首頁我們得有個域名

購買域名

我的域名是在阿里去的萬網 上購買的,你可以根據自己的喜好去購買,比如百度雲。

設定域名解析

在萬網中找到雲解析,設定域名解析

填寫解析,這裡為了繫結blog,這個根據自己需要設定
這裡寫圖片描述

記錄值為倉庫名
這裡寫圖片描述

前兩項是Github Pages繫結域名教程裡提示新增的;
這裡寫圖片描述

在倉庫裡新增CNAME檔案完成繫結

這裡寫圖片描述

在倉庫裡新增一個檔案,命名為 CNAME,檔名大寫且沒有後綴;檔案裡填寫要繫結的域名且不要包含Http://和www
這裡寫圖片描述

進入設定,可以看下如下
這裡寫圖片描述

編寫部落格文章

所有的文章都是 _posts 目錄下面,文章格式為 mardown 格式,文章檔名可以是 .mardown 或者 .md。

編寫一篇新文章很簡單,你可以直接從 _posts/ 目錄下複製一份出來 2018-03-20-welcome-to-jekyll.mardown,只需要在此資料夾中加入帶有 YAML 頭資訊的 markdown 檔案,然後 push 到 Github,就會被自動渲染成 HTML。

帶有 YAML 頭資訊如下:

---
layout: post
title: 這裡是題目
tags:
- 標籤1
- 標籤2
categories: 分類
description: 描述。
---

編寫完成執行下面命令

$ bundle exec jekyll serve

然後在網頁開啟http://127.0.0.1:4000/ 就可以看到效果了。

更換主題

這裡有很多主題模板可以參考 Jekyll Themes,可以從上面fork到自己的倉庫中,然後close下來複制到自己的部落格資料夾當中。 接下來,也是很重要的一點,因為克隆了別人的模板,所以在_config.yml檔案中修改相應的資訊,將模板變成自己的,可以參考一下我的_config.yml檔案,裡面有相應的註釋,這裡是我的主題倉庫。

cd到自己的部落格目錄下執行

& bundle install

執行,本地檢視

$ bundle exec jekyll server

後續慢慢完善……