使用Github Pages+Jekyll搭建自己的博客

最新推荐文章于 2024-10-31 09:24:53 发布

chousu3531

最新推荐文章于 2024-10-31 09:24:53 发布

阅读量128

点赞数

文章标签： git markdown ruby

原文链接：https://my.oschina.net/u/2843430/blog/1549871

版权

本系列将分前后多篇文章介绍如何使用Github Pages + Jekyll搭建属于自己的个人博客，并简要介绍使用markdown进行博客的编写等内容，同一篇文章可能会被反复修正，敬请期待.

前言

最近正在学习Linux的相关知识，准备使用博客将学习过程中重要的知识点以及踩过的坑全部记录下来，为自己以后的学习和工作提前做一下铺垫。加之，虽然已经工作了多年，JAVA,ANDROID,NET均有涉及，但是因为没有写作的习惯，导致自己现在忘记的较多，于是写博客就不得不提上日程。

最近几年，IT大牛们自己搭建博客平台已经是屡见不鲜的事情，于是我也决定自己搭建一个属于自己的博客站点,争取向大牛们看齐。但是在搭建的过程中发现还是有很多的坑，所以就决定一并记录下来，就当做给自己的辛苦做一个记录，同时也希望能够帮助到其他人的。

优势

Github Pages + jekyll 是github 官方推荐的，用来搭建静态网站的一种非常有效并且便捷的方式。我们可以很方便地将静态网站的所有代码托管到github的Repository中，这样就可以通过网络来访问我们的网站。同时jekyll支持在本地预览我们使用MarkDown编写的博客，我们可以在本地预览无误之后，再提交到github上，提升了博客的编写效率。

参考

站点在建立的过程中遇到了很多的问题，是查阅相关的资料，以及国内外网站才解决的。所谓饮水思源，不忘出处，因此将这些资料记录在这里，同时也提供给大家进行参考。

注：有些网站可能需要大家“合理”上网才能查阅的。

jekyll+Github搭建个人博客
主要介绍了如何使用jekyll在github上搭建博客站点，内容比较简单，有提纲挈领地作用。
GitHub Pages的官方站点
Github Pages的官方站点。对于GitHub Pages不太了解的朋友可以先上去了解一下。
Setting up your GitHub Pages site locally with Jekyll
github官方文档，介绍了如何使用jekyll搭建个人Blog
众多的jekyll主题
这里有众多的jekyll主题，收费的和免费都有，可以上去选一款自己喜欢的主题，当然H5比较厉害的话，也可以自己开发主题。
Liquid语法官方网址
jekyll的模板使用了Liquid语法，可以随时查阅。
jekyll中文社区
国内的一些大牛已经将针对官方网站建立了相对应的中文社区，对于英文较差的童鞋是一大福音。
MarkDown基础语法
使用MarkDown来编写博客已经成为IT界一股新的潮流，使用Jekyll建立起来的站点也是需要Markdown来编写文章的。
最后一点，熟悉github的朋友应该知道，要使用GitHub的话应该了解一些关于Git的知识，在建站过程中也要多次使用Git，比如说 Setting up your GitHub Pages site locally with Jekyll 。所以如果对git不是很了解的朋友，请自行查阅资料。
Git的官方API
由于我们使用了GitHub的相关操作，因此对于git也是需要掌握基本的使用，相关命令可以参考git的官方指导文档。

我们将分为以下几个步骤来完成整个建站过程，最后会将在建站过程中踩过的坑，完善一下补在最后面。
点击目录可直接跳转到相应节点

<a href="#yuming">申请域名
<a href="#Repositories">在github上建立Repositories
<a href="#RubyJekyll">在windows上安装Ruby和Jekyll环境
<a href="#local">使用Jekyll建立本地站点并发布文章

域名的申请不是必须的，可以直接使用github提供的二级域名，其固定格式为https://githubusername.github.io。如果想要有一个自己的域名的话，建议申请一个也不是很麻烦，也不贵。我的域名是在阿里云旗下的万网上申请的。
稍后我们再讲如何将个人域名与github生成的个人Repositories建立联系。

