hexo 博客搭建—windows系统配置过程

以前写博客时用的是CSDN、 博客园、新浪博客之类的博客系统,这类博客系统好处就是什么都弄好了,自己只需要写文章即可,但是一类大缺点就是广告太多,打开一篇文章,基本满屏都是广告,让人看下去的愿望都没有,所以一直打算先搞个自己的博客系统,专门记录一下学习过程。但是呢又不想自己花钱买空间、域名之类啥的,所以一直没有实现,最近听说有一种免费的方法可以搞定,那就是用hexo和github来实现,折腾了两天终于实现好了,下面记录一下实现过程,方便需要的人。

正文:

关于hexo的简介请看官网介绍

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用
Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

而我们要做的就是现在本地写好文章,然后解析成HTML文件,最后再部署到github上面显示出来,总的来说,过程还是蛮简单的,而且步骤也简单,只需要几条命令即可,下面我们来具体实现。

首先需要下载一些配置软件:

  1. hexo,生成本地的文章
  2. node.js ,用来生成静态页面的
  3. git ,把本地的hexo内容提交到github上去.
  4. 申请github账号 ,部署到博客

注意一点,这里面申请的github账号的名称就是以后你博客的域名,所以一定要起一个有个性的名字。

安装node.js和git没有啥好说,直接下载软件安装即可,傻瓜式安装。

下面来说一下安装hexo,需要用到以下的命令:

1
$ npm install -g hexo-cli

