在GitHub上搭建基于Hexo的静态Blog

pic

如果一只鸟在周围没有任何生物的情况下唱了一首歌 后来她死了
这首歌存在吗?

Environment

Required

  • OS X

    此教程基于 OS X ,Windows 用户仅供部分参考

  • HomeBrew
  • Node.js
  • Git
  • Hexo
  • GitHub account
  • Disqus account 或多说账户

Optional

  • Swiftype account
  • 百度统计账户
  • 域名
  • DNSPod account

Installation

HomeBrew

打开你的 Terminal 或 iTerm ,输入

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

Git & Node.js

Terminal 输入

$ brew install git

安装完成后再输入

$ brew install node

npm 会跟 node 一同装好

Hexo

Terminal 输入

$ npm install -g hexo-cli

至此安装完毕

Setup

Initialize

以创建于 ~/Desktop/Joe 为例

$ hexo init ~/Desktop/Joe
$ cd ~/Desktop/Joe
$ npm install

项目结构如下:

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

Configuration

yaml 语法严谨,千万不要忘记空格!

打开~/Desktop/Blog/_config.yml
填入以下内容

# 博客名称
title: Joe's Room

# 描述
description: 井蛙语海 夏虫语冰

# 作者
author: Joe

# 博客语言
language: zh-Hans

# 博客地址
url: http://joehill.me

#主题名称
theme: next

# 多说
duoshuo_shortname: your-duoshuo-shortname

# Disqus 帐号(多说 Disqus 二选一)
disqus_shortname: your-disqus-shortname

##增加以下内容##

# 社交链接,将在侧栏中显示
social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url

# ID 为百度统计提供脚本中 hm.js? 后字符串,非百度统计帐号
baidu_analytics: 41f2ac3e7c22ef73312321800c11b369

# 站点起始时间
since: 2011

# swiftype 站内搜索
swiftype_key: EKNBn-kdy2Bpu7SQLsGp

# Creative Commons 4.0 International License.
# http://creativecommons.org/
# Available: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
creative_commons: by-nc-sa

Theme

本文推荐使用 next 主题,下文仅以 next 为例。

Installation

$ cd ~/Desktop/Joe
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

Configuration

_config.yml

打开~/Desktop/Blog/themes/next/_config.yml

# 控制主题导航栏显示内容
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

# 设置为紧凑型主题
scheme: Mist

Navi

目前导航栏中「分类」和「标签」是无法正常显示的

$ cd ~/Desktop/Joe
$ hexo new page tags
$ hexo new page categories

会在 ~/Desktop/Joe/source 下创建 tagscategories 目录
编辑 ~/Desktop/Joe/source/tags/index.md

# 设置当前 page 类型为 tags
type: "tags"

# 设置当前页评论关闭
comments: false

编辑 ~/Desktop/Joe/source/categories/index.md

# 设置当前 page 类型为 categories
type: "categories"

# 设置当前页评论关闭
comments: false

Avatar & Favicon

头像文件 default_avatar.jpg 放入 ~/Desktop/Joe/themes/next/source/iamges 目录下

favicon 文件 favicon.ico 放入 ~/Desktop/Joe/themes/next/source

First Blog

$ cd ~/Desktop/Joe
$ hexo new firstblog

~/Desktop/Joe/source/_posts 下生成 firstblog.md 文件
编辑 firstblog.md

# 文章题目
title: 在GitHub上搭建基于Hexo的静态Blog

# 所属分类
categories:
- Web

# 标签(多个标签如下所示)
tags:
- Hexo
- GitHub
- Disqus

`` 以上为文章列表显示摘要部分
正文书写参考 Markdown 语法

Generate

$ cd ~/Desktop/Joe
$ hexo generate    //   生成静态文件
$ hexo server      //   启动本地服务器

访问 http://localhost:4000 即可访问blog

Hexo Plugins

Hexo 为我们提供了很多 Plugins ,让我们可以更专注于博客的内容书写

hexo-deployer-git

用于git部署

$ cd ~/Desktop/Joe
$ npm install hexo-deployer-git --save

hexo-generator-sitemap

生成sitemap便于搜索引擎抓取

$ cd ~/Desktop/Joe
$ npm install hexo-generator-sitemap --save

Deployment

只在本地可以看博客怎么会是我们的终极目的,下一步我们要将 blog 部署到 github 的仓库中

Repository

登录 GitHub 账户,新建一个 repository

Repository name 起成 name.github.io

_config.yml

打开 ~/Desktop/Blog/_config.yml

# 部署信息
deploy:
  type: git
  # https://github.com/GitHubName/RepositoryName.git
  repo: https://github.com/Joe-Hill/joe-hill.github.io.git
  branch: master

Go!

$ cd ~/Desktop/Joe
$ hexo deploy

访问 https://RepositoryName (如 https://joe-hill.github.io)
即可访问Blog

Domain name Resolution

如果你拥有一个域名,比如 joehill.me 可以将其解析到你的Blog上
以域名joehill.me,DNS解析万网为例

创建一个 A 记录,主机记录为 @ ,解析线路选择默认,记录值为 103.245.222.133

~/Desktop/Joe/source 下创建无扩展名内容为 joehill.me 文件 CNAME

$ cd ~/Desktop/Joe
$ hexo generate
$ hexo deploy

等待解析成功,既可访问http://joehill.me

Tips

常用指令

$ hexo server
$ hexo generate
$ hexo deploy

可以简写成

$ hexo s
$ hexo g
$ hexo d

那么静态化 + 部署就可以写成

$ hexo d -g

开启你的美妙Blog之旅吧!

你可能感兴趣的:(在GitHub上搭建基于Hexo的静态Blog)