每个人都应该要有自己的博客,下面介绍下自己使用 jekyll 在 GitHub Pages 部署搭建个人博客的内容
目录
基本介绍
从事互联网行业日久后,技术渐长,总想着写写,把自己回,让别人更多的看到自己。个人是这样想的哈哈。
之前曾经自己使用 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 上是一个不错的选择。
什么是 jekyll
jekyll 是一个简单的免费的 Blog 生成工具,类似 WordPress。但是和 WordPress 又有很大的不同,原因是 jekyll 只是一个生成静态网页的工具,不需要数据库支持。但是可以配合第三方服务, 例如 Disqus。最关键的是 jekyll 可以免费部署在 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
按钮保存设置。
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