Github+Hexo搭建博客教程

2015-07-07 本文已影响1338人 hhstore

本篇介绍利用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免费)

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`