Windows下利用Hexo搭建静态博客

按照土爷的教程折腾了两天,终于搭好了这个静态的blog。把坑又踩了一遍,加上大脑短路,拖了好久。由于Gitcafe并入Coding,所以本文按照Coding来写,附上土爷的Blog原文.(文章部分直接引用于土爷原文。)

安装Hexo

0x01 安装Git

Git根据自己的系统选择合适的版本安装。我们需要的是Git Bash功能。

0x02 安装node.js

node.js根据自己的系统选择合适的版本安装。

0x03 安装Hexo

打开安装好的Git Bash,键入:

1
npm install -g hexo

然后把Hexo更新到最新版本,键入:

1
npm update hexo -g

0x04 部署Hexo

在你想要放置博客文件的位置新建一个名为hexo的文件夹,然后在hexo文件夹内右键Git Bash,键入:

1
$ hexo init

然后,Hexo会自动为你生成你网站所需要的全部文件。此时,我们已经在本地搭建好Blog了。在hexo文件夹内右键Git Bash,键入:

1
2
$ hexo g
$ hexo s

然后在浏览器输入 http://localhost:4000 可以看到当前博客效果。(最初的模板不是很耐看,我们会在后面说明更换主题。)我们需要把博客部署在网络上,这样别人才看得到。Hexo博客只支持ie8以上的浏览器

配置Coding

Coding是国内的网站,不用担心被墙的问题。(本人测试了一下,美国的服务器)

0x01 注册Coding

Coding官网

0x02 添加项目

登陆之后,新建一个空项目,名字和自己的ID一致。

0x03 配置ssh密钥

1.在桌面右键Bit Bash,然后键入:

1
$ cd ~/. ssh

如果提示:No such file or directory 说明你是第一次使用Git,请直接跳到第三步。

2.如果不是第一次使用,执行下面的操作,然后跳到第四步:

1
2
3
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

3.生成密钥,键入:(把邮箱改成自己邮箱地址)

1
ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM"

生成过程中会让你输入passphrase口令,可以直接回车,以后出现都是空密码。

1
2
3
4
5
6
7
8
$ ssh-keygen -t rsa -C "YOUR_EMAIL@YOUREMAIL.COM"
Generating public/private rsa key pair.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/USERNAME/.ssh/id_rsa.
Your public key has been saved in /c/Users/USERNAME/.ssh/id_rsa.pub.
The key fingerprint is:
15:81:d2:7a:c6:6c:0f:ec:b0:b6:d4:18:b8:d1:41:48 YOUR_EMAIL@YOUREMAIL.COM

4.生成密钥后,在目录找到私钥 id_rsa 和公钥 id_rsa.pub 这两个文件。千万不要把私钥文件 id_rsa 透露给任何人。否则别人可以以管理员身份登录你的blog。

5.在coding中添加ssh
使用文本工具打开id_rsa.pub,复制里面的所有内容。进入coding==>项目==>进入项目==>左侧设置==>部署公钥==>新建部署公钥,公钥名称随意,在SSH-RSA公钥内容文本框中,把刚才复制的东西全部粘贴进去,然后添加。

6.在桌面右键Git Bash,测试师傅可以连接到服务器。

1
ssh -T git@git.coding.net

如果是第一次链接,会出现以下警告:

1
2
3
The authenticity of host 'git.coding.com (50.116.2.223)' can't be established.
#RSA key fingerprint is 84:9e:c9:8e:7f:36:28:08:7e:13:bf:43:12:74:11:4e.
#Are you sure you want to continue connecting (yes/no)?

直接输入yes,然后会提示输入passphrase,如果刚才是空密码,那么直接回车过去就好。

如果出现下面的字符,就说明成功了:

1
Hi USERNAME! You've successfully authenticated, but GitCafe does not provide shell access.

0x04 设置Git账户信息

在桌面右键Git Bash,键入:

1
2
$ git config --global user.name "yourname"                  //coding上的用户名
$ git config --global user.email "yourmaill@yourmaili.com" //填写自己的邮箱

0x05 添加Pages目录

如果直接上传,上传上去的只是所谓的博客源码,如果我们要让我们博客显示出来,就要建立pages目录。

打开hexo文件夹,右键Git Bash,然后键入:

1
2
3
4
5
6
7
echo 'Hello, world' > index.html
git init
git add .
git commit -a -m 'Hello, world!'
git remote add origin git@git.coding.net:Processor/Processor.git //把这里的Processor替换成自己的id
git checkout -b coding-pages
git push origin coding-pages

完成上面的操作,在coding的项目界面便会出现coding-pages的分支,然后进入分支界面,把默认分支改为coding-pages,删除原默认分支。

0x06 配置Hexo的配置文件_config.yml

配置好Hexo和coding之后,我们需要把两者联系在一起。用编辑器打开_config.yml文件(推荐sublime),打开之后把最后的deploy改为:

1
2
3
4
deploy:
type: git
repository: git@git.coding.net:Processor/Processor.git
branch: coding-pages

这里使用的是nodo.js语法,这种语法对格式的要求相当高,:后必须跟上空格,不然会报错,请严格按照格式来写。

0x07 开启Coding-Pages服务

