By

文章目录
  1. 1. 创建github pages
    1. 1.1. 创建一个名为username.github.io的仓库
    2. 1.2. 在命令行当中把这个仓库clone下来.
    3. 1.3. Hello World
  2. 2. 安装Node.js
    1. 2.1. 选择版本
    2. 2.2. 安装Node.js
    3. 2.3. 使用npm的国内镜像来解决npm install的问题
  3. 3. 安装Hexo
    1. 3.1. home目录下,使用npm这个安装工具可以非常简单地安装
    2. 3.2. 在一个目录当中初始化Hexo
    3. 3.3. 配置blog目录,在blog目录下面执行
    4. 3.4. 复制wuchong的修改的主题
    5. 3.5. 或者复制yangjian的主题
    6. 3.6. 启用主题
    7. 3.7. 启动Hexo查看效果
    8. 3.8. 部署到github上
    9. 3.9. 部署到Github前需要配置_config.yml文件。
    10. 3.10. 执行下列指令即可完成部署，注意部署会覆盖掉你之前在username.github.io中存放的文件,在这里也就是index.html
  4. 4. 写博客
    1. 4.1. hexo new
  5. 5. 有关想使用github来备份自己的blog目录的做法
    1. 5.1. 超简单方法
    2. 5.2. 不想使用多个仓库,只想用一个仓库既保存username.github.io,又保存blog
  6. 6. 有关hexo3的代码块是白色的问题
  7. 7. 有关jacman的首页默认是展开式的情况
  8. 8. 关于自己的域名绑定到github.io上的方法
    1. 8.1. 购买域名
    2. 8.2. 域名绑定
  9. 9. 关于hexo目录下的_config.yml文件解析：
    1. 9.1. 网站
    2. 9.2. 网址
    3. 9.3. 目录
    4. 9.4. 文章
    5. 9.5. 分类 & 标签
    6. 9.6. 日期 / 时间格式
    7. 9.7. 分页
    8. 9.8. 扩展
  10. 10. 关于在博客当中插入图片的推荐方法
  11. 11. 友情连接

目前想要建造自己的博客网站有这样几种方法：

我个人使用的是hexo的方法。由于个人电脑是Ubuntu系统，所以以下是在Ubuntu下的教程。

创建github pages

创建一个名为username.github.io的仓库

首先需要在自己的github上创建一个名为username.github.io的仓库(这里假设已经申请了github账号).比如我的github的账号名为adairjun，那么我就需要创建adairjun.github.io这个名称的github仓库.

在命令行当中把这个仓库clone下来.

在clone之前需要配置一下ssh的秘钥，避免每次都输入密码.

1
2
$ ssh-keygen

就在~/.ssh/目录下生成了公钥id_rsa.pub和私钥id_rsa

登陆github系统。点击右上角的 Account Settings—>SSH Public keys —> add another public keys
将id_rsa.pub的内容复制下来，粘贴到github当中去.
在命令行测试一下是否成功：

1
2
$ ssh -T git@github.com

将username.github.io这个仓库clone到本地:

1
2
$ git clone git@github.com:username/username.github.io

Hello World

进入到项目目录，并且增加index.html

1
2
3
4
5
6
$ cd username.github.io
$ echo "Hello World" > index.html
$ git add --all
$ git commit -m "Initial commit"
$ git push -u origin master

然后在浏览器当中访问username.github.io就能出现Hello World啦！我这里是adairjun.github.io,以后username.github.io就是你的博客域名。
但是难道每次写博客还需要手工编写index.html文件然后push到github上？当然不是，使用Hexo这个Node.js工具就能轻松写博客了。

安装Node.js

选择版本

在Hexo的官网上给出了教程:

1
2
$ nvm install 0.12

表明需要安装0.12版本的Node.js，接下来就到Node.js的github上去下载release版本,我下载的版本是0.12.7

安装Node.js

1
2
3
4
5
$ tar -zxvf node-0.12.7.tar.gz
$ cd node-0.12.7
$ ./configure
$ make && sudo make install

那么node和npm就安装到了/usr/local/bin目录当中了.

使用npm的国内镜像来解决npm install的问题

