Github+Hexo搭建博客教程

字数 1208阅读 1429

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

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

1.安装

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   # 安装依赖
  • 命令执行后,myblog目录下文件结构:
.
├── _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 访问博客

5.优化博客

5.1绑定域名

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


  • 在CNAME文件中输入:
selfrebuild.net 

5.2安装主题

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免费)

推荐阅读更多精彩内容