GitHub Pages与Hexo搭建一个独立博客（一）

发表于 | 分类于

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 Hexo 是一个基于 Node.js 的静态博客程序, 可以方便的生成静态网页托管在 github 和 Heroku 上。

为什么要用静态博客？

1.跨平台同步文件
2.系统简单易懂, 毫不臃肿, 方便改版
3.众多第三方应用, 容易做自定义功能扩展
4.纯静态, 极低的服务器压力
5.最重要使用 Markdown 标记语法, 迁移什么的都非常方便
6.能够托管在 Github 上

环境配置

什么是环境变量？
为什么要配置环境变量呢？
简单的说吧，就比如说你要写篇日记那么问题是你首先得准备好一个笔记本一样。更深层次请自行谷歌或度娘科普。
环境变量

安装Git服务

关于Git服务，推荐两个不错的教程

Windows：下载并安装git

推荐使用cmder，因为cmderer自带了msysgit使用更加方便.

安装node.js

Windows下的Node.js 安装配置

下载node.js安装包

node.js官网
node.js下载地址

安装（最新安装包默认配置好path变量，无需自行配置）

安装步骤：

步骤 1 : 双击下载后的安装包 node-v4.1.2-x64.msi，如下所示：

步骤 2 : 点击以上的Run(运行)，将出现如下界面：

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮 :

步骤 4 : Node.js默认安装目录为 “C:\Program Files\nodejs\” , 你可以修改目录，并点击 next（下一步）

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装） 开始安装Node.js。你也可以点击 Back（返回）来修改先前的配置。 然后并点击 next（下一步）：

安装过程：

点击 Finish（完成）按钮退出安装向导。

检查版本

打开cmder运行

1
node -v

安装hexo

Hexo

打开cmder运行

1
npm install -g hexo-cli

检查版本

打开cmder运行

1
hexo -v

安装Hexo插件

1
2
3
4
5
6
7
8
9
10
11
12
13
npm install hexo-generator-index --save
npm install hexo-generator-archive --save
npm install hexo-generator-category --save
npm install hexo-generator-tag --save
npm install hexo-server --save
npm install hexo-deployer-git --save
npm install hexo-deployer-heroku --save
npm install hexo-deployer-rsync --save
npm install hexo-deployer-openshift --save
npm install hexo-renderer-marked@0.2 --save
npm install hexo-renderer-stylus@0.2 --save
npm install hexo-generator-feed@1 --save
npm install hexo-generator-sitemap@1 --save

Hexo建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件,如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

1
2
hexo init <folder>
npm install

新建完成后，指定文件夹的目录如下：

1
2
3
4
5
6
7
8
9
.
├── _config.yml
├── package.json
├── scaffolds
├── scripts
├── source
|   ├── _drafts
|   └── _posts
└── themes

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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 会根据主题来生成静态页面。

    配置

    参见hexo配置
    您可以在 _config.yml 中修改大部份的配置。

    常用命令

  • init
    1
    hexo init [folder]

新建一个网站。如果没有设置 folder ，Hexo 默认在目前的文件夹建立网站。

  • new
    1
    hexo new [layout] <title>

新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。

  • generate
    1
    2
    hexo generate
    hexo g #缩写

生成静态文件。

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动
  • server
    1
    2
    hexo server
    hexo s #缩写

启动服务器。

选项 描述
-p, --port 重设端口
-s,--static 只使用静态文件
-l, --log 启动日记记录，或覆盖记录格式
  • deploy
    1
    hexo deploy

部署网站。

参数 描述
-g, --generate 部署网站前，需要预先生成静态文件
  • clean
    1
    hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

本地运行

  • 新建目录...\Hexo--test

  • 在当前目录下打开cmder，运行hexo init

    返回当前目录查看文件目录，如下：

  • 在cmder运行hexo g

    返回当前目录查看文件目录，如下(public目录为hexo g生成)：

  • 在cmder运行hexo s

  • 打开浏览器输入127.0.0.1:4000

  • 至此本地文件建立完成