用GitHub Pages搭建博客(三)

摘要:
本文介绍了通过git工具替换网站主题,并发布了Jekyll和Hexo的简要介绍。GitHubPages基于Jekyll构建。Jekyll是一个简单的博客形式的静态网站制作工具。它有一个模板目录,其中包含原始文本格式的文档。通过转换器和Liquid渲染器,我们的原始文章被转换为静态页面,从整个仓库的文件生成一个完整的、可发布的静态网站,而不是为每篇文章手动编写html页面。GitHubPages仓库克隆返回到GitHub页面并进入Pages仓库页面。

用GitHub Pages搭建博客(三)第1张

本篇介绍通过git工具替换网站主题,并发布

Jekyll和Hexo的简要介绍

  GitHub Pages是基于Jekyll构建的,Jekyll 是一个简单的博客形态的静态站点生产工具,它有一个模版目录,其中包含原始文本格式的文档,通过一个转换器(如 Markdown)和Liquid 渲染器,将我们的的原始文章(Markdown格式文件)转化成静态页面,将整个仓库的文件生成一个完整的可发布的静态网站,而不用手工去对每篇文章都写一个html页面。

  Jekyll依赖于Ruby,如果我们想在本地运行Jekyll,需要安装相应的依赖,而Hexo只依赖于Nodejs,相对要简单些,所以不少人选择使用Hexo来生成网站。

本文不介绍本地安装Jekyll和Hexo,因为本地安装的目的,是为了本地可运行、查看网站效果。我们只介绍如何生成Pages网站、如何使用现成的主题,并介绍如何写文章发布,不进行Jekyll主题开发,有需要的可自行研究学习。

Jekyll主题

  在互联网上有很多开源爱好者,发布了他们开发的Jekyll样式,我们如果不需要自行开发主题,可以选择别人的主题,稍微配置后,即可用于自己的博客。互联网上有很多Jekyll主题站,此处推荐一个jekyllthemes

jekyllthemes示例

  • 主题选择和下载

在网站上,我们选择一个自己心仪的主题,点击进入详情页面,可以看到“Download”按钮,点击可进入下载页面。

jekyll主题选择

下载页面一般分为两种:

  1. git仓库代码页面
  2. git仓库发布页面

代码页面,我们可以点击右上角的“Code”,如果本地电脑上安装有git插件,可以复制Https下载链接,然后在本地git上克隆仓库代码;如果没有,可以直接点击“Download ZIP”下载代码压缩文件。

jekyll主题下载1

发布页面,我们直接点击“Source code”下载源码即可。

jekyll主题下载2

以上两种方式都一样,我们得到别人开发的Jekyll主题代码。

  • 主题使用

由于下载的主题文件很多,不方便在GitHub网站上直接进行添加,我们需要在本地使用git工具将主题代码放进我们自己的仓库。

安装主题

如果你熟悉git的安装和使用,安装及使用可直接跳过。此处我们选择最简单的Git工具进行介绍。

  • GitHub官方Desktop安装

官方介绍文档GitHub Desktop Doc

官方下载链接GitHub Desktop Download

  • Git工具安装

下载链接

下载相应的安装程序后,安装git,安装完成后,鼠标右键菜单中就可以看到git相关菜单项。

用GitHub Pages搭建博客(三)第6张

  • GitHub Pages仓库克隆

回到我们的GitHub页面,进入我们的Pages仓库页面。

用GitHub Pages搭建博客(三)第7张

点击“Code”,复制HTTPS链接。在本地电脑中,右键选择“Git GUI Here”,再选择“Clone Existing Repository”,将仓库代码克隆到本地。

用GitHub Pages搭建博客(三)第8张

用GitHub Pages搭建博客(三)第9张

由于仓库中还有篇二中初始化时添加的文件,现在要使用下载的主题,进入仓库文件夹,先将之前的文件删除,如下图中的index.md和_config.yml文件(注意.git文件夹不可删除)。

用GitHub Pages搭建博客(三)第10张

原文件删除后,我们将之前下载的主题代码全部复制到文件夹中,然后右键“Git GUI Here”,准备提交代码。

用GitHub Pages搭建博客(三)第11张

用GitHub Pages搭建博客(三)第12张

按下快捷键Ctrl+I,并在弹窗中确认,将当前文件添加,准备提交到仓库。

在右下角“Commit Message”里输入描述,然后点击“Commit”,再点击"Push"推送到GitHub网站上,如果需要账号和密码,输入即可。

用GitHub Pages搭建博客(三)第13张

提交成功后,在GitHub仓库中将看到提交的新的主题代码,稍后即可通过域名访问到新的网站风格。

用GitHub Pages搭建博客(三)第14张

欢迎关注我的博客:Awu's Blog | 阿呜的边城

欢迎关注我的公众号:阿呜的编程
用GitHub Pages搭建博客(三)第15张

免责声明:文章转载自《用GitHub Pages搭建博客(三)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇VLAN-3.3 理解Hybrid接口的应用github 的 tag下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

安装go-admin

安装过程 1.下载源码(https://github.com/golangpkg/go-admin)后编译 执行编译命令 go build -ldflags "-linkmode external -extldflags -static" -o go-admin main.go 出现错误:main.go:5:2: cannot find package "...

git commit 关闭eslint校验

vue项目中带eslint校验,在提交代码时遇到报错。虽然这样写起来项目很规范,有时候觉得很烦。需要关闭git提交时校验 在项目里面新建.eslintignore文件,在里面忽略就行,例如忽略src文件 项目目录: 忽略代码: 这样就能重新提交代码啦!...

Github强制找回管理员账号密码

步骤: 1. 登录Github所在的服务器,切换用户为git:su git 2. 进入Github的Rails控制台:gitlab-rails console production 3. 查看超级管理员用户:user = User.where(id: 1).first 返回结果如下所示: 4. 修改root用户的密码: user.password = "...

细说SVN集中式版本控制器

svn全称Subversion,实现多人开发同一个项目时,对源代码进行管理的工具。在公司里边,一个项目是由多人同时在开发,大家在本地自己电脑开发php代码,完毕后就commit上传给服务器运行。  如图:多人开发同一个php程序文件(重叠部分代码),在做commit提交给服务器的时候,要造成文件彼此覆盖的问题。 svn作用之一:解决文件覆盖,协作多人开发同...

使用GitHub API上传文件及GitHub做图床

本文介绍GitHub API基础及上传文件到仓库API,并应用API将GitHub作为图床 GitHub API官方页面 GitHub API版本 当前版本为v3,官方推荐在请求头中显示添加版本标识。 Accept: application/vnd.github.v3+json Postman示例如图: 请求认证 基础认证|Basic authenti...

安装git

安装Git主要有两种安装方式:一种是通过编译源代码来安装;另一种是使用为特定平台预编译好的安装包。从源码安装的好处就是可以是最新的版本。 在Linux上安装预编译好的Git二进制安装包在Fedora上用yum安装:$ yum install git-core;在Ubuntu这类Debian体系的系统上,用apt-get安装:$ apt-get instal...