在GitHub Pages上搭建jekyll

时间 2019-11-15

标签 github pages 搭建 jekyll 栏目 Git 繁體版

原文原文链接

每一个人都应该要有本身的博客，下面介绍下本身使用jekyll在GitHub Pages部署搭建我的博客的内容前端

从事互联网行业日久后，技术渐长，总想着写写，把本身回，让别人更多的看到本身。我的是这样想的哈哈。
以前曾经本身使用laravel本身写了个项目，不了了之值。
当时的感受就会耗时不说，最重要的感受上班在写，下班后继续写博客代码。失去了，作这件事情的本意（分享）。vue

其实如今搭建一个技术博客，很是简单。java

经常使用的有下面几种：laravel

GitHub Pages + Jekyll
GitHub Pages + Hexo
wordpress
自行构建依托与java或者PHP，配合前端vue，h5等

什么是GitHub Pages

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点能够被免费托管在 Github 上，你能够选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持自动利用 Jekyll 生成站点，也一样支持纯 HTML 文档，将你的 Jekyll 站点托管在 Github Pages 上是一个不错的选择。git

什么是jekyll

jekyll是一个简单的免费的Blog生成工具，相似WordPress。可是和WordPress又有很大的不一样，缘由是jekyll只是一个生成静态网页的工具，不须要数据库支持。可是能够配合第三方服务,例如Disqus。最关键的是jekyll能够免费部署在Github上，并且能够绑定本身的域名。程序员

我的博客搭建

总体流程:github

选择一个jekyll主题，fork到本身的github仓库内
使用gitHub的GitHub Pages，配置项目
设置 GitHub Pages
删除原有博客中内容，编写自由内容

步骤详解

1. fork项目

以我我的项目为例，打给地址https://github.com/MyStudytime/studytime-Blog，点击Fork按钮复制代码到本身的仓库。大概1分钟左右能够完成。
数据库

2. 删除 CNAME 文件

删除项目中的 CNAME 文件，CNAME 是定制域名的时候使用的内容，若是不使用定制域名会存在冲突。浏览器

3. 设置 GitHub Pages

点击Settings按钮打开设置页面，页面往下拉到GitHub Pages相关设置，在Source下面的复选框中选择master branch，而后点击旁边的Save按钮保存设置。dom

4. 重命名项目

点击Settings按钮打开设置页面，重命名项目名称为：YourGithubUserName.github.io

5. 重命名以后，再次回到 `Settings` > `GitHub Pages` 页面

会发现存在这样一个地址： https://YourGithubUserName.github.io

特别注意此处完成后，虽然也能够打开页面，可是跳转页面仍是个人页面，须要修改jekyll配置文件。

6. 配置 _config.yml

打开项目目录下的 _config.yml 文件，修改如下配置：

repository: MyStudytime/studytime-Blog  本身的仓库地址
github_url: https://github.com/MyStudytime   本身的github地址
url: https://www.studytime.xin  上面设置的https://YourGithubUserName.github.io

完成上述配置后，大概等待一二分钟后，可访问https://YourGithubUserName.github.io便可打开网站地址。

7. 配置自定义域名

完成上述配置后，虽然https://YourGithubUserName.github.io也能够打开博客。可是对于崇尚个性的程序员不免会，想着配置本身的域名。
对于怎么域名以及备案这些，就再也不此，再述了。

首页须要进行域名解析，个人域名是阿里云域名，我就在阿里云上进行域名解析了。

而后从新打开项目的Settings > GitHub Pages页面，Custom domain 下的输入框输入刚才设置的域名：blog.studytime.xin，点击保存便可。
从新配置 _config.yml,打开项目目录下的 _config.yml 文件，修改配置成url: http://blog.studytime.xin

等待一分钟以后，浏览器访问地址：blog.studytime.xin 便可访问博客。

更多精彩内容，请关注做者博客，https://studytime.xin