【Github】Github+Jekyll搭建个人博客

前期准备


注册Github

到 Github 注册账户,记好自己的用户名,以后经常用,比如使用Git的时候

购买域名

我在新网上面买的,我用新网的原因是觉得他简洁,域名解析很方便,但关键是他便宜。

还有可选的主流比如:

  • 万网(万网是阿里云的)

  • GoDddy(GoDddy是新加坡的,所以不用实名备案,主要他是用支付宝)

域名解析

我在新网解析的DNS,具体怎么做,新网有教程。其实就是让域名指向Github的网站空间IP。

新建Github pages

Github官方早就把所有你想知道的东西都准备好了,在Github Pages上有详细过程,告诉你怎么建立Github pages。

Fork

建立基于Jekyll的个人Github Pages有两种方法:

  1. 自己学习Jekyll教程和网页设计,设计自己的网页。

  2. Fork(Git系统的创建分支,简单来说是把当前仓库复制一份到你的仓库,你可以进行修改,因为你的仓库是原来仓库的新的分支)已有的开源博客仓库,进行再创作。

CNAME

CNAME意思是别名,想输入自己的域名进入博客,而不是用github的丑陋域名,就需要在github.io文件夹下面新建一个文件叫CNAME,里面写上自己的域名,比如www.xxx.com,然后就可以了。

Jekyll环境搭建


Jekyll介绍

将纯文本转化为静态网站和博客。

简单 – 无需数据库、评论功能,不需要不断的更新版本——只用关心你的博客内容。
静态 – 只用 Markdown (或Textile)、Liquid、HTML & CSS 就可以构建可部署的静态网站。

使用了Jekyll 只要把远端 github 仓库里的博客 clone 下来,写文章后再提交就可以了。Hexo由于远端提交的是静态网页,无法直接写 Markdown 文章。

目录结构

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是: 你用你最喜欢的标记语言来写文章,可以是 Markdown,也可以是 Textile,或者就是简单的 HTML, 然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置URL路径, 你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现,最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的:

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2016-10-08-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

这些目录结构以及具体的作用可以参考官网文档

进入 _config.yml 里面,修改成你想看到的信息,重新 jekyll server ,刷新浏览器就可以看到你刚刚修改的信息了。

安装Ruby

下载的时候选择最新版的,32位就下载第一个,64位就下载第二个

安装的时候记得要勾选添加Ruby到PATH

安装RubyGems

windows下下载ZIP格式较为方便,下好后解压到本地任意路径,下面以 {unzip-path} 代替你解压的路径。 打开windows的cmd终端(按win+R快捷键打开“运行”,输入cmd),输入命令:

$ cd {unzip-path}  //如果你没有解压在C盘,windows的终端切换到其他盘需要写为 cd /d {unzip-path}
$ ruby setup.rb

然后输入如下代码,如果出现Ruby的版本号,就安装好了:

$ ruby -v

安装Jekyll

在终端里输入如下代码安装Jekyll:

$ gem install jekyll

在终端输入如下代码,如果出现Jekyll的版本号,就安装好了:

$ jekyll -v

安装jekyll-paginate

在终端里输入如下代码安装:

$ gem install jekyll-paginate

写博客


同步仓库

打开Git Bash,输入以下命令切换到你想放置本地代码仓库的位置:

$ cd {本地路径}     // 比如:cd d:/workspace

clone你自己的远程仓库:

$ git clone https://github.com/{username}/{username}.github.io.git     // 用你的Github用户名替换{username}

启动本地服务

在终端中输入命令

$ cd {local repository} // {local repository}替换成你的本地仓库的目录
$ jekyll serve

然后在浏览器地址栏输入http://localhost:4000/就已经可以看到网站的模样。

只要jekyll serve服务开着,本地仓库文件有任何更新,本地网站刷新都能马上看到。

撰写博客

所有的文章都是_posts目录下面,文章格式为mardown格式,文章文件名可以是 .mardown或者.md

可以直接从_posts/目录下复制一份出来2016-10-16-welcome-to-jekyll副本.markdown,修改名字为2016-10-16-article1.markdown

注意:文章名的格式前面必须为2016-10-16-,日期可以修改,但必须为年-月-日- 格式,后面的article1是整个文章的连接URL,如果文章名为中文,那么文章的连接URL就会变成这样的:http://baixin.io/2015/08/%E6%90%AD%E5/, 所以建议文章名最好是英文的或者阿拉伯数字。 双击2016-10-16-article1.markdown打开

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-10-16 11:29:08 +0800
categories: jekyll update
---

正文...

title: 显示的文章名, 如:title: 我的第一篇文章 
date: 显示的文章发布日期,如:date: 2016-10-16 
categories: tag标签的分类,如:categories: 随笔

注意:文章头部格式必须为上面的,…. 就是文章的正文内容。

推荐使用Markdown语言写文章。

Git上传博客

使用Git Bash进行操作时,先用 cd 命令将工作目录设置到要操作的本地仓库

$ cd {刚才clone下来的项目文件夹路径}

每当对本地仓库里的文件进行了修改,只需在Bash中依次执行以下三个命令即可将修改同步到Github,刷新网站页面就能看到修改后的网页:

$ git add .
$ git commit -m "statement"   //此处statement填写此次提交修改的内容,作为日后查阅
$ git push origin master

你可能感兴趣的:(开源)