一、环境准备

使用Github Pages搭建个人博客，一劳永逸，可以让我们更加专注于博客的撰写。博客的更新是通过将新建或改动的博客放在指定文件夹并推送到远程Github仓库来完成的，所以我们本地需要有Git环境，如果还没有安装Git，可以看下面的文章：

  1. 安装Git
  2. Git关联远程GitHub仓库

二、搭建博客

1、新建仓库

以username.github.io作为仓库名字。

2、本地克隆

本地创建文件夹，用于存放远程仓库，打开所创建的文件夹，右键选择git bash here，表示在当前目录打开git bash程序，然后执行如下命令，将刚才创建的仓库克隆到本地：

git clone https://github.com/AmazingChen/amazingchen.github.io.git

如果步骤1中创建仓库时，没有勾选Initialize this repository with a README，将有如下提示：

warning，可以忽略，或手动在远程仓库创建一个readme.md，然后重新clone。

3、新建主页

在仓库文件夹下创建index.html：

<!DOCTYPE html>

<html>

	<head>

	</head>

	<body>

	<p>hello, my first page!</p>

	</body>

</html

4、推送到远程仓库

在仓库文件夹下，右键选择git bash here，然后执行命令：

git add --all

git commit -m "add index.html"

git push origin master

5、验证

成功push到远程仓库后，访问 username.github.io，看到如下界面，就表示成功通过Github Pages搭建了个人的博客。

三、更换主题

上面裸奔的博客主页，跟原始人类一样，你一定不满意，我们穿越几千年文明，直接站在巨人的肩膀上，选一套主题吧。

Github Pages基于Jekyll构建，Jekyll 可以帮助我们把纯文本转换为静态博客网站，实现一劳永逸。

你可以在JekyllThemes找到喜欢的主题，也可以在其他地方找。

"I want you, Vno-Jekyll." 我选择Vno。

1、下载主题

下载后，首先将我们仓库文件夹下的文件清空，但是要保留.git文件夹：

然后将下载的主题压缩包解压到仓库文件夹下，结果如下：

访问 Jekyll-目录结构 详细了解每个文件夹的功能：

.

├── _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

├── .jekyll-metadata

└── index.html

2、搭建Jekyll环境

只有主题文件是不够的，我们需要搭建Jekyll环境，通过遵循Jekyll的规范，让Jekyll帮助我们生成静态网站。

（1） 安装Ruby：Ruby安装教程

（2）打开CMD，执行命令安装Jekyll：

gem install jekyll

（3）进入仓库文件夹，执行命令：

bundle install

注意，必须进入仓库文件夹下再执行上述命令，否则会有如下提示，表示bundle找不到gemfile文件：

Rails 3中引入Bundle来管理项目中的所有Gem依赖，该命令只能在一个含有Gemfile的目录下执行，bundle install 命令将尝试更新系统中已存在的gem包。更多参考：bundle install 命令

（4）启动Jekyll服务

bundle exec jekyll serve

启动Jekyll服务时，可能会遇到如下错误：

  Conversion error: Jekyll::Converters::Scss encountered an error

  while converting 'css/main.scss':

                    Invalid GBK character "\xE2" on line 10

jekyll 3.4.0 | Error:  Invalid GBK character "\xE2" on line 10

很明显，是编码问题，参考网上方法解决 Invalid GBK character "\xE2" 过程中的发现，找到D:\RailsInstaller\Ruby2.3.3\lib\ruby\gems\2.3.0\gems\sass-3.7.2\lib\sass.rb文件，在require后追加：

Encoding.default_external = Encoding.find('utf-8')

然后重新启动Jekyll服务，看到如下打印，表示启动成功：

（5）验证

访问 http://127.0.0.1:4000，当你发现你的博客首页从一个原始人变成光鲜亮丽的现代人时，表示博客主题已经应用成功了。

（6）推送到远程仓库

做完上述操作后，由于还没有将修改提交到远程仓库，所以当你访问username.github.io时，你看到的还是一个光溜溜的原始人，执行以下命令完成进化吧皮卡丘：

git add .

git commit -m "apply theme"

git push origin master

成功推送到远程仓库后，等待几分钟，访问username.github.io，OK，成功。天黑请闭眼，有问题请留言。

四、发布博客

在仓库文件夹下，进入_posts目录，所有的文章都必须放在_posts文件夹下，访问 Jekyll-目录结构 详细了解每个文件夹的功能。

以markdown文档为例，按照如下格式创建md文件。

yyyy-MM-dd-filename.md

完成后push到远程仓库，即可完成更新。

五、修改主题

将网站的信息改成自己的，修改_config.yml文件：

# Basic

title: 陈贤靖

subtitle: 井与陆地，海和岛屿。

description: Android Developer.

creator: <a href="http://onev.cat">@onevcat</a>

url: "https://amazingchen.github.io/#blog"

permalink: /:year/:month/:title/

# Format

highlighter: rouge

# supported colors: blue, green, purple, red, orange or slate. If you need clear, leave it empty.

# cover_color: red

# The blog button should not be removed.

blog_button:

    title: Blog

    description: Visit blog

# Navigation buttons in the front page.

nav:

    - {title: Projects, description: My Projects, url: 'https://github.com/AmazingChen/VHabit'}

    # - {title: Another Button, description: A button, url: 'http://example.com'}

# Pagination

plugins: [jekyll-paginate]

