欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

在github.io上写博客

程序员文章站 2022-03-07 11:51:06
...

最近查找资料的时候，看到别人的博客发布在xxx.github.io上，感觉很页面简洁，想学一下，将后面的一些学习到的深度学习的小项目的实验过程整理发布在上面。

经过查找，才知道那个博客是由github pages提供的服务，也就是可以在github pages上建立你自己的博客。那就从github pages的官网开始吧。

从github pages开始就行了

https://pages.github.com/

按照官网的步骤来吧

1. 首先‘Create a repository’，这里直接把官网的图截过来了，注意的是：这个repository的名字叫 “xxx.github.io”，这个xxx就是你账号的名字。当然下面也可以勾上”Initialize this … README”。

在github.io上写博客

2. 到这里，官网后面就是讲让你‘clone the repository’了，其实这里你已经有了自己博客网站了，但是没东西，顶多有个README.md（如果你创建仓库的时候勾选了”Initialize this … README”）。 可以通过在浏览器上输入’xxx.github.io’访问你的页面了。也可以通过Settings看到点端倪。
在github.io上写博客

                                ↓

在github.io上写博客

看到上面的对勾了没，就是这个，而且后面我发现，如果你的这个博客有什么地方有问题的时候，除了给你发email，还会在这里显示出错误，不错的。

3. ok,继续回到官网上，这里官网会问你“What git client are you using?”，这是因为后面你需要把你创建的这个repository clone下来，添加点内容，再commit到github上，那你的github.io上就有东西显示了。因为github page写文章可不太方便，不能直接在网页上写文章，要通过上传md文件的方式写文章才行。

怎么clone就不说了，继续. 现在你clone下来了，添加个文件 index.html，在里面写点代码，就是写个demo网页，显示一行字，证明你的博客网站能行。

<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>

PS: 现在把这个文件commit上去吧， 这里我用的是windows的git，一用还不会用，尴尬。后来琢磨了一下，也记录一下。

你打开你的客户端，就像下面这样

在github.io上写博客

看下面是有个“Commit to master”按钮吧，但是不能点，git是你必须得写点描述信息才能commit的，也就是在Summary里面写点东西，比如说”add the index.html”就可以commit了。但是光commit是不行滴，commit只是提交到你本地了，还得push到你的github上，你的github才能更新（内心崩溃）。你commit完了之后，右上角的“Fetch origin”就会变成”Push origin”了。点一下就行了。再去看你的“xxx.github.io”，就能看到东西了。

在github.io上写博客

官网到这里就完了，但下面还有提示，“Now that you’re up and running, here are a few things you should know”，这里我就主要注意了下“Blogging with Jekyll”。这是个什么玩意呢？经过我的研究（Using Jekyll, you can blog using beautiful Markdown syntax），就是让你写博客很快乐的一个东西。直接使用MarkDown语法写就可以了，而不用像上面似的研究html。

而且需要说明的是，这个Jekyll是在你本地运行的。怎么说呢，也是我安装完了才知道的。这个东西可以使你在本地修改了文档，就可以在浏览器中看到效果，而不是必须上传到github上才能看到效果，那样的话很难过。当然它需要你下载下来用，下面先安上它看看再说吧。

Jekyll

总共分三步
安装Ruby， 安装DevKit， 安装Jekyll

1. 安装Ruby (之前你可以向下拉看一个DevKit（也在这个页面），是可以对应Ruby的哪个版本的，你再选择安装哪个Ruby)
http://rubyinstaller.org/downloads/
在github.io上写博客

安装的时候注意下，选上“Add Ruby executables ot your PATH”
在github.io上写博客

装完了，测试一下

在github.io上写博客

2. 安装DevKit
在github.io上写博客
下面就跟着做吧，不要问为什么，因为我也不知道，参考文献1.

》这看着是个.exe文件，其实运行一下竟然是解压，好吧。我解压到“C:\DevKit”里面。
》打开你的cmd

c:
cd DevKit
ruby dk.rb init
notepad config.yml #打开这个文件，这个文件还是很重要的后面也要说它

在打开的记事本窗口中，于末尾添加新的一行(不包括引号，但是有那个短横线)
“- C:\Ruby200-x64”
（这个就是安装的Ruby的那个文件夹），保存文件并退出。