编辑~/.npmrc加入以下内容:

1
registry = https://registry.npm.taobao.org

这样就加入了淘宝的镜像

安装Hexo

home目录下,使用npm这个安装工具可以非常简单地安装

1
2
3
4
5
$ npm install hexo-cli -g
$ npm install hexo -g
$ npm install hexo-server -g
$ npm install hexo-deployer-git -g

在一个目录当中初始化Hexo

1
2
3
$ mkdir blog
$ cd blog
$ hexo init

或者在home目录下

1
$ hexo init blog

这样就创建了一个专门写博客的目录blog

配置blog目录,在blog目录下面执行

1
2
$ npm install
$ npm install hexo-deployer-git --save

复制wuchong的修改的主题

1
git clone https://github.com/wuchong/jacman.git themes/jacman

或者复制yangjian的主题

1
git clone https://github.com/A-limon/pacman.git themes/pacman

启用主题

修改Hexo目录下的_config.yml配置文件中的theme属性，将其设置为jacman或者pacman

1
theme: jacman

启动Hexo查看效果

1
$ hexo server

提示信息出现：

1
INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

在浏览器当中访问http://0.0.0.0:4000/,可以看见Hexo的效果。
现在的问题是，blog目录是作为博客的服务器地址，而我们想把github配置成我们的服务器地址，所以下一步就是部署到github上

注意:

如果这里使用hexo server报错的话,请删除blog目录,再重新执行hexo init blog的操作.因为是初始化的问题,需要重头再来

部署到github上

部署到Github前需要配置_config.yml文件。

1
2
3
4
deploy:
  type: github
  repository: git@github.com:username/username.github.io.git
  branch: master

reponsitory配置成你的仓库地址，在这里我的是git@github.com:adairjun/adairjun.github.io.git

注意:

type,responsitory,branch前面的两个空格不能去掉。否则使用hexo server启动时会报错。

执行下列指令即可完成部署，注意部署会覆盖掉你之前在username.github.io中存放的文件,在这里也就是index.html

1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

可以在hexo deploy之前，先运行hexo server查看一下启动有无问题。
hexo deploy之后，就可以通过http://username.github.io来访问hexo生成的页面

写博客

hexo new

1
$ hexo new "这是一个新的开始"

执行命令后，会在项目/source/_posts中生成 这是一个新的开始.md文件，用编辑器打开编写即可。我一般使用sublime text 3
由于hexo使用的是Markdown语法，这里推荐Cmd Markdown,可以在这个页面编辑好之后然后再复制到 这是一个新的开始.md文件当中

有关想使用github来备份自己的blog目录的做法

超简单方法

就是在自己的github上新建一个blog仓库,然后在本地的blog目录当中添加关联

不想使用多个仓库,只想用一个仓库既保存username.github.io,又保存blog

这就要使用到git的分支功能
可以看到在blog的_config.yml当中,使用的branch是master,那么我们只需要新建一个分支blog就行了
在本地的blog目录下添加远程github的关联

1
2
3
4
$ git init
$ git add -all
$ git commit -m"First Commit"
$ git remote add git@github.com:username/username.github.io.git

然后执行

1
$ git push origin master:blog

就是把本地master分支放到github的blog分支上.
下次想要从github里面clone出来blog分支只需要执行

1
$ git clone -b blog git@github.com:username/username.github.io.git blog

有关hexo3的代码块是白色的问题

hexo3写的代码并不是黑色的背景,看的很不舒服,解决方案是到themes/pacman/source/css/_base目录当中,注释掉variable.styl以下代码:

1
highlight = hexo-config("highlight.enable")

如果你使用的是jacman的主题的话,到themes/jacman/_config.yml当中

1
2
3
# 代码高亮主题
# available: default | night
highlight_theme: default

把default改成night就可以了

有关jacman的首页默认是展开式的情况

1
2
3
index:
  expand: true           ## default is unexpanding,so you can only see the short description of each post.
  excerpt_link: Read More

把expand由true改为false就可以了

关于自己的域名绑定到github.io上的方法

购买域名

推荐上godaddy购买,因为听说国内的万网或者新网一点都不自由,说封就封.