paginate: 10

paginate_path: "page/:num/"

# Comment

comment:

    disqus: vno-jekyll

    # duoshuo: 

# Social

social:

    github: AmazingChen

    mail: shixianjingla@gmail.com

# Google Analytics

ga:

    # id: your_ga_id

    # host: your_host

如果你对这套主题不太满意，并且具备web基础，可以动手修改。

如果不想博客数据被人轻易获取，建议将github仓库设置为私有。

修改之后，我的博客长这样：陈贤靖


完。

使用github pages搭建个人博客的更多相关文章

  1. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  2. 基于 Hexo + GitHub Pages 搭建个人博客（二）

    在 基于 Hexo + GitHub Pages 搭建个人博客(一) 这篇文章中,我们已经知道如何使用 Hexo + GitHub Pages 搭建一个个人博客,GitHub 为我们提供了免费的域名和 ...

  3. 基于 Hexo + GitHub Pages 搭建个人博客（三）

    一.添加扫描二维码关注功能 打开 themes 目录下的 next 主题配置文件,找到 Wechat Subscriber 标签,将该标签下的配置改成如下形式: # Wechat Subscriber ...

  4. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  5. 基于 Hexo + GitHub Pages 搭建个人博客（一）

    前言:我的博客写作之路 15 年刚上大学,第一次接触公众号,就萌生了创建一个公众号写点东西,但最终不了了之. 很快到了 16 年,开始接触网上各大博客网站,接触最多的当属 CSDN,萌生了注册一个博客 ...

  6. Hexo + Github Pages 搭建个人博客

    之前一直想搭建自己的博客,由于自己的懒惰拖到现在.好了,废话不多说!直接上干货! 安装Node.js 安装Git Github Pages配置 安装Hexo及主题设置 进阶篇-高级定制 其它实用功能 ...

  7. Hugo + Github Pages 搭建个人博客

    尝试过 Hexo .GatsbyJs. Vuepress 搭建博客后,对这些工具最大的不满,就是运行速度以及打包速度. 后来看到 Hugo ,号称最快的静态站点生成器后. 尝试搭建博客,发现不管是运行 ...

  8. 使用 jekyll + github pages 搭建个人博客

    1. 新建 github.io 项目 其实 github pages 有两个用途,大家可以在官方网页看到.其中一个是作为个人/组织的主页(每个账号只能有一个),另一个是作为 github 项目的项目主 ...

  9. 基于Hexo+Github Pages搭建的博客

    概念 Github Pages可以被认为是用户编写的.托管在github上的静态网页.使用Github Pages可以为你提供一个免费的服务器,免去了自己搭建服务器和写数据库的麻烦.此外还可以绑定自己 ...

随机推荐

  1. 常用的几个在线生成网址二维码的API接口

     原创,转载请注明出处! 用接口的好处就是简单,方便,时时更新,二维码生成以后不用保存在本项目服务器上面,可以减少不必要的开支,无需下载安装什么软件,可简单方便地引用,这才是最便捷的免费网址二维码生成 ...

  2. Python库

    --Python库之Pandas库-------- 自主选择学习了Python中的Pandas库,以下是本人对Pandas库的认识: Pandas库是Python最受欢迎的库之一,主要用于数据的操作. ...

  3. System Error. Code:1722. RPC服务器不可用解决办法

    原文链接(转载请注明出处):System Error. Code:1722. RPC服务器不可用解决办法 问题 最近在软件设计上机课的时候,使用 starUML 建模工具画UML图的时候总是弹出一条如 ...

  4. 创建第一个core项目（netCore学习笔记1）

    1.安装 core和netFramework其实是相对独立的,但是core的IDE是在vs2017才开始支持,而vs2017的安装环境必须搭配.net4.6,所以: Step1:安装.net4.6 S ...

  5. PAT1047: Student List for Course

    1047. Student List for Course (25) 时间限制 400 ms 内存限制 64000 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Y ...

  6. namespace------------https://www.cnblogs.com/linhaifeng/p/6657119.html

    PHP支持两种抽象的访问当前命名空间内部元素的方法,__NAMESPACE__ 魔术常量和namespace关键字. 常量__NAMESPACE__的值是包含当前命名空间名称的字符串.在全局的,不包括 ...

  7. Linux kernel的中断子系统之（九）：tasklet

    返回目录:<ARM-Linux中断系统>. 总结: 二介绍了tasklet存在的意义. 三介绍了通过tasklet_struct来抽想一个tasklet,每个CPU维护一个tasklet链 ...

  8. jquery-bootgrid

    http://www.jquery-bootgrid.com/GettingStarted 日志是生产环境非常重要的配置,在迁移老的工程到spring-boot时日志的设置兼容很重要,以下是自己在配置 ...

  9. 10.app后端选择什么开发语言

    在qq上,经常看到有创业团队的创始人一直都招不到技术人员,除了项目的因素外,很大的原因就是所需要掌握的开发语言偏门.通过阅读本文,详细了解选择开发语言的核心原则,使各位心里对开发语言的选择更加有数. ...

  10. 【原】用Java编写第一个区块链（二）

    这篇文章将去介绍如何使用区块链进行交易. [本文禁止任何形式的全文粘贴式转载,本文来自 zacky31 的随笔] 目标: 在上一篇文章中,我们已经创建了一个可信任的区块链.但是目前所创建的链中包含的有 ...