三味猪屋

GitHub博客搭建

发表于

工具
markdown语法：(http://www.appinn.com/markdown/#header)
Atom：(https://atom.io)

1. 创建Github 域名和空间

1.1注册

注册Github账号。

#注意：博客域名将会为username.github.io，所以username会影响到博客的域名。

1.2 创建仓库

创建一个仓库(repository) 来存储博客的网站，点击首页任意位置出现的 New repository按钮创建仓库。

#注意：Respository name 中的 username 一定与前面的 Owner 一致。

2. 环境搭建

这里介绍使用 Hexo 搭建博客框架。下面需要安装的工具包括 brew，Git，nvm，Nodejs，Hexo。

2.1 安装 brew

1
$/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

2.2 安装 Git

1
$ brew install git

2.3 安装 nvm（nvm主要用于安装、管理node）

1
2
3
4
5
6
7
1. Homebrew 安装方式，此安装方式无需重启
a、安装nvm
$ brew install nvm
$ mkdir ~/.nvm
$ export NVM_DIR=~/.nvm
b、启动nvm
$ . $(brew --prefix nvm)/nvm.sh 或者 source $(brew --prefix nvm)/nvm.sh

1
2
2. curl安装方式
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

2.4 安装 Nodejs

1
2
3
4
5
6
查看Nodejs版本
$ nvm ls-remote
安装指定版本
$ nvm install 7.1.0
安装最新版本
$ nvm install stable

2.5 安装 Hexo

1
$ sudo npm install hexo-cli -g

3. 编写博客

3.1 创建博客

1
$ hexo init username.github.io

3.2 配置主题

3.2.1 安装主题

1
2
$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

查看更多主题

3.2.2 基础配置
打开文件_config.yml修改几个键值对，下面把几个必须设置的列出来按需求修改。注意配置的键值之间一定要有空格。

1
2
3
4
5
6
7
title: dimsky 的 9 维空间    //你博客的名字
author: dimsky  //你的名字
language: zh-Hans    //语言 中文
theme: next   //刚刚安装的主题名称
deploy:
  type: git    //使用Git 发布
  repo: https://github.com/username/username.github.io.git //刚创建的Github仓库

查看更多设置

3.2.3 如何添加“tags”页面、“categorys”页面、“about”页面等。
新增“tags”页面

1
2
$ cd your-hexo-site
$ hexo new page tags

新增“categorys”页面

1
2
$ cd your-hexo-site
$ hexo new page categories

新增“about”页面

1
2
$ cd your-hexo-site
$ hexo new page about

修改_config.yml菜单配置为：

1
2
3
4
5
6
menu:
  home: /archives
  categories: /categories
  about: /about
  archives: /archives
  tags: /tags

参考：http://theme-next.iissnan.com/theme-settings.html#tags-page

3.2.4 主题配置
主题配置文件在username.github.io/themes/next/_config.yml中修改。
更多配置

3.3 写文章
在username.github.io/source/_posts下创建你的博客，命名“搭建GitHub个人博客.md”。既然是搭建GitHub个人博客，那么就用GitHub的编辑器 Atom吧。
markdown语法：(http://www.appinn.com/markdown/#header)

3.4 本地预览

1
2
$ cd username.github.io
$ hexo s

测试服务启动，浏览器中输入https://localhost:4000 就可以预览了。

  1. 发布博客
    4.1 安装发布工具
    1
    $ npm install hexo-deployer-git --save

4.2 发布

1
$ hexo clean && hexo g && hexo d

5 更多有趣的插件

Hexo更多插件