每个人都应该要有自己的博客,下面介绍下自己使用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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。