<h2 id="Repositories">在github上建立Repositories</h2>

在github上建立个人博客的Repositories，可以参考上文提出的参考资料中的第二项。

注册github并登录，进入到个人主页。
首先创建一个特殊的代码仓库，名字必须是xxx.github.io，xxx是你的github昵称。比如我的GitHub昵称是xiaoshuaigege，那么我创建的Repositories，就必须是xiaoshuaigege.github.io ，将来通过github提供的二级域名访问blog的地址的时候就是https://xiaoshuaigege.github.io

建立github代码仓库

将图上箭头所指的内容都填写好之后，点击左下角的按钮，就创建了一个github仓库。
此时通过浏览器访问https://xxxx.github.io，应该会看到一些内容。

如果之前已经创建了个人的独立域名，现在就要派上用场了。进入到刚才的Repositories主页，点击箭头所示的setting按钮，进入到 Repositories 的设置页面。

进入代码仓库的设置页面

找到如下图所示位置，在箭头所示位置输入之前申请的域名。

进行一级域名的设置和绑定

点击保存就可以实现github二级域名与自己申请的一级域名的绑定。

进入到自己的域名管理控制台，找到域名和云解析的位置。

找到云解析

在管理控制台上添加一条云解析。如下图所示。

找到云解析

此时通过浏览器访问，就能够访问到我们之前创建的Repositroy了。

<h2 id="RubyJekyll">在windows上安装Ruby和Jekyll环境</h2>

在本地编写blog，最后发布到Github上的前提就是，在本地需要建立Ruby和Jekyll环境，同时还要有git的环境。不过好在现在的Ruby已经集成了git的安装，安装Ruby之后，git自然而然就有了。如果没有安装的朋友可以去 Ruby官方网址下载集成安装。

安装完成之后，找到Git Bash 输入如下命令，就可以查看是否安装成功
```
$ ruby -version  
ruby 2.3.3p222 (2016-11-21 revision 56859) [i386-mingw32]  
```
将github上的Repository复制到本地,将名字改成自己的名字，进入到该Repositroy目录下就可以进行下一步操作了。
```
 git clone git@github.com:xiaoshuaigege/xiaoshuaigege.github.io
 cd xiaoshuaigege.github.io     
```
首先安装Jekyll。检查一下本地的Repository中是否有一个Gemfile的文件。
```
 $ ls
 Gemfile  
```
如果有了，使用文本编辑器打开，并输入将下列代码粘贴覆盖，如果没有，在根目录新建一个Gemfile文件，并将下列代码粘贴进去。
```
 source 'https://rubygems.org'
 gem 'github-pages', group: :jekyll_plugins  
```
进入到该Repositroy目录后，键入如下命令，进行Jekyll安装,系统就会自己安装Jekyll所需要的各种依赖文件。
```
 bundle install  
```
安装完成之后，打开Gemfile去掉下面这行代码
```
 "jekyll", "3.3.0"  
```

将下面这段代码注释去掉

 gem "github-pages", group: :jekyll_plugins

<h2 id="local">使用Jekyll建立本地站点并发布文章</h2>

上面的所有操作执行成功之后，目录内应该会有一个_posts文件夹，这里面就是用来发布的博客。文件的命名有严格的规范，必须是YYYY-MM-dd-FILE-NAME.md或者.markdown,而且该文件就是使用Markdown语法来进行编写的。具体如何编写将会另外开篇介绍，此处不再赘述。
输入如下命令

    bundle exec jekyll serve

执行成功之后在浏览器中输入 localhost:4000就能够预览自己的博客站点了。目录中会自动生成一个_sites 的文件夹，这里面存放了自动生成的博客页面。
当然，目前的样式应该还是比较简陋，将来我们会抽出时间来介绍如何更换主题。接下来将已经创建好的站点提交到github上，就可以直接通过自己的域名进行访问了。