如何使用Jekyll+github搭建博客

Posted by Ray on January 12, 2018

之前用的是WordPress,懒癌患者,也没怎么写文章,前几天主机到期了,于是用了Jekyll+github,之前的数据都基本丢了。


创建GitHub Pages

注册GitHub

没有账号的先到 官网注册

自建仓库

在GitHub首页选择Start a project

Repository name格式为:xxx.github.io(xxx是你自定义的名称)

不要勾选Initialize this repository with a README

Creating repository完成创建

创建成功后显示出下图

Fork仓库

找到你想Fork博客的GitHub仓库,点击右上角的Fork,再到你自己的项目里就可以看到了

先进入设置把仓库名字改一下,其他对应的配置按自己的要求进行修改即可

安装本地Git环境

安装git

首先下载 git for windows

不懂的可以直接按默认设置安装,安装完成后打开Git Bash(如果按默认安装的,桌面、鼠标右键、开始菜单里应该都有)

在打开的命令行窗口(Shell)内执行以下命令,设置你的git用户名和邮箱:

1
2
git config --global user.name "xxx"  // 设置你的git用户名
git config --global user.email "xxx@xxx.com"  // 设置你的git邮箱

配置SSH

在之前打开的Shell内执行:

1
ssh-keygen -t rsa -C "xxx@xxx.com"   // 获取SSH加密设置,xxx@xxx.com为你的邮箱

直接按回车一直到命令完成,然后打开你电脑当前的用户目录下打开 .ssh 文件夹,里面有两个文件 id_rsa 是私钥,需要保密, id_rsa.pub 是公钥,无需保密,接着打开 id_rsa.pub 将里面的内容复制下来

在网页打开你github账号的设置

选择SSH and GPG key选项下的New SSH key,将复制的内容粘贴在key选项框里保存即可

克隆远程仓库到本地

找到你想Fork博客的GitHub仓库点击 Clone or download 复制列表框里的链接备用

打开Git Bash,输入以下命令将位置切换到你想放置本地代码的地方

1
cd {本地路径}      // 比如:cd d:/blog

克隆你想要的远程仓库:

1
git clone {上面复制的仓库地址}     // 比如:https://github.com/Huxpro/huxblog-boilerplate.git

成功后打开{本地路径} 即可看到你clone的文件

部署Jekyll本地编译环境

该步骤是自己第一次部署的时候遇到的大坑,很多教程都没有讲的很清楚,而且在windows上部署很不友好,这也是很多人选择Hexo的原因

安装Ruby

1.安装Ruby

ps:请选择Ruby 2.0至2.3版本,不建议安装Ruby2.4及以上新版本,大坑所在,无以言表。

2.安装对应版本的DevKit

DevKit解压完之后进windows的cmd终端在DevKit目录下运行命令:

1
2
ruby dk.rb init
ruby dk.rb install

安装RubyGems

下载 RubyGems

下好后解压到本地路径,打开cmd终端输入:

1
2
cd {本地路径}  //例如 cd c:\rubygems
ruby setup.rb

接着输入:

1
gem -v

有返回版本号即安装成功

安装Jekyll

输入命令:

1
gem install jekyll

如果安装失败需要更换RubyGems为Ruby China源

1
2
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

请确保返回值只有 gems.ruby-china.org

如果提示ssl证书错误请将https://gems.ruby-china.com里的 https 改成 http 再试

安装jekyll-paginate

输入命令:

1
gem install jekyll-paginate

安装wdm Gem

输入命令:

1
gem install wdm

开启本地预览

输入命令:

1
2
cd {本地仓库路径} // 例如:cd d:\blog
jekyll serve

在浏览器地址栏输入既可预览 http://localhost:4000/

将本地jekyll代码部署到Github仓库

发布到github

打开Git Bash

1
2
3
4
5
6
cd d:\blog
git init
git add .
git commit -a -m  "statement"    //此处statement填写此次提交修改的内容,作为日后查阅
git remote add origin {远程仓库路径}    //比如:git remote add origin https://github.com/用户名/仓库名称.github.io.git
git push -u origin master

更新到github

1
2
3
git add .
git commit -m "statement"    //此处statement填写此次提交修改的内容,作为日后查阅
git push origin master

撤销上一次commit

1
2
git reset --hard HEAD~1
git push --force

参考文章

[1].Bebop.C的博客 — Github Pages + Jekyll 独立博客一小时快速搭建&上线指南

[2].知乎 — windows10下用gem安装jekyll失败,怎么办?(已解决)

[3].github官方文档 — 使用Jekyll作为静态网站生成器与GitHub页面

[4].可木Changer — {译} 在Git中如何撤销上一次的commit(s)