把Github Page上的博客迁移到服务器上

Posted 动物园的猪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了把Github Page上的博客迁移到服务器上相关的知识,希望对你有一定的参考价值。

缘起

我的博客是基于Jekyll[1]做的,支持Markdown和Latex,页面中的图像,是我通过我的Mac Automator脚本实现的自动截屏,然后Save到我的本地,再提交到Github去的(是的,我把Github当做了我的图床)。

当我每次使用类似于Sublime这种文本编辑器,编写完我的主页后,提交到Github后,Github的Git Page[2]系统会自动帮助我,完成了把Markdown自动转化成html网站的过程,然后我就可以通过域名piginzoo.github.io就可以访问了。Git Page[3]服务是一个Github提供的免费的个人博客系统,很帅!

最后,我还需要使用我的www.piginzoo.com 域名,在DNSPod[4]上,CNAME到 piginzoo.github.io 上,完成我的域名配置和跳转,从而最终完成了我的博客网站。

可惜,从国内访问Github总是很慢,CNAME的解析也时常掉链子,导致我的托管主页访问起来也很慢,经常在手机上半天也出刷不来,让人捉急。

所以,一直想把我的博客迁移到自己的服务器上来,我自己有台速度还可以的服务器,于是,终于决定不再犯懒了,搞起来!

动手

在我自己的服务器上部署的话,需要依次解决这些问题:

  • [x] 安装Ruby(jekyll需要ruby环境)和Gem
  • [x] 安装Jekyll
  • [x] 和nginx集成
  • [x] 还要可以自动从Git中拉取最新的内容

由于我的Server是CentOS7,默认的Yum安装的Ruby版本是1.9,可是最新的版本的Jekyll[5]需要至少Ruby版本是2.x,没办法,只有先装个RVM[6],他是一个多版本Ruby管理的一个工具,装了他就可以很方便的安装和使用多个版本的Ruby了。

好,我们来安装RVM:

安装RVM

安装Ruby参考了这篇[7]

  • http://rvm.io/ [8]去装rvm

然后运行命令安装它:

gpg2 --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
curl -sSL [https://get.rvm.io](https://get.rvm.io/ "https://get.rvm.io") | bash -s stable

安装完RVM后,需要使用它来安装Ruby了,我选用的是Ruby 2.5.1。

安装ruby2.5.1

使用命令安装Ruby:

rvm install 2.5.1

这个过程有些慢,耐心等待。

安装完成后,使用命令,便可以启动Ruby 2.5.1的环境了:

rvm use 2.5.1

加入rc.local使其自动启动

安装完Ruby后,为了可以每次在启动之后,自动都设置成Ruby 2.5.1的环境,需要把这句话rvm use 2.5.1加入到/etc/rc.loca中,保证服务器已启动就自动设置为Ruby 2.5.1的环境。

接下来,终于安装博客生成系统Jekyll了

安装Jekyll

安装jekyll,需要使用Ruby自带的Gem工具,Gem是一个Ruby包安装工具,用于安装Ruby编写的各种应用。在命令行中输入命令:

gem install jekyll

过程有些慢,请耐心等待。安装完毕后,你就可以来使用Jekyll生成的网站了。

这里暂停一下,先对Jekyll,以及我使用心得,做一个简单的介绍:

用Jekyll写博客

Jekyll网站生成工具,博客作者,可以使用Markdown语法书写博客,然后Jekyll会自动帮你讲Markdown页面转化成HTML页面,同时还会帮你构建了一个网站的基础框架,比如首页、分类。它还支持显示模板,使用CSS定制化你的显示样式,我使用的就是他默认提供的一套Bootstrap的模板,很朴素简洁。如果你觉得太素了,你可以下载其他热心网友制作的更酷的模板,切换过去后瞬间网站就高大上了,哈哈。

同样的网站生成器,还有更灵活帅气的Hexo[9],实在是没时间再去研究鼓捣了,看以后有机会再玩吧~

我还安装了一系列的插件,帮助我丰富我的博客网站:

  • MathJax [10],一个JS库,瞬间把我的Latex文字翻译成漂亮的数学公式。
  • 我利用 MAC 自带的Automator,写了一个 Python脚本 [11],可以自动把你的剪贴板图片转化成jpg,存入到指定的目录,并且把路径拷贝到剪贴板,你只要paste一下,就把图片插入到了博文中。

下面是一个生成的图片的例子:目录20181220和文件名1545282900519.jpg都是自动生成,防止重名:

![](/images/20181220/1545282900519.jpg)
  • 使用了Jquery插件
    • 安装RVM

    • 安装ruby2.5.1

    • 安装Jekyll

    • 克隆的网站

    • 部署Nginx

    • 最后,加入Git自动拉取

    • 创建帖子的脚本

    • 缘起

    • 动手

    • 好啦,终于可以安静的写博客了

  • 使用了 Valine [12],一个国产小哥写的评论系统,他是基于 LeanCloud [13]开发的,可惜由于TMD“某种原因”不更新了,你懂的,它比 来必力 [14]好用。我最早是用的 友言 [15],但是也因为“不可抗拒原因”关闭,FUCK!没办法,我只好弃用它了。
  • Valine还自动帮我完成了帖子的 计数器功能 [16],每篇帖子标题下方的计数器就是用它实现的。
  • 安装了百度统计,帮助我了解网站和每篇帖子的访问和SEO情况。
  • 另外,还自己改了一些内容,如置顶、排序、日期格式化...,Jekyll就是一个给程序员准备的Toy,本身就是一套Ruby脚本,所以作为程序员的你,可以自己尽情发挥。

克隆的网站

前面乱入了Jekyll的使用和心得,让我们继续回来,继续我们的网站迁移。

我们安装好Jekyll之后,还需要去Github上去克隆我们的博客代码。

它没有master分支,只有一个名为“gh-pages”的分支,为什么起这么一个怪怪的分支名字呢,这个是Github Page 要求的,可以参考我之前的博客[17]了解更多。

然后,cd到这个这个git目录中,输入命令:

jekyll server &

顺利的话,网站就会启动起来,你会看到他会先运行一段生成程序,把你的Markdown页面转化成HTML,然后再默认在4000端口开始监听。

部署Nginx

虽然使用Jekyll生成了网页并且启动了一个Web服务器,但是我还是想让我的网站是构建在Nginx之上,Nginx可以帮我根据域名自动导向到我这台服务器上的多种服务,Jekyll主页服务,只是其中之一。

于是我修改了Nginx配置,让Nginx可以serve我的域名www.piginzoo.com ,并且,将Nginx对外服务的网页目录指向到了Jekyll的生成目录:

Nginx配置的修改:

    server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _ www.piginzoo.com piginzoo.com;

# 自动跳转到www
if ($host = 'piginzoo.com') {
rewrite ^/(.*)$ http://www.piginzoo.com/$1 permanent;
}

# 设置我的主页目录为jekyll生成的页面目录
root 【jekyll的生成目录】;

# 开启gzip
gzip on;
gzip_min_length 1k;
gzip_comp_level 4;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript ;
gzip_vary on;
gzip_buffers 2 4k;
gzip_http_version 1.1;

# 给所有的页面自动增加*.html后缀,jekyll生成的页面的后缀
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /$1.html last;
break;
}
}

