如何在 GitHub 上写博客

2023-02-24 10:35:01Python022

如何在 GitHub 上写博客,第1张

下面我将讲述我是如何在github上搭建的个人博客，在这里我将把我走过的弯路都省略，只讲怎么能完美搭建好自己的博客，相信这也是大家想要的（手动滑稽）

总共需要的东西

首先你在github上写东西，所以你必须有github账号，会基本的git操作

由于我的博客是在WINDOWS下基于jekyll的所以你要下载Ruby（jekyll基于它开发）

还要下载与Ruby配套的RubyDevKit

我将在下面一步步给你指出你需要的的东西的安装步骤以及安装网址

以上便是你基本需要的东西

Ruby

我现在所用是windows所以我用的是Rubyinstaller安装

无脑式安装，直接下一步就好

RubyDevKit

在安装RubyDevKit时，仅仅需要注意的是要与你安装的Ruby版本一致

这是去往RubyDevKit的链接，下载后直接解压到你想让它在的文件夹下，或者自己创建一个文件夹用以存放

此时便有一些命令需要去敲了

首先打开刚才安装好的Ruby命令行，由于我的是windows，所以我直接查看新增，直接就可以看到，并且打开，新的命令行名为‘Start Command Prompt with Ruby’

接着进入刚才解压的RubyDevKit文件夹下配置东西

首先输入 ‘ruby dk.rb init’ 将会生成一个’config.yml’它的作用是是检测系统安装的ruby的位置并记录在这个文件中

(由于我已安装便不再继续演示此处的安装过程，只要在此界面中按照我的步骤，输入相关命令便可成功)

接着输入 ‘ruby dk.rb install’ 等待一会便将这些配置好了

接着就是要安装我们的’jekyll‘了

由于现在的Ruby自带gem，所以不用安装gem，可以直接安装jekyll，命令如下 ‘gem install jekyll’此时便将jekyll安装好了

测试命令 ‘jekyll server’ 若是此处你有下面的错误

现在我们的一些配置都已经初步好了，接着就是利用jekyll帮我们初建一个可用于测试的博客

命令如下 ‘jekyll new Blogname’

进入新建文件夹内启动测试 ‘jekyll server’ 此时便打开了‘127.0.0.1:4000’

此时你在浏览器中输入http://localhost:4000便可初试自己的博客，关于你自己的东西你可以在文件夹下的‘_config.yml’中配置

到这里本地就已经搭建好了

若是测试成功的话会有如下显示

或者有一种错误是提示你要在’jekyll server’前加上‘bundle exec’，此时加上便可

即输入命令 ‘bundle exec jekyll server’

下面便是上传到你的github上

相信只要是想在github上搭建自己的博客的人，应该都对这一步比较熟悉，至少自己肯定将自己的项目或者代码上传到github上共享过，对github有过一定贡献，所以在这里我就不多说

在github上新建一个仓库，仓库名随便你设，只要格式符合 ‘username.github.io’ 便可，其中username是你的仓库名，以后访问时也将会在浏览器中直接输入‘username.github.io’便可访问

最后就是git的一写操作了，将你的新文件夹初始化，然后利用

‘git add .’ ‘git commit -m ‘comments’ ‘git push -u origin master’等操作便可上传

模板问题

若是觉得你现在的模板不好的话，想用我现在的模板的话，也有，我现在用的是leopardpan.github.io的模板，以后也许就会换了，不过若是有人要用的话，下面是他利用jekyll搭建个人博客的基本内容的网址

以上便是利用jekyll搭建个人博客的基本内容，图少了点，尴尬。。

想看完整版请到我的github网址：

grimxiaojun

↑↑↑↑↑↑↑↑↑↑↑↑

在github pages网站下用jekyll制作博客教程

在我动手用jekyll部署我的博客之前，一直使用godaddy上面的wordpress主页来部署我的博客kresnik.co。WordPress当然有很多的优点，在我看来我用WordPress主要是为了

方便清晰的文件结构

可以随意选用的各种模板和插件

相对便宜的部署价格

因为这些优点，所以我想我还会在WordPress官网上继续保留我的免费博客。

既然这样，看官想必想问为什么要换成jekyll来重新部署博客？我简单的总结了一下：

流行又简洁的MarkDown写作语法

轻量级的网站结构，不再有动态网站的沉重

方便的和github pages结合，不仅免费，而且方便

所以对比与WordPress的沉重，jekyll让你回归到创作本身，当然如果你喜欢折腾，jekyll也绝对不会让你失望。推荐下面几个站点亮一下。

rusty shutter

Rasmus Andersson

安装流程

要用github pages，首先要在github中建立一个基于你的用户名的repository: 比如说我，就要建立名为kresnikwang.github.io的repo。在以前的github版本中还需要在后台开启pages的功能，现在系统检测到这样的repo名称之后，会在setting中自动开启GitHub Pages的功能，如下图：这样之后你就可以把这个repo克隆到本地随意进行修改了，在这个里面上传的网页就是你的网站的内容了，可以上传一个index.html试一试，这就是你的网站主页了。关于GiuHub的使用，可以看几个比较好的入门教程：GitHub

