Github+Hexo搭建博客教程

本篇介绍利用Github和Hexo搭建技术博客的详细过程,以及各种优化配置.

花了一天时间,摸索利用Github+hexo,完成博客的搭建.基本上可用了,把搭建过程整理成博客,发首篇吧.
一点体会:建议每个人都把hexo官网文档完整看一遍.有助于更好理解,并配置hexo博客.

1.安装

hexo官方文档
先行安装 Node.js 和 Git

1.1安装Git

Windows：下载并安装 git.
Mac：使用 Homebrew, MacPorts 或下载安装程序安装。

    brew install git

Linux (Ubuntu, Debian)：

    sudo apt-get install git-core

Linux (Fedora, Red Hat, CentOS)：

    sudo yum install git-core

1.2安装Node.js

安装 Node.js 的最佳方式是使用 nvm。

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安装完成后，重启终端并执行下列命令即可安装 Node.js。

$ nvm install 0.10

或者您也可以下载应用程序来安装。

1.3安装Hexo

    
    sudo npm install -g hexo-cli
    sudo npm install hexo --save
    
    针对Mac平台:
    若编译报错,请先到AppStore下载安装`Xcode`.
    安装完,启动并进入 Preferences -> Download -> Command Line Tools -> Install 安装命令行工具。再执行上述命令.

1.4安装Hexo插件

    sudo npm install hexo-generator-index --save
    sudo npm install hexo-generator-archive --save
    sudo npm install hexo-generator-category --save
    sudo npm install hexo-generator-tag --save
    sudo npm install hexo-server --save
    sudo npm install hexo-deployer-git --save
    sudo npm install hexo-deployer-heroku --save
    sudo npm install hexo-deployer-rsync --save
    sudo npm install hexo-deployer-openshift --save
    sudo npm install hexo-renderer-marked@0.2 --save
    sudo npm install hexo-renderer-stylus@0.2 --save
    sudo npm install hexo-generator-feed@1 --save
    sudo npm install hexo-generator-sitemap@1 --save

2.创建博客

参考

2.1初始化博客目录(eg: myblog)

    mkdir myblog       # 新建 博客文件夹
    cd myblog          # 切换到 博客文件夹
    hexo init          # 初始化
    sudo npm install   # 安装依赖

.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

2.2目录结构说明:

_config.yml

网站的配置信息，您可以在此配置大部分的参数。

package.json

应用程序的信息。EJS, Stylus 和 Markdown renderer 已默认安装，您可以自由移除。

package.json
{
  "name": "hexo-site",
  "version": "",
  "private": true,
  "hexo": {
    "version": ""
  },
  "dependencies": {
    "hexo-renderer-ejs": "*",
    "hexo-renderer-stylus": "*",
    "hexo-renderer-marked": "*"
  }
}

scaffolds

模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件。

scripts

脚本文件夹。脚本是扩展 Hexo 最简易的方式，在此文件夹内的 JavaScript 文件会被自动执行。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。

themes

主题文件夹。Hexo 会根据主题来生成静态页面。

3.运行博客

3.1本地运行

执行以下命令，成功后可访问 localhost:4000 查看效果

hexo server

3.2常用配置命令

hexo new "My New Post"    # Create a new post 
hexo server               # Run server 
hexo generate             # Generate static files
hexo deploy               # Deploy to remote sites

命令简写:
hexo n     # new
hexo g     # generate
hexo s     # server
hexo d     # deploy

常用复合命令：
hexo d -g   # 生成加部署
hexo s -g   # 预览加部署

4.部署到github

4.1 github上新建仓库:`hhstore.github.io`

注意: 该仓库必须按照此格式命名: XXXX.github.io
XXXX 为 github 用户名

4.2 配置_config.yml

    cd myblog
    找到_config.yml

更改其中内容:


deploy:
  type: git
  repository: https://github.com/hhstore/hhstore.github.io.git
  branch: master

4.3 部署到github:

hexo g
hexo d # 部署到github

> 执行上述命令后,产生如下提示:
> Username for 'https://github.com':
> hhstore   # 输入用户名
> 
> Password for 'https://hhstore@github.com':
> XXXXX    # 提示输入用户密码.
> 
> INFO  Deploy done: git  # 提示部署成功.

若执行成功,会自动将public内容同步到 hhstore.github.io 仓库.
若报错:ERROR Deployer not found: git , 执行如下命令:

npm install hexo-deployer-git --save

上一步,安装成功后,再次执行:

hexo d

4.4 访问博客

若以上步骤无误,访问博客地址: http://hhstore.github.io/

5.优化博客

5.1绑定域名

cd myblog   # 依旧是 博客源目录
cd source   # 切换到 source 文件夹下
touch CNAME   # 新建 CNAME 文件

在CNAME文件中输入:

selfrebuild.net

5.2安装主题

参考
主题选择
主题: NexT
Pacman是一款为Hexo打造的一款扁平化，有着响应式设计的主题。

1.安装

安装pacman主题

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

安装Next主题
详细配置步骤,参考 Next 的github项目说明.

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

2.启用

修改你的博客根目录下的config.yml配置文件中的theme属性，将其设置为pacman。同时请设置stylus属性中的compress值为true。

3.更新

cd themes/pacman
git pull

请先备份你的_config.yml 文件后再升级

5.3安装插件

安装插件

1.安装

添加sitemap和feed插件

$ npm install hexo-generator-sitemap  --save
$ npm install hexo-generator-feed  --save

2.启用

修改_config.yml，增加以下内容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap

#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20

#sitemap
sitemap:
  path: sitemap.xml

