利用 GitHub Pages 搭建网站
本文以 jekyll/minima 为模板介绍如何使用 GitHub Pages 搭建网站。
网站初始化
参考资料:
首先创建一个仓库:xinetzone/blogs,然后在该仓库下点击 settings
并下拉到GitHub Pages
部分,选择 master branch:
![](https://img.haomeiwen.com/i1114626/31521ee4c42ec590.png)
接着您便可以 GitHub Pages:
![](https://img.haomeiwen.com/i1114626/8b8efebc77f3a34a.png)
网址 https://xinetzone.github.io/blogs/ 便是博客的主页。再次回到仓库的主页,添加一些描述性的文字:
![](https://img.haomeiwen.com/i1114626/d9cb76853ee2dddd.png)
填写后显示如下:
![](https://img.haomeiwen.com/i1114626/cd7624154a24a718.png)
但是,此时网页没有内容:
![](https://img.haomeiwen.com/i1114626/292e3ad7bdebd848.png)
为了让网站内容丰富,使用 Jekyll 在本地设置 GitHub Pages 站点。建议使用 Bundler 安装和运行 Jekyll。 Bundler 可管理 Ruby gem 依赖项,减少 Jekyll 构建错误和阻止环境相关的漏洞。 要安装 Bundler,您必须安装 Ruby。为跟踪站点的依赖项,Ruby 将使用 Gemfile
的内容来构建您的 Jekyll 站点。创建一个目录 jekyll_demo
用于存放本地计算机上的 Jekyll 站点:
$ mkdir jekyll_demo
$ cd jekyll_demo
$ touch Gemfile
接着将如下内容写入 Gemfile
:
# frozen_string_literal: true
source "https://rubygems.org"
gem 'github-pages', group: :jekyll_plugins
从 GitHub Pages gem 安装 Jekyll 和其他依赖项:
$ git clone https://github.com/xinetzone/blogs.git
$ bundle exec jekyll _3.3.0_ new blogs/blogs
这样新的 jekyll site 被安装在 jekyll_demo/blogs/blogs
。(为了解决冲突,需要 blogs/blogs
)导航到新的站点目录:
$ cd blogs
在 blogs/Gemfile
中,删除以下行开头的 #
将其锁定为 GitHub Pages 使用的版本:
# gem "github-pages", group: :jekyll_plugins
将您的站点目录提交并推送到远程仓库连接:
$ git add .
$ git commit -m "updated site"
$ git push origin master
将 blogs/blogs/.gitignore
与 blogs/.gitignore
合并,同时删除 blogs/blogs
目录,接着再推送:
$ git add .
$ git commit -m "modified blogs/"
$ git push origin master
此时打开网站,则显示为:
![](https://img.haomeiwen.com/i1114626/9740ab9b6211a2c7.png)
构建本地 Jekyll 站点
为了在本地查看网站,需要一个本地站点,创建目录 sites
,并添加文件 Gemfile
修改 theme 为 minima
:
source "https://rubygems.org"
#gem 'github-pages', group: :jekyll_plugins
gem 'minima', group: :jekyll_plugins
安装主题,生成文件 Gemfile.lock
:
$ bundle install
重新克隆 blogs
仓库:
$ git clone https://github.com/xinetzone/blogs.git
$ cd blogs/
$ bundle install
在本地运行您的 Jekyll 站点:
$ bundle exec jekyll serve
在您的 Web 浏览器中预览本地 Jekyll 站点,网址为:http://127.0.0.1:4000/
![](https://img.haomeiwen.com/i1114626/4a71be2ce382cfc2.png)
使用 GitHub Pages gem 保持您的站点最新,运行如下命令:
$ bundle update