利用Hexo框架搭建属于你自己的静态博客

磨磨蹭蹭,看了土爷和楪祈姐姐的博客终于把自己的博客搭好了orz。。。一路坎坷,坑没少踩。好了进入正题。以下教程内容由楪祈姐姐的错字连篇的教程再加上我自己踩的坑优化而来。(对,我就是在黑楪祈姐姐,让你日常空间秀出货。此处应该脑补非洲人的注视)

安装Hexo

0x00 安装Git

请根据自己的系统选择合适的Git版本(传送门)
Windows下我们主要需要的是Git Bash功能(类似于Linux的终端)
Linux下安装完Git使用终端即可
若是Ubuntu系统,获取最新版Git的方式:

1
2
3
4
//终端里输入
$ sudo add-apt-repository ppa:git-core/ppa
$ sudo apt-get update
$ sudo apt-get install git

虽然搭建自己的博客并不需要对Git有太多的了解,但是Git港真灰常流弊啊。想学的小伙伴可以参考以下网站:
廖雪峰的Git教程
Git的官方文档

0x01 安装Node.js

请根据自己的系统选择合适的Node.js版本(传送门)
Linux下不推荐用apt-get方式安装Node.js版本,此方式安装的版本实在是太老了。
推荐的安装姿势,以我下载的版本node-v6.10.2-linux-x64.tar.xz为例

1
2
3
4
5
6
7
8
9
//解压缩包
$ tar -xvf node-v6.10.2-linux-x64.tar.xz
//将解压后的Node.js目录移到通用软件安装目录
$ sudo mv node-v6.10.2-linux-x64 /opt/
//设置环境变量
$ export PATH=/usr/local/python/bin:/opt/node-v6.10.2-linux-x64/bin:$PATH
//验证版本
$ node --version
$ npm --version

0x02 安装Hexo

Windows下:

打开安装好的Git Bash,键入以下命令

1
2
//安装Hexo
$ npm install hexo-cli -g

Linux下:

打开终端键入以下命令

1
2
//安装Hexo
$ sudo npm install hexo-cli -g

若出现XXX is no longer maintained无视就好
如果报hexo: command not found说明Node.js没有装好,需要重装一遍

0x03 部署Hexo

Windows下:

在你想要放置博客文件的地方新建一个名字叫hexo的文件夹
进入你新建的hexo文件夹,右键点击Git Bash Here,然后键入

1
$ hexo init

然后,Hexo会自动为你生成你网站所需要的全部文件。此时,我们已经在本地搭建好Blog了,继续输入命令

1
2
$ hexo g
$ hexo s

Linux下:

打开终端,键入以下命令

1
2
3
4
5
$ mkdir hexo
$ cd hexo
$ hexo init
$ hexo g
$ hexo s

然后在浏览器中输入http://localhost:4000可以看到当前的博客效果(最初的博客模板不是很好看,先别急,我们之后再进行美化的过程)我们需要把博客部署在网络上,这样别人才看得到。Hexo只支持ie8以上的浏览器

配置Coding

Coding能免费建立私有项目,GitHub建私有项目要交保护费,选择哪个看自己喜好吧
之前有人说Coding是国内的服务器,我测了一下,Coding的服务器在香港

0x00 注册Coding

Coding官网(传送门)

0x01 添加项目

登陆之后,新建一个项目,项目的名称与自己的ID一致

0x02 配置SSH密钥

Windows和Linux操作一致

①在桌面右键选择Git Bash Here,然后键入

1
$ cd ~/.ssh

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

②如果不是第一次使用Git,请执行下面的操作,然后跳到第④步

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

③生成密钥,键入:(把邮箱改成你自己的邮箱地址)

1
2
$ ssh-keygen -t rsa -C "YOUR_EMAIL@YOURMAIL.COM"
//例:ssh-keygen -t rsa -C "ash_zd@qq.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

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

④在Coding中添加ssh

1.使用文本工具打开id_rsa.pub,复制里面的所有内容。
2.进入Coding==>登陆==>右上角个人头像==>菜单中的个人设置==>SSH公钥==>新建公钥,公钥名称随意,把SSH-RSA公钥内容粘贴到文本框中==>添加(有效期看自己吧)

⑤测试是否可以连接到服务器

Windows下在桌面右键Git Bash Here,Linux下就直接在终端键入就好

1
$ ssh -T git@git.coding.net

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

1
2
3
The authenticity of host 'git.coding.com (xxx.xxx.xxx.xxx)' 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

0x03 设置账户Git信息

Windows下在桌面右键Git Bash Here,Linux下打开终端键入:

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

0x04 添加PAGES目录

如果直接上传,上传上去的只是所谓的博客源码,如果我们要让我们博客显示出来,就要建立Pages目录。
打开hexo文件夹,右键Git Bash Here,然后键入:

1
2
3
4
5
6
7
$ echo 'Hello, world' > index.html
$ git init
$ git add . //这里注意add 和 .之间的空格
$ git commit -a -m 'Hello, world!'
$ git remote add origin git@git.coding.net:Ash_zd/Ash_zd.git //把这里的Ash_zd改成你自己的ID
$ git checkout -b coding-pages
$ git push -u origin coding-pages

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

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

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

1
2
3
4
deploy:
type: git
repository: git@git.coding.net:YOURID/YOURID.git //把YOURID改成你自己的ID
branch: coding-pages

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

0x06 开启Coding-Pages服务

登陆Coding,点进项目==>代码==>Pages服务==>部署来源==>选择coding-pages分支==>保存

0x07 绑定自定义域名

关于自定义域名问题,目前腾讯云针对大学生有1元学生机优惠、域名学生优惠。详情见
①腾讯云学生优惠(传送门)
②“一元扶持”优惠政策(传送门)

绑定自定义域名的的具体操作如下

Coding端:

登陆Coding,点进项目==>代码==>Pages服务==>自定义域名==>输入你自己购买的域名例如ash-zd.com==>绑定

域名云解析服务商管理界面:

以我的腾讯云为例
管理界面==>域名管理==>点击你所购买的域名的解析操作==>添加记录==>记录类型选择CNAME==>主机记录根据自己选择填写默认为@==>记录值填写pages.coding.me==>确定

0x08 完成配置

Windows下进入hexo目录右键Git Bash Here,Linux下终端中进入hexo目录键入:

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提供了一个默认主题,我们可以从官方/个人得到我们自己喜欢的主题,提供几个选主题网站
①官方GitHub收录(传送门)
②Hexo官网Themes页面收录(传送门)
③知乎问答“有哪些好看的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

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

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

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

0x02 Markdown语法

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

关于Markdown编辑器,Windows端编辑器推荐使用MarkdownPad2
关于Markdown的学习,本文提供几篇学习Markdown较好的帖子:
Markdown——入门指南
Markdown基础语法总结
Markdown进阶语法整理
Markdown 语法说明 (简体中文版)
Markdown官方文档

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

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

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

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

后记

多尝试多爬坑是学习任何一门技术的最快途径,不要被困难吓倒,此处再次感谢楪祈姐姐(我就是抄了你很多内容,略略略)