5.4配置sitemap(提高搜索引擎收录效果)

使用hexo提供的插件，方法与添加RSS类似。

安装sitemap插件到本地：

npm install hexo-generator-sitemap

开启sitemap功能：编辑hexo/_config.yml，添加如下代码：

plugins:
- hexo-generator-sitemap

访问hexo/public/sitemap.xml即可看到站点地图。
为了提高搜索引擎对自己站点的收录效果，我们最好手动到google和百度等搜索引擎提交sitemap.xml。

5.5自定义 Next 主题的_config文件

修改文件: themes/next/_config.yml

实现效果:

实现添加: 标签(tag)页面
实现添加: 关于(about)页面
更改导航头像avatar
关闭自动对文章段落标题加标号
布局紧凑模式
始终显示右侧导航
修改代码高亮主题为: night eighties

_config.yml完整内容:

# when running hexo in a subdirectory (e.g. domain.tld/blog), remove leading slashes ( "/archives" -> "archives" )
menu:
  home: /
  archives: /archives
  categories: /categories
  tags: /tags
  about: /about
  #commonweal: /404.html

# head
avatar: http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787

# Place your favicon.ico to /source directory.
favicon: /favicon.ico

# Set default keywords (Use a comma to separate)
keywords: "Hexo,next"

# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

# Icon fonts
# Place your font into next/source/fonts, specify directory-name and font-name here
# Avialable: default | linecons | fifty-shades | feather
icon_font: default
#icon_font: fifty-shades
#icon_font: feather
#icon_font: linecons

# Code Highlight theme
# Available value: normal | night | night eighties | night blue | night bright
# https://github.com/chriskempson/tomorrow-theme
highlight_theme: night eighties


# MathJax Support
mathjax:


# Schemes
scheme: Mist


# Sidebar, available value:
#  - post    expand on posts automatically. Default.
#  - always  expand for all pages automatically
#  - hide    expand only when click on the sidebar toggle icon.
#sidebar: post
sidebar: always
#sidebar: hide


# Automatically scroll page to section which is under <!-- more --> mark.
scroll_to_more: true


# Automatically add list number to toc.
# toc_list_number: true
toc_list_number: false

## DO NOT EDIT THE FOLLOWING SETTINGS
## UNLESS YOU KNOW WHAT YOU ARE DOING

# Use velocity to animate everything.
use_motion: true

# Fancybox
fancybox: true

# Static files
vendors: vendors
css: css
js: js
images: images

# Theme version
version: 0.4.3

5.6添加Fork Me On Github

添加Fork Me On Github挂件在博客左上角(右上角).官网可选样式

1. 拷贝Github挂件样式代码如下:

<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>

2. 修改上述代码中href地址为自己的github地址.

<a href="https://github.com/you">
改为:
<a href="https://github.com/hhstore">

3. 修改hexo主题(这里以Next主题为例,不同主题修改略有差异,请注意)

修改文件: themes/next/layout/_layout.swig
打开_layout.swig文件,找到如下对应位置,添加上述样式代码段即可.


<!doctype html>
<html class="theme-next {% if theme.use_motion %}use-motion{% endif %} {% if theme.scheme %}theme-next-{{ theme.scheme | lower }}{% endif %}">
<head>
  {% include '_partials/head.swig' %}
  <title>{% block title %}{% endblock %}</title>
</head>


<body>
  {% include '_partials/old-browsers.swig' %}

  <div class="container one-column {% block page_class %}{% endblock %}">
    <div class="headband"></div>
    
    
    <!----------- add Fork me on Github ------------>
    
    <a href="https://github.com/hhstore"><img style="position: absolute; top: 500; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
    
    <!----------- add Fork me on Github ------------>   
    
    
    <div id="header" class="header">
      <div class="header-inner">
        {% include '_partials/header.swig' %}
      </div>
    </div>

    <!-------------省略------------------->
    <!-------------省略------------------->


    <div class="back-to-top"></div>
  </div>

</body>

</html>

6.etc

6.1图床

七牛(10G免费)

最后编辑于：2017.11.27 03:02:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,098评论 5赞 476
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,213评论 2赞 380
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,960评论 0赞 336
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,519评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,512评论 5赞 364
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,533评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,914评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,574评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,804评论 1赞 296
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,563评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,644评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,350评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,933评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,908评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,146评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,847评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,361评论 2赞 342

Github+Hexo搭建博客教程

1.安装

1.1安装Git

1.2安装Node.js

1.3安装Hexo

1.4安装Hexo插件

2.创建博客

2.1初始化博客目录(eg: myblog)

2.2目录结构说明:

_config.yml

package.json

scaffolds

scripts

source

themes

3.运行博客

3.1本地运行

3.2常用配置命令

4.部署到github

4.1 github上新建仓库:hhstore.github.io

4.2 配置_config.yml

4.3 部署到github:

4.4 访问博客

5.优化博客

5.1绑定域名

5.2安装主题

1.安装

2.启用

3.更新

5.3安装插件

1.安装

2.启用

5.4配置sitemap(提高搜索引擎收录效果)

5.5自定义 Next 主题的_config文件

修改文件: themes/next/_config.yml

实现效果:

_config.yml完整内容:

5.6添加Fork Me On Github

1. 拷贝Github挂件样式代码如下:

2. 修改上述代码中href地址为自己的github地址.

3. 修改hexo主题(这里以Next主题为例,不同主题修改略有差异,请注意)

6.etc

6.1图床

推荐阅读更多精彩内容

4.1 github上新建仓库:`hhstore.github.io`