安装过程中会出现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
C:\Windows\System32>npm install -g hexo-cli
npm WARN optional dep failed, continuing fsevents@1.0.11
\
> spawn-sync@1.0.15 postinstall C:\Users\AppData\Roaming\npm\node_modules\h
exo-cli\node_modules\hexo-util\node_modules\cross-spawn\node_modules\spawn-sync
> node postinstall
Installing native dependencies (this may take up to a minute)
npm WARN engine is-buffer@1.1.3: wanted: {"node":">=0.12"} (current: {"node":"v0
.10.29","npm":"1.4.14"})
> dtrace-provider@0.6.0 install C:\Users\AppData\Roaming\npm\node_modules\h
exo-cli\node_modules\hexo-log\node_modules\bunyan\node_modules\dtrace-provider
> node scripts/install.js
> hexo-util@0.5.3 postinstall C:\Users\AppData\Roaming\npm\node_modules\hex
o-cli\node_modules\hexo-util
> npm run build:highlight
|
> hexo-util@0.5.3 build:highlight C:\Users\AppData\Roaming\npm\node_modules
\hexo-cli\node_modules\hexo-util
> node scripts/build_highlight_alias.js > highlight_alias.json
C:\Users\AppData\Roaming\npm\hexo -> C:\Users\AppData\Roaming\npm\node
_modules\hexo-cli\bin\hexo
hexo-cli@1.0.1 C:\Users\AppData\Roaming\npm\node_modules\hexo-cli
├── object-assign@4.0.1
├── abbrev@1.0.7
├── minimist@1.2.0
├── bluebird@3.3.4
├── tildify@1.1.2 (os-homedir@1.0.1)
├── chalk@1.1.3 (supports-color@2.0.0, ansi-styles@2.2.1, escape-string-regex
p@1.0.5, has-ansi@2.0.0, strip-ansi@3.0.1)
├── hexo-fs@0.1.5 (escape-string-regexp@1.0.5, graceful-fs@4.1.3, chokidar@1.
4.3)
├── hexo-log@0.1.2 (bunyan@1.8.0)
└── hexo-util@0.5.3 (striptags@2.1.1, html-entities@1.2.0, highlight.js@9.2.0/, camel-case@1.2.2, cross-spawn@2.1.5)
等待一小会即可安装好

测试一下,输入命令,显示版本号即表明安装成功。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
C:\Windows\System32>hexo -v
显示内容:
Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if po
ssible.
Check C:\Users\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
hexo-cli: 1.0.1
os: Windows_NT 6.1.7601 win32 ia32
http_parser: 1.0
node: 0.10.29
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.27
zlib: 1.2.3
modules: 11
openssl: 1.0.1h

以上软件安装好,我们就已经生成了一个博客系统,只不过这是最基础也是最简洁的博客系统,我们来测试一下。

在本地磁盘新建一个目录,这以后就是我们写博客的地方啦譬如我在E盘新建一个hexo目录,同时进入到该目录下

1
C:\Windows\System32>cd E:\hexo

进行初始化一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
C:\Windows\System32>hexo init
显示内容:
E:\hexo>hexo init
Native thread-sleep not available.
This will result in much slower performance, but it will still work.
You should re-install spawn-sync or upgrade to the lastest version of node if po
ssible.
Check C:\Users\liji\AppData\Roaming\npm\node_modules\hexo-cli\node_modules\hexo-
util\node_modules\cross-spawn\node_modules\spawn-sync\error.log for more details
INFO Cloning hexo-starter to E:\hexo
Cloning into 'E:\hexo'...
remote: Counting objects: 53, done.
remote: Total 53 (delta 0), reused 0 (delta 0), pack-reused 53
Unpacking objects: 100% (53/53), done.
Checking connectivity... done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git
) registered for path 'themes/landscape'
Cloning into 'themes/landscape'...
remote: Counting objects: 724, done.
Rremote: Total 724 (delta 0), reused 0 (delta 0), pack-reused 724eceiving object
Receiving objects: 100% (724/724), 2.51
Resolving deltas: 100% (381/381), done.
Checking connectivity... done.
Submodule path 'themes/landscape': checked out 'decdc2d9956776cbe95420ae94bac87e
22468d38'

这样就生成了一个默认的博客系统。
我们来查看一下默认的博客系统是什么样子,
输入以下命令:

1
2
3
4
5
6
7
8
9
E:\hexo>hexo generate
等待几秒结束后,输入
E:\hexo>hexo s
成功后会显示:
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

我们在浏览器上面输入以上地址 http://localhost:4000/:我们就会打开一个本地的HTML页面,这就是我们的博客原型,不过这只能在本地访问,别人还是不能访问到,要想别人也能看到的话,接下来我们就要发布到github上面去。

那么问题来了,我们该如何发布到github上面呢?
1、首先我们,需要在github上面新建一个账号,点击进入github官网注册一个账号,这个账号就对应我们的博客访问地址,譬如,我注册的账号就是crazyandcoder,那么我的博客访问地址就是http://crazyandcoder.github.io/

2、新建一个repository,输入名字。

3、配置我们的hexo init生成的配置文件

4、在最后面添加我们刚刚新建的repository,里面的test就是我们刚刚创建的repository

5、最后发布

1
hexo deploy

测试,在浏览器中输入博客地址http://账户名.github.io/就可以进行测试了,别人也可以访问了。

总结:

以后我们进行写文章到发布到我们的博客系统上去总共要经历一下几个步骤:

  1. hexo new”postName” #新建文章
  2. hexo new page”pageName” #新建页面
  3. hexo generate #生成静态页面至public目录
  4. hexo server #开启预览访问端口(默认端口4000,’ctrl + c’关闭server)
  5. hexo deploy #将.deploy目录部署到GitHub

其中第一步在本地创建文章,会在本地博客目录下生成文章。

然后我们就可以打开文件,在里面写文章。

写好文章后,我们需要将其生成HTML文件,如何生成,这就需要使用第三步的命令:

1
hexo generate

生成文章后,我们首先可以在本地预览一下,如果没有什么问题的话可以发布到github上面。使用以下命令:

1
2
3
hexo depoly
等待几秒即可发布完成

以上就是用hexo + github搭建自己的博客系统的内容。最后附上一些常用的hexo主题,供大家自己选择:传送门+hexo主题


http://crazyandcoder.github.io/