网站开发

利用 GitHub Pages 搭建网站

2019-08-25  本文已影响0人  水之心

本文以 jekyll/minima 为模板介绍如何使用 GitHub Pages 搭建网站。

网站初始化

参考资料:

首先创建一个仓库:xinetzone/blogs,然后在该仓库下点击 settings 并下拉到GitHub Pages 部分,选择 master branch

选择 master branch

接着您便可以 GitHub Pages:

网址 https://xinetzone.github.io/blogs/ 便是博客的主页。再次回到仓库的主页,添加一些描述性的文字:

填写后显示如下:

但是,此时网页没有内容:

网页初始化

为了让网站内容丰富,使用 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/.gitignoreblogs/.gitignore 合并,同时删除 blogs/blogs 目录,接着再推送:

$ git add .
$ git commit -m "modified blogs/"
$ git push origin master

此时打开网站,则显示为:

使用 jekyll 初设网站

构建本地 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/

更换主题:minima

使用 GitHub Pages gem 保持您的站点最新,运行如下命令:

$ bundle update
上一篇 下一篇

猜你喜欢

热点阅读