3. 安装Jekyll
先看一下，你gem安装上了没

gem -v

OK，装上了，下面装Jekyll

gem install jekyll

很简单，再测一下看装上了没

jekyll -v

在github.io上写博客

4. 现在用jekyll创建一个demo项目，感受一波

4.1 在cmd中先cd 到一个目录，我是E:test文件夹

jekyll new myblog

在github.io上写博客

就在这个文件夹下自动生成了这么多东西，就感受一波，不忙知道这些东西各个是干什么的。
在github.io上写博客

4.2 运行这个myblog

jekyll s  或 jekyll serve #这两个命令都中

在github.io上写博客
这就启动起来了，看红框框出来的部分，我们可以在本地浏览器中输入”http://127.0.0.1:4000” 访问我们的这个myblog了，见下图。

在github.io上写博客
4.2.1 这里如果4000端口被占用，就有可能报错“error:permission denied -bind(2) for 127.0.0.1:4000”，你得把你的端口关了
a. 先找到4000端口被哪个进程占用了，找到PID值

netstat -aon | findstr "4000"

b. ctrl+shift+del 打开任务管理器，切到“服务”选项卡，找到PID那个进程，右键“停止服务”就OK了。

4.2.2 还有一个注意的地方，也就是在启动之后，文件夹下面会自动生成一个”_site”文件夹，这个是自动生成的，这里注意一下，后面还会提。

OK，这就是个demo，大致知道这个jekyll是怎么用，干什么就可以了。那它干了啥呢，先创建了一个符合jekyll格式的文件夹，里面自动创建了一些文件，然后启动起来，就可以在本地浏览了。那我们怎么跟我们的github.io博客联系起来呢，这就简单了，我们先把自己的“xxx.github.io” clone下来，然后把里面的东西都删掉，再在这个文件夹里按照jekyll提供的格式来写自己的博客，然后将它上传到github上就可以在xxx.github.io*问了。下面就说一下这个过程。

以jekyll格式来写自己的github.io博客

http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
1. 先把自己的xxx.github.io clone下来
2. 除了.git文件，其它的都删掉，想留下READEME也行
3. 在根目录下建一个名为_config.yml文件（这是jekyll的规矩，你看上面我们用jekyll new myblog 命令创建的那个文件夹下面也有这个_config.yml文件，这里我们只不过是自己创建罢了。不要慌，常规操作。）
3.1 我们填入： 

baseurl: /

目录结构变成：

　xxx.github.io/
        　　|--　_config.yml

4 在根目录下，创建一个_layouts目录（这个前面加一个下横杠的命名方式也是jekyll的规定），用于存放模板文件。进入该目录，创建一个default.html文件，作为Blog的默认模板。在该文件中填入以下内容。 

<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta http-equiv="content-type" content="text/html; charset=utf-8" />
　　　　<title>{{ page.title }}</title>
　　</head>
　　<body>

　　　　{{ content }}

　　</body>
　　</html>

{{ page.title }}表示文章标题，{{ content }}表示文章内容，Jekyll使用Liquid模板语言

目录结构如下：

xxx.github.io/
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html