域名绑定

使用DNSpod,以及官方的帮助文件可以简答地把godaddy和DNSpod绑定到一起。
在DNSpod当中加上两条:

主机记录 记录类型 线路类型 记录值 权重 MX优先级 TTL 操作
@ CNAME 默认 username.github.io - - 600
www CNAME 默认 username.github.io - - 600

这个的意思是当查找你的域名的时候,自动跳转到username.github.io上
设置完这个之后需要在blog目录下面的source目录当中创建一个文件CNAME
并在文件当中写上你的域名,比如我的就是xiongjun.info

关于hexo目录下的_config.yml文件解析：

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
author 您的名字
language 网站使用的语言
timezone 网站时区

网址

参数 描述 默认值
url 网址
root 网站根目录
permalink 文章的格式 :year/:month/:day/:title/
permalink_default 各部分的默认值

目录

参数 描述 默认值
source_dir 资源文件夹，这个文件夹用来存放内容 source
public_dir 公共文件夹，这个文件夹用于存放生成的站点文件 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹 downloads/code
i18n_dir 国际化（i18n）文件夹 :lang
skip_render 跳过指定文件的渲染，您可使用 glob 来配置路径

文章

参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置

分类 & 标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

日期 / 时间格式

参数 描述 默认值
date_format 日期格式 MMM D YYYY
time_format 时间格式 H:mm:ss

分页

参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

扩展

参数 描述
theme 当前主题名称
deploy 部署

关于在博客当中插入图片的推荐方法

因为markdown语法的博客可以在博客当中插入本地图片和在线图片。对于我个人来说，我只使用在线图片。
在这里推荐一个chrome的插件：围脖是个好图床,我都是用这个插件来把本地照片上传，然后在博客当中使用在线图片的。

注意一点，使用这个插件之前需要自己先登陆网页版微博，否则图片是上传不上去的。这里吐槽一下开发者，这种情况应该抛出一个警告，让用户知道自己微博没有登陆。

友情连接

如何利用GitHub Pages和Hexo快速搭建个人博客

文章目录
  1. 1. 创建github pages
    1. 1.1. 创建一个名为username.github.io的仓库
    2. 1.2. 在命令行当中把这个仓库clone下来.
    3. 1.3. Hello World
  2. 2. 安装Node.js
    1. 2.1. 选择版本
    2. 2.2. 安装Node.js
    3. 2.3. 使用npm的国内镜像来解决npm install的问题
  3. 3. 安装Hexo
    1. 3.1. home目录下,使用npm这个安装工具可以非常简单地安装
    2. 3.2. 在一个目录当中初始化Hexo
    3. 3.3. 配置blog目录,在blog目录下面执行
    4. 3.4. 复制wuchong的修改的主题
    5. 3.5. 或者复制yangjian的主题
    6. 3.6. 启用主题
    7. 3.7. 启动Hexo查看效果
    8. 3.8. 部署到github上
    9. 3.9. 部署到Github前需要配置_config.yml文件。
    10. 3.10. 执行下列指令即可完成部署，注意部署会覆盖掉你之前在username.github.io中存放的文件,在这里也就是index.html
  4. 4. 写博客
    1. 4.1. hexo new
  5. 5. 有关想使用github来备份自己的blog目录的做法
    1. 5.1. 超简单方法
    2. 5.2. 不想使用多个仓库,只想用一个仓库既保存username.github.io,又保存blog
  6. 6. 有关hexo3的代码块是白色的问题
  7. 7. 有关jacman的首页默认是展开式的情况
  8. 8. 关于自己的域名绑定到github.io上的方法
    1. 8.1. 购买域名
    2. 8.2. 域名绑定
  9. 9. 关于hexo目录下的_config.yml文件解析：
    1. 9.1. 网站
    2. 9.2. 网址
    3. 9.3. 目录
    4. 9.4. 文章
    5. 9.5. 分类 & 标签
    6. 9.6. 日期 / 时间格式
    7. 9.7. 分页
    8. 9.8. 扩展
  10. 10. 关于在博客当中插入图片的推荐方法
  11. 11. 友情连接