之后我们就要在本地部署jekyll，jekyll的原理很简单。这是一个已经合成好的静态html网站结构，你用这个结构在username,http://github.io文件夹里面粘帖好所有文件。再把更新完的本地repo推送到GitHub的master branch里面，你的网站就更新建设完毕了。首先你需要ruby来使用本地jekyll。Mac和Linux可以用Terminal配合yum或者brew这样的包管理器很方便的安装ruby。Windows下更是方便，可以直接中集成好的Ruby installer来进行安装，文章里的就是传送门。

安装完ruby，之后就是要安装RubyGems，gem是一个ruby的包管理系统，可以用gem很方便的在本地安装ruby应用。

安装方法

//在RubyGems官网上下载压缩包，解压到你的本地任意位置

//在Terminal中

cd yourpath to RubyGems //你解压的位置

ruby setup.rb

有了gem之后安装jekyll就很容易了，其实用过nodejs和npm的同学应该很熟悉这样的包安装，真是这个世界手残脑残们的救星。。。。。（楼主不自觉的摸了摸自己快残了的手）安装jekyll，有了gem，直接在Terminal里面输入以下代码：

$ gem install jekyll

好了，现在你的电脑已经准备完毕了。如果你是想自己捣鼓，可以根据这样的目录结构在你的http://username.github.io文件夹下建立以下目录结构：

├── _config.yml

├── _drafts

| ├── begin-with-the-crazy-ideas.textile

| └── on-simplicity-in-technology.markdown

├── _includes

| ├── footer.html

| └── header.html

├── _layouts

| ├── default.html

| └── post.html

├── _posts

| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile

| └── 2009-04-26-barcamp-boston-4-roundup.textile

├── _site

└── index.html

你可以一个个依次建立起来，然后在自己编写一个你想要的博客。

如果你只是个普通用户，只是想要一个模板然后开始写自己的博客。那就很容易了，有几个可以简单开始的模板。

poole/poole · GitHub极简风格的模板

Jekyll Themes jekyll的模板网站，可以找到各式各样你喜欢的模板。

下载完了模板，可以吧里面的内容解压到你自己的网站目录底下。这时候你可以测试一下：

$ cd you website path //cd到你的网站目录下

$ jekyll serve

//一个开发服务器将会运行在 http://localhost:4000/

//你就能在本地服务器看到你用模板搭建的网站了

这时候可以看一下jekyll的设置，让你把模板变成你自己个性化的内容。在网站根目录下面找到_config.yml,这里会有几个比较关键的设置：里面的permalink 就是你博客文章的目录结构，可以用pretty来简单的设置成日期+文章标题.html，也可以用自己喜欢的结构来设置。记得把encoding 设置成utf-8，这样有利于中英文双语的写作和阅读。

到这里你就可以开始写博客了，所有的文章直接放在_posts文件夹下面，格式就是我们之前提到的markdown文件，默认的格式是.md和.markdown文件。每篇文章的开始处需要使用yml格式来写明这篇文章的简单介绍，格式如下：

---

author: kresnikwang

comments: true

date: 2015-04-28 17:42:32+00:00

layout: post

title: PHP, Angular JS Development|My Export Quote|农产品出口工具开发

categories:

- Works

- Tech

tags:

- bootstrap

- javascript

- php

- AngularJS

---

layout就是post，让jekyll知道你这是一篇post，很直观。需要注意的是里面的date，必须按照yml的语法来写，否则就会出现编译错误。可以只用YYYY-MM-DD来显示日期，也可以像我一样在后面加上 HH:MM:SS+00:00 来表示更具体的时间。

到此为止可以开始尽情的写博客了，用GitHub软件同步到你的repository里面，网站上面就可以进行正常的显示了。如果说要添加一下有用的extra功能的话，评论和相关文章这两个功能比较多人会关注。评论我们可以用Disqus国内应该也有类似的网站，到Disqus注册一个账号，选择添加评论区域到自己的网页，你将会的得到类似的代码：

/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

var disqus_shortname = '<USERNAME>'// required: replace example with your forum shortname

var disqus_identifier = "/works/tech/2016/06/07/%E5%9C%A8github%20pages%E7%BD%91%E7%AB%99%E4%B8%8B%E7%94%A8jekyll%E5%88%B6%E4%BD%9C%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B.html"

/* * * DON'T EDIT BELOW THIS LINE * * */

(function() {

var dsq = document.createElement('script')dsq.type = 'text/javascript'dsq.async = true

dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'

(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq)

})()

</script>

<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>

根据不同的模板，把代码添加到_post/post.html或者_include/post.html里你的文章底下，那当这篇文章被访问时，下方就会有评论区了

相关文章的功能也比较好做，jekyll本来就集成了site.related_posts的功能，自动会寻找相关内容的文章，在你的post代码下面融入以下代码：

<h2>Related Posts</h2>

<li>