Windows下利用Hexo搭建静态博客

Windows下利用Hexo搭建静态博客

十月 07, 2016

按照土爷的教程折腾了两天,终于搭好了这个静态的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。