5 创建文章
回到项目根目录，创建一个_posts目录，用于存放blog文章
进入该目录，创建第一篇文章(注意，文件名必须为”年-月-日-文章标题.后缀名”的格式。如果网页代码采用html格式，后缀名为html；如果采用markdown格式，后缀名为md），文件名假定为2017-11-15-hello-world.html，该文件填入以下内容：（注意，行首不能有空格）

　---
　　layout: default
　　title: 你好，世界
　　---
　　<h2>{{ page.title }}</h2>
　　<p>我的第一篇文章</p>
　　<p>{{ page.date | date_to_string }}</p>

每篇文章的头部，必须有一个yaml文件头，用来设置一些元数据。它用三根短划线---，标记开始和结束，里面每一行设置一种元数据。layout:default，表示该文章的模板使用_layouts目录下的default.html文件；title: 你好，世界，表示该文章的标题是你好，世界，如果不设置这个值，默认使用嵌入文件名的标题，即hello world。

在yaml文件头后面，就是文章的正式内容，里面可以使用模板变量。{{ page.title }}就是文件头中设置的你好，世界，{{ page.date }}则是嵌入文件名的日期（也可以在文件头重新定义date变量），| date_to_string表示将page.date变量转化成人类可读的格式。

目录结构变成：

xxx.github.io/
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2012-08-25-hello-world.html

6 创建首页
我们需要一个首页，可以链接到我们的blog上去。
回到根目录，创建一个index.html文件，填入以下内容。

　　---
　　layout: default
　　title: 我的Blog
　　---
　　<h2>{{ page.title }}</h2>
　　<p>最新文章</p>
　　<ul>
　　　　{% for post in site.posts %}
　　　　　　<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
　　　　{% endfor %}
　　</ul>

它的Yaml文件头表示，首页使用default模板，标题为”我的Blog”。然后，首页使用了{% for post in site.posts %}，表示对所有帖子进行一个遍历。这里要注意的是，Liquid模板语言规定，输出内容使用两层大括号，单纯的命令使用一层大括号。至于{{site.baseurl}}就是_config.yml中设置的baseurl变量。

目录结构变成：

　　xxx.github.io/
　　　　|--　_config.yml
　　　　|--　_layouts
　　　　|　　　|--　default.html 
　　　　|--　_posts
　　　　|　　　|--　2017-11-15-hello-world.html
　　　　|--　index.html

　　/jekyll_demo
　　　　|–　_config.yml
　　　　|–　_layouts
　　　　|　　　|–　default.html
　　　　|–　_posts
　　　　|　　　|–　2012-08-25-hello-world.html
　　　　|–　index.html

7 发布
按上面的方法，commit之后再push到github上，就可以在xxx.github.io上看到结果了。

同时这里可以能过本地的jekyll来在本地浏览器里查看。
1. 先就是cd到当前目录，
2. 然后jekyll s，
3. 再在本地浏览器里输入http://127.0.0.1:4000查看了。

如果想仔细研究一下这个jekyll的语法要求到底是什么，可以参考下面的链接：
http://www.pchou.info/ssgithubPage/2013-01-07-build-github-blog-page-05.html
如果英语听力好的话，也可以看yotube上的这个视频，非常好，强烈推荐
https://www.youtube.com/watch?v=oiNVQ9Zjy4o&index=1&list=PLWjCJDeWfDdfVEcLGAfdJn_HXyM4Y7_k-

到这里，我也入门了，可以从头自己写的话，估计会很麻烦，我就想有没有已经比较不错的模板，我可以自己拿来用，我就写博客就行了。所以又去百度了。百度“有哪些简洁明快的 Jekyll 模板？”，百度到一个”http://huangxuan.me/“，这个站点还是不错的，它又开放了github链接，我就直接把它的clone到本地，然后修吧修吧，再提交到我自己的xxx.github.io仓库里，bang!!!，再去访问xxx.github.io就是那个样子的了，真不错。现在我也在研究研究怎么改这个模板给自己用了。

我的github.io目前就用的这个，但是还没改，后边会慢慢改的，我的是aichitudou.github.io，以后可以来看看。

好了，就先这样吧，后边有新的东西再加吧，真的可以看一下
https://www.youtube.com/watch?v=oiNVQ9Zjy4o&index=1&list=PLWjCJDeWfDdfVEcLGAfdJn_HXyM4Y7_k-
这个网址，即使英文不好，也可以看。可以很好的理解一下jekyll的工作方式。

没检查就发布了，如果哪里有错，希望各位给指出来。不尽感激。。

reference

  1. http://www.jianshu.com/p/88e3474cef72
  2. http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
  3. https://www.zhihu.com/question/20223939
  4. http://huangxuan.me/
  5. https://link.zhihu.com/?target=https%3A//github.com/Huxpro/huxpro.github.io
  6. https://www.youtube.com/watch?v=oiNVQ9Zjy4o&index=1&list=PLWjCJDeWfDdfVEcLGAfdJn_HXyM4Y7_k-

上一篇： wordpress自定义显示分类文章的数目

下一篇： 利用JavaScript实现模式匹配的String方法

推荐阅读