登录Coding,点进项目==>代码==>Pages服务==>开启服务

0x08 绑定自定义域名

在Coding服务页,可以输入自己的域名,然后点击添加域名绑定。然后在你的域名管理页面添加一个CNAME记录,将他指向coding-pages:processor.coding.me,然后保存。

0x09 完成配置

在Hexo目录右键Git Bash,键入:

1
2
hexo g
hexo d

每次修改自己的任何配置文件,或者新建了博文,都必须输入这两个指令上传!

如果出现报错:

1
ERROR Deployer not found: git

解决方法:

1
npm install hexo-deployer-git --save

如果没有爆出错误,说明配置成功,可以打开xxx.git.coding.net(xxx为自己的id)查看自己的博客主页。如果报错,请检查前面的配置有没有错误,如果找不到错误,请参见Hexo的常见报错

Hexo的优化

Hexo提供了一个默认主题,我们可以在官方网址寻找我们自己喜欢的主题。
这是我的主题yilia

挑选好主题之后,在hexo目录下Git Bash,键入:

1
$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

在Hexo目录下,修改_config.yml里的项目

1
theme: yilia

然后在hexo目录下键入:

1
hexo g

每一个主题和主题的名字都有不同,但大部分主题,都会提供详细的书写方式。

0x01 加入多说评论系统

1.注册多说
2.创建新项目,shortname用你的ID小写
由于博主主题只带多说评论系统插件,这里不多解释,只需要在hexo\themes\yilia下打开_config.yml,修改

1
duoshuo: processor

0x02 关于统计,打赏系统

可以注册百度站长平台,里面有详细的使用方法。

0x03 其他

1.如果想要修改边框,头像,边栏超链接地址,这个一般因不同的主题而异,所以不好详述,详细要参阅对应的官方文档。

2.其实hexo还能添加很多不同的插件,博主修为尚浅,所以就不写出不清楚的插件用法,这里贴上一些别人的博客。Hexo的优化与定制

Hexo的使用

我们终于搭好了自己的Blog,却发现并没有“写博客”的功能。

0x01 常用命令

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

1.第一个命令也就是最常用的命令,postname可以替换为我们想要的文章名,文章名方便记忆就好,只是在书写的时候我们能够区分就可以了,别人是看不到的。

2.第二个命令比较复杂,但是如果仅仅是写博文的话,第二个是用不到的。

3.35命令就不用多解释了,每次写完博文,都需要这两个命令上传。

0x02 Markdowm语法

当我们输入命令,新建了一个文章,我们发现在hexo文件夹下source/_posts下生成了一个md文件,md文件是什么呢?我们首先得了解Markdown语法。(本人用Markdownpad编辑器)

0x03 .md文章头部

1
2
3
4
5
6
7
8
title: postName               #文章页面上的显示名称,可以任意修改,不会出现在URL中
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories:
- example #分类,多个分类依次
tags:
- tag1 #文章标签,可空,多标签请用格式,注意:后面有个空格
description: #附加一段文章摘要,字数最好在140字以内。
---

贴上Markdown语法

0x04 关于本地图片和所属路径的问题

当我们想使用我们自己的本地图片的时候,我们会纠结一件事,就是我们该把文件放在哪?路径又该怎么引用,我来解释下这个问题:

1.当我们编辑好我们的博文的时候,我们输入指令hexo g ,会自动生成所对应的html页面添加到hexo文件夹下的public,然后上传public,所以public便是我们的主目录。

2.但是我们发现public内的东西是修改不了的,所以本地图片不能存放在public中,所以我们要把图片放在source中,在source中新建img文件夹,然后建对应博文的文件夹,放置所属的图片,这样当我们需要引用本地图片的时候,则输入这样的路径(/img/Hexo_Blogs/1.png),然后我们就发现,图片没有问题了。

后记

折腾来折腾去,也算是学了一个新技能,全文按照土爷的思路又重新写了一遍,反正希望不会搭博客的童鞋们也可以搭建自己的Blog。

文章目录
  1. 1. 安装Hexo
    1. 1.1. 0x01 安装Git
    2. 1.2. 0x02 安装node.js
    3. 1.3. 0x03 安装Hexo
    4. 1.4. 0x04 部署Hexo
  2. 2. 配置Coding
    1. 2.1. 0x01 注册Coding
    2. 2.2. 0x02 添加项目
    3. 2.3. 0x03 配置ssh密钥
    4. 2.4. 0x04 设置Git账户信息
    5. 2.5. 0x05 添加Pages目录
    6. 2.6. 0x06 配置Hexo的配置文件_config.yml
    7. 2.7. 0x07 开启Coding-Pages服务
    8. 2.8. 0x08 绑定自定义域名
    9. 2.9. 0x09 完成配置
  3. 3. Hexo的优化
    1. 3.1. 0x01 加入多说评论系统
    2. 3.2. 0x02 关于统计,打赏系统
    3. 3.3. 0x03 其他
  4. 4. Hexo的使用
    1. 4.1. 0x01 常用命令
    2. 4.2. 0x02 Markdowm语法
    3. 4.3. 0x03 .md文章头部
    4. 4.4. 0x04 关于本地图片和所属路径的问题
  5. 5. 后记
,