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

来源:互联网 发布:cn域名ns记录是什么 编辑:程序博客网 时间:2024/05/28 15:23

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

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

目录

  • 如何利用MacGithub pagesjekyll来编写博客
      • 目录
    • 第一部分 Github准备
    • 第二部分 jekyll准备
      • 更新源地址
      • 更新gem ruby
    • 第三部分 使用jekyll
    • 第四部分 使用github pages建立博客
    • 第五部分 申请个人域名
    • 其他

第一部分 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 -vruby -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 stablesource ~/.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 blogjekyll 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: rougemarkdown: kramdown

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

第五部分 申请个人域名

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

其他

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