JimQing's Blog


View JimQing's projecton GitHub

初建GitHub博客

17 Mar 2019

初建 github 博客,并使用 jekyll 美化,算是一段比较复杂的过程。

以下我来回顾一下我的过程

第一部分: Github Pages

首先你需要有个 [repository] 命名为 [你的博客名]

并在此上传一个 html 文件到你的仓库 ( master 分支)

#index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        h1{
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <h1>Hello Github</h1>   
</body>
</html>

进入你新建的博客中,选中菜单中的 Settings

接着下滑找到我们的GitHub Page,使其作为页面展示,选中master分支就好

接着访问图中对应的链接 https://[用户名].github.io/[仓库名]]/

即可看到效果。

第二部分 安装 Jekyll

想要安装 Jekyll 需要安装 Python Ruby 以及 nodeJs.

安装完上述环境并置入环境变量后,检查 ruby

ruby -v
# 对应版本号
gem -v
# 对应版本号

由于 gem 在大陆使用是会被墙的,如果没有科学上网,可以选择镜像

gem sources
#查看源
gem sources -r https://rubygems.org/
#删除默认源
gem sources -a https://gems.ruby-china.com
#更换为镜像源
gem sources -u
#更新源的缓存

如果显示正常,我们就完成了对应的环境安装,安装 Jekyll

gem install jekyll

接着我们去 jekyllthemes 选一个喜欢的主题

并下载解压,通过 gem 安装 bundle

gem install bundle
#安装 bundle
bundle -v
#对应版本号
bundle install
#安装依赖

运行之前,打开 _config.yml 进行简单的配置,其中很重要的一点是 baseurl 需改成”/[repository]” 否则上传到线上之后会出现样式丢失!

# Setup
name:         Blog
tagline:      A responsive theme for your project on GitHub Pages
baseurl:      "/Blog"
locale:       "en"
email:        jimqing@yeah.net

# Gems
gems:
  - jekyll-paginate

# Others
markdown: kramdown

# See change before re-build

准备好了一切之后,运行!

bundle exec jekyll serve -w
#运行!!
#-w 表示实时检查改动,可以边书写博客一边查看效果

运行成功,可在 http://127.0.0.1:4000/ 查看效果

编写完成后,通过 jekyll 打包

bundle exec jekyll build
#打包完成!

打包后,会生成对应的文件在 _site下,将_site的内容复制到到你的 [repository] 目录下,push !

完成后即可在 https://[用户名].github.io/[仓库名]]/ 下查看你的博客。

Tips:

在更换源之后如果依旧下载异常,检查下载主题目录下是否有 Gemfile 文件,更换其中的source 即可

# A sample Gemfile
source "http://gems.ruby-china.com/"
gemspec

gem 'jekyll'
gem 'jekyll-paginate'
gem 'kramdown'
gem 'pygments.rb'

在执行 install 的时候需要检查你的主题的文件 jekyll-[主题名]-theme.gemspec 对应的版本是否与你的安装版本相同,否则会 install 报错

spec.add_development_dependency "jekyll", "~> 3.2"
spec.add_development_dependency "bundler", "2.0.1"
spec.add_development_dependency "rake", "~> 10.0"

至此,希望此博客能对你有所帮助。