需要注意以下几点:

  • 通过server_name来支持多个域名的访问
  • Jekyll是根据Markdown页面自动生成的HTML静态页面,所以Nginx要把root指向到这个生成目录
  • 需要增加一个rewrite,让所有的访问页面最后都自动去访问*.html文件,比如去访问 http://www.piginzoo.com/tech/2015/02/20/rebuild-my-website,最终访问的是 http://www.piginzoo.com/tech/2015/02/20/rebuild-my-website.html

最后,加入Git自动拉取

因为我的页面都是在host在Github上,需要git pull才可以把我最新的博客页面拉取下来,所以还需要写一个自动化拉取脚本:

  • 使用crontab,设置自动每分钟拉取Github一次
*/1 * * * *  git --git-dir=/xxx/.git --work-tree=/xxx pull > /dev/null

需要使用git-dir指定你的本地git库目录,使用work-tree指定的工作目录。

  • 加入脚本后台运行jekyll server
nohup jekyll server -s /xxx-d /xxx/_site/>/dev/null 2>&1 &

创建一个后台服务,来保持jekyll server的常驻。

这样,每1分钟,就去我的Github博客repo中尝试拉取最新的页面,一旦拉取了最新的页面,Jekyll会自动将其生成为HTML网页,Nginx就可以实时响应给用户了。

恩,完美了!

创建帖子的脚本

为了方便自己,创建了一个快速创建帖子的脚本,帮助我快速创建页面:

TODAY=`date +%Y-%m-%d`
TITLE=$1

if [ "$1" == "" ]; then
echo "格式错误!"
echo "\t必须要有一个以中划线分割的主题(英文)"
echo "\t 如:create map-reduce"
exit
fi


BLOG_FILE_NAME="_posts/$TODAY-$1.md"
touch $BLOG_FILE_NAME

echo "已经创建新帖子:$BLOG_FILE_NAME"

cat >> $BLOG_FILE_NAME <<EOF
---
layout: post
title: <修改这里的标题>
category: <修改这里的分类,用英文>
---
EOF

只要你在命令行输入:create test-123,就会自动在_posts目录下创建一个新帖子,你打开编辑就好,很方便。

好啦,终于可以安静的写博客了

好啦,终于都完事了,我可以安静的写博客了:

1、打开iterm,使用我的create命令创建一个新帖子

2、启动Sublime,编辑这个新帖子,使用我的MAC Automator脚本自动将我截屏的图片保存到目录中。

3、我会在本地启动一个jekyll server来预览我的网站。

4、最后,我使用git add .; git commit; git push,将我的修改提交到Github上去。

5、安静的等待一分钟,刷新我的www.piginzoo.com , 哇,新的网页出现了。

写博客,变成了一件简单、开心的事情,从此喜欢上了摆弄文字。

参考资料

[1]

Jekyll: http://jekyllcn.com/

[2]

Git Page: https://pages.github.com/

[3]

Git Page: https://pages.github.com/

[4]

DNSPod: https://www.dnspod.cn/

[5]

Jekyll: http://jekyllcn.com/

[6]

RVM: http://rvm.io/

[7]

这篇: https://blog.csdn.net/hooyying/article/details/83119948

[8]

http://rvm.io/: http://rvm.io/

[9]

Hexo: https://hexo.io/

[10]

MathJax: https://www.mathjax.org/

[11]

Python脚本: /assets/clipboard.py

[12]

Valine: https://valine.js.org/

[13]

LeanCloud: https://leancloud.cn/

[14]

来必力: http://livere.com/

[15]

友言: http://www.uyan.cc/

[16]

计数器功能: https://valine.js.org/visitor.html

[17]

我之前的博客: http://www.piginzoo.com/tech/2015/02/20/rebuild-my-website


点击阅读原文,可以去我的博客上阅读排版精美、链接可以自动跳转的原文







以上是关于把Github Page上的博客迁移到服务器上的主要内容,如果未能解决你的问题,请参考以下文章

hexo博客同步迁移

用js通过url传参把数据从一个页面传到另一个页面

windows hexo+github page建博客过程

将博客迁移到了 Cloudflare Pages

将博客迁移到了 Cloudflare Pages

Symfony路由器重定向到https应用程序上的http