如何利用Mac+Github pages+jekyll来编写博客

最新推荐文章于 2021-01-21 14:27:46 发布

chumingke

最新推荐文章于 2021-01-21 14:27:46 发布

阅读量1.2k

点赞数 1

分类专栏：学习笔记文章标签： github jekyll mac

本文链接：https://blog.csdn.net/weixin_39718665/article/details/78142515

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

如何利用Mac+Github pages+jekyll来编写博客

在网上查看了很多步骤，汇总一个笔记，有一些疏漏，之后有机会补充。

第一部分 Github准备

Mac 我用的是air
Github
jekyll
MarkDown

1.首先去Github官网注册账号。
2.然后下载GIT。
3.然后配置SSH。
此时本地git已经成功与Github链接。
详细配置链接等请搜索其他教程。有很多教程，此处略过。

第二部分 jekyll准备

首先大概说下
安装jekyll需要的环境支持有Ruby，Gem（Gem是Ruby第三方插件管理器）。这两个东西都是Mac自带的。
但是如果Ruby、gem版本太低。就无法正常安装。更新这两个东西需要链接到ruby的源地址。但是由于墙的原因下载会很慢甚至失败。解决办法是更改到淘宝的源地址。
因此我们的操作顺序是先更改源地址，再更新版本，再下载jekyll。

首先试一下安装jekyll。

gem install jekyll

如果遇到权限问题，则输入以下命令。

sudo gem install jekyll

如果成功可以略过更新等操作。如果失败请继续。

更新源地址

在此之前我们先检查一下版本。如果版本是最新的，那就可以略过下面的操作直接下载jekyll。下面的操作根据需求查看。

输入以下命令检查gem,ruby版本。

gem -v
ruby -v

写本笔记的时候，gem最新版本为2.6.13，ruby最新版本为2.4。
如果版本较低，则需要更新版本。
更新版本前我们需要更改以下更新的源。因为墙的原因，如果不更新源下载速度会非常慢甚至失败。（也可以选择翻墙试试）

我们用以下命令将源更改为淘宝源。
先检查源地址

gem sources -l

然后移除源地址。(加上sudo是为了避免权限问题，也可以直接输命令。如果失败再加上sudo，后面如果有类似问题按同样方法，这里不再赘述)

sudo gem sources --remove http://rubygems.org/

添加新地址

sudo gem sources -a https://gems.ruby-china.org/

其中淘宝源的地址更改过。所以如果在网上查过类似问题，看到的地址可能是别的。2017年9月的最新地址为https://gems.ruby-china.org/。可以访问RubyGems 镜像网站https://ruby.taobao.org来查看最新地址。

此时输入命令检查源地址。如果为https://gems.ruby-china.org/代表修改成功，可以更新ruby和gem啦。

更新gem, ruby

输入以下命令更新gem

## 更新Gem(提示权限)
gem update --system
## 检查gem版本
gem -v

此时gem应该更新好了。
然后来更新ruby，ruby的更新网上有几种方法。我采用的是先安装rvm，再更新ruby，这样比较方便容易成功。

rvm是Ruby的版本管理器
为什么要安装rvm呢，因为rvm可以让你拥有多个版本的Ruby，并且可以在多个版本之间自由切换。

第一步安装rvm
输入以下命令

curl -L get.rvm.io | bash -s stable
source ~/.rvm/scripts/rvm

加载完毕后输入

rvm -v

如果能显示版本说明安装成功。

第二步安装ruby

 ##列出ruby可安装的版本信息
  rvm list known
 ##安装一个ruby版本
  rvm install 2.4.1
 ##如果想设置为默认版本，可以用这条命令来完成
  rvm use 2.4.1 --default
 ##查看已安装的ruby
  rvm list
 ##卸载一个已安装ruby版本
  rvm remove 2.1.4

此时，ruby跟gem应该都更新好啦，可以安装jekyll了

 ##安装
 sudo gem install jekyll
 ##检查版本
 jekyll -v

能显示版本，就说明安装成功了。

第三部分使用jekyll

##使用Jekyll创建你的博客站点
jekyll new blog

此时会在用户文件夹下创建一个blog文件夹。这个就是用jekyll创建的博客文件夹了。

##开启Jekyll服务
##进入blog目录,记得一定要进入创建的目录，否则服务无法开启
cd blog
jekyll serve

上面两个命令是为了开启本地服务，jekyll服务默认端口是4000，开启服务后打开浏览器，输入：http://localhost:4000 即可访问。
这个页面就是jekyll自动创建的博客页面。
可以选择自己写一套，也可以去网站http://jekyllthemes.org下载一套主题。

第四部分使用github pages建立博客

基本有两种方法，一种是你的GitHub用户名建立的username.github.io这样的用户&组织页（站），另一种是依附项目的pages。
想建立个人博客是用的第一种，形如beiyuu.github.io这样的可访问的站，每个用户名下面只能建立一个。
因此我们选择第一种。

建立一个新的repository，名字的位置填写为

usename.github.io

（usename替换为自己的用户名）
然后进入Settings，拉到下面github pages，点击choose a theme，进去随便选一个模板，点击绿色的select theme。然后就自动生成两个文件。将该项目clone到本地。
cd 到仓库目录下执行

jekyll serve -B

启动服务后，打开http://localhost:4000应该跟https://username.com/username.github.io/ 访问的应该是一模一样的。启动前确保其他目录下没有jekyll服务
通过ps aux|grep jekyll查看进程
有的话,用kill -9 进程号杀掉其他进程。

这个位置我发现杀不掉其他进程，不清楚为什么，进程号一直在变。。。因为这个操作是为了可以在本地端网页查看编写效果，所以暂时不影响，略过。。。

然后将之前我们建的blog中的文件替换掉仓库中的文件。
到了这里其实就可以修改仓库中相应文件了，比如更换主题之类的。然后上传到Github。

git status                             #查看仓库状态
git add --all                          #添加到暂存区 
git commit -m "提交jekyll默认页面"       #提交到本地仓库
git push origin master       #线上的站点是部署在master下面的

注意，在提交前，请确保_config.yml文件里面下面是这样配置的，因为这个是Github Pages的规定，如果选择了其他的模式，会立即收到编译警告的邮件提醒的。

highlighter: rouge
markdown: kramdown

等待大概1-2分钟之后，再次刷新username.github.io，就能看到我们的blog了。

第五部分申请个人域名

这个网上教程也不少，就不多说了。

其他

以上就基本上完成了博客的环境配置。
然后查资料的时候发现有的说hexo更好，大概的区别是。hexo设置更简单，速度更快。但是必须在本机上使用，如果去一台陌生机器就要重新设置环境。而jekyll可以直接在github修改？反正各有优劣，要选择的话请查清楚~
这一套东西研究完之后，发现还是用CSDN写博客方便啊……
因为那一套搞完了，真的要写的话还需要配置各种css等前端的东西，其实我不是搞前端的……还是要加强学习呀……