利用github page搭建hexo博客

Author Avatar
John Doe 11月 25, 2016

githubpage除了在国内有些地区访问速度不好，还是有很多优点的，比如无限流量，无限空间。

静态博客框架有很多，hexo个人认为更简单容易上手，因为有官方中文文档。

本文阅读需要有nodejs、git 、npm 基础（只是基础！）即使你没有基础，一步步来也不会有问题。

安装nodejs 和 git 和cmder

  • nodejs ：进入官网点击首页绿色的左边的按钮就会自动下载，一键傻瓜式安装。配套会自动安装npm
  • git:点击downlode 下载自动安装。安装完成，会有一个git文件夹。git bash就是最重要的一个命令窗口
  • cmder如果你不喜欢git的命令行窗口，windows环境下推荐使用cmder命令行工具，美观，强大，完整版支持git命和Linux命令，完全可以替代git + windows自带的cmd。（本文步骤在cmdeer上操作）

git 连接远程仓库

因为本地仓库要同步，所以必须本地连接github仓库。方法见 30分钟git 快速入门-操作远程仓库

创建github仓库

官方说明

Head over to GitHub and create a new repository named username.github.io, where username is your username (or organization name) on GitHub.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

翻译过来就是：

仓库一定要取名为username.github.io 比如我就是ihewro.github.io。否则不会正常工作！

克隆仓库到本地文件夹

比如我：
本地新建了一个文件夹，取名为blog。打开cmder（命令行工具）。

git clone <仓库的ssh地址>

例如：

1
2
3
λ git clone git@github.com:ihewro/ihewro.github.io.git
Cloning into 'ihewro.github.io'...
warning: You appear to have cloned an empty repository.

这样提示，证明已经成功clone了！

全局安装hexo

1
$ cnpm install -g hexo-cli

输入 hexo -v 查看是否成功

1
2
3
4
5
6
7
8
9
10
11
12
λ hexo -v
hexo-cli: 1.0.2
os: Windows_NT 10.0.14393 win32 x64
http_parser: 2.7.0
node: 6.9.1
v8: 5.1.281.84
uv: 1.9.1
zlib: 1.2.8
ares: 1.10.1-DEV
icu: 57.1
modules: 48
openssl: 1.0.2j

OK！

在当前文件夹部署hexo

上一条命令只是把hexo安装在系统的一个公用文件夹里，你可以在系统任何位置创建hexo。在当前文件夹（比如我：ihewro.github.io文件夹）部署hexo命令：

1
2
3
4
5
<!--把hexo部署到当前文件夹-->
hexo init
<!--根据hexo的`package.json`配置文件安装必要的模块-->
cnpm install

到这步结束，hexo本地就安装完成了！

hexo一些基本命令

本地预览网站

步骤是：（清除一开始的静态文件）——生成静态文件——启动本地服务

  • 仅仅两步骤，不需要push等其他指令，非常方便
  • （清除一开始的静态文件）一般不需要操作，仅仅在出现错误时候，可以尝试先清除旧的静态文件
  1. 清除一开始的静态文件（第一次当然不需要啦！）
1
hexo clean
  1. 生成静态文件
1
2
hexo generate
hexo g

上面两个均可，任选一个即可！

选项：（是跟在指令后面的）

选项 描述
-d, --deploy 文件生成后立即部署网站
-w, --watch 监视文件变动

3.启动本地服务

1
2
hexo server
hexo s

上面两个均可，任选一个即可！

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

部署网站

步骤是：本地配置部署信息——（清除一开始的静态文件）——生成静态文件——部署网站

  1. 本地配置部署信息

打开_config.yml文件，在deploy部分填写配置信息，把repository值设置为刚刚复制好的ssh地址。

1
2
3
4
deploy:
  type: git
  repo: <your-github-repo-ssh-address>
  branch: master

冒号后面必须有一个空格

  1. 清除一开始的静态文件（第一次当然不需要啦！）

  2. 生成静态文件

  3. 部署网站

    1
    2
    hexo deploy
    hexo d

选项:
|参数| 描述|
|:—-|:—–|
|-g,--generate|部署之前预先生成静态文件|

如果上面这个步骤报错：ERROR Deployer not found : github，尝试安装hexo-deployer-git:

1
cnpm install hexo-deployer-git --save

文章相关

新建一篇文章

1
$ hexo new [layout] <title>
  1. [layout]是指你的文章布局。默认有三种post（文章页面）、page（独立页面）、draft（草稿页面）
  2. 执行命令后，会在对应的文件夹中生成.md文件。

hexo博客一些文件夹及文件介绍

  • node_modules：npm下载一个一些包和模块都在这个文件夹里面
  • public：已生成的静态文件 (public)。
  • scaffolds: 中文意思支架，存储了文章的模板文件。即当你新建一片文章自动填充的模板内容。
  • _config.yml:博客站点的配置文件
expand_less