使用jekyll和GitHub Pages搭建静态网页


前几天在搜索iPad Pro学习软件的时候找到了萤火之森, 挺喜欢这个网站的。 看到最下面写着Hexo 驱动,于是乎就顺藤摸瓜开始了解这些了。 最后发现了GitHub Pages可以免费host静态网页,配合着jekyll可以基本上满足我的需求了。 在jekyll的众多主题中看好了现在使用的这个Minimal Mistakes。 于是乎就照着教程开始搭建了。

注册GitHub和安装GitHub Desktop

  • 首先需要注册一个GitHub账户,点这里。注册好了之后就要创建一个新的repository。
  • 之后就要下载GitHub Desktop并且安装。 按照自己刚才注册的GitHub信息填写
  • Clone repository,选择本地的文件夹。这样就可以在本地对文件进行修改,测试网页,觉得OK后再发布到GitHub上
  • 如果需要一个GitHub账户host几个网站的话,就需要新建立一个gh-pages分支,而不是用master分支
    • 首先打开terminal(我用的是Mac,其他系统可以用相应的程序)
    • 输入 git checkout --orphan gh-pages
    • 然后去GitHub网站,点击你的repository,进入Settings,在左面的菜单里找到Branches,选择gh-pages作为Default branch
  • 如果你的GitHub账户只host一个网站的话就不需要创建gp-pages分支

寻找并安装网页主题

  • 找到自己喜欢的Jekyll网页主题,并且下载下来,解压缩之后把里面文件都放到GitHub 本地的repo文件夹里

安装Jekyll并开启本地服务

  • 打开terminal,进入到repo文件夹里:cd /Documents/GitHub/"repo name"/
  • 检查是否有Ruby 2.1.0 以上版本:ruby -v
  • 如果没有Ruby的话可以参考这个链接安装ruby
  • 然后安装Bundler: gem install bundler
  • 上一步找到的主题文件里面应该已经包含有了Gemfile 文件。如果将来需要安装什么Jekyll的插件,可以在这个文件里加入:gem “plugin_name”。
  • 然后安装Jekyll:bundle install

生成网页

  • 在repo文件夹里运行:bundle exec jekyll serve 来在本地生成你的网页。
  • 可以在浏览器里输入 localhost:4000 浏览网页。

配置网页

  • 具体的网站信息可以在_config.yml进行更改,博客要以“2018-01-02-title.md”的形式放在_posts文件夹里面。更多信息可以参考Minial Mistakes 网站的Quick start guide

上传GitHub

当网站在本地经过检查一切就绪的时候,我们就可以把它放到GitHub上去了。

  • 打开GitHub Desktop, 填写Summary和Description,然后就可以Commit to gh-pages
  • 然后点击Push origin,大功告成。

等待几十秒,就可以刷新你的网页了, 地址是username.github.io/reponame

使用自己的域名

很多时候,我们都想使用自己的域名,实现这个也很简单。

  • 前往域名管理网站,找到管理DNS选项
  • 按照表格设定你的DNS并保存

    类型 名称 数值 TTL
    A @ 192.30.252.153 1小时
    A @ 192.30.252.154 1小时
    CNAME www username.github.io 1小时
  • 然后在你的repo下建立一个CNAME, 里面写上你的域名
  • 最后去GitHub网站,你的repo,选择设定,找到GitHub Pages选项,在来源选项选gh-pages branch, 在自定义域名选项填上你的域名