发现在VPS上部署Hexo博客看着太麻烦了,还是本地配合Github搞吧,这样既不失装B还能超低成本有自己的一个博客,不用自己出服务器钱,不用担心被攻击,如果你不要独立域名直接就是0成本!

在dalao界Hexo博客一直令我等鶸膜拜,在网上找了很多资料后终于搞定了Hexo的博客,以后也可以装B去了。不过你要是不差钱,就是个小白还是用WP吧,这玩意用着其实挺别扭的。。。

Table of Contents

一、Windows 10上的部署

本次以比较流行的Win10为例,Win7、8也差不多,XP直接打死。

1.安装Git

Git是上传到Github的工具,如果在Github上有项目都会用到这个。

下载:https://git-scm.com/download/win 选择对应系统的版本即可,一路下一步,记住选择几个功能,这样操作更像是在Linux Shell里操作。

Use Git from Bash onlyCheckout Windows-style,commit Unix-style line endingsUse MinTTY(the default terminal of MSYS2)

2.配置Git

安装好后需要几行命令说清楚你是谁,这样才能认对人。自行替换自己的用户名和邮箱。

1
2
git config --global user.name "Your Name"
git config --global user.email "email@example.com"

3.生成密钥文件

这个操作加密你的通信过程,同时后期上传到Github都会用到。

1
ssh-keygen -t rsa -b 4096 -C "email@example.com"

按3次回车,全部无视,证书文件会在C:\User\用户名.ssh 生成两个文件。

4.安装NodeJS

去官网下载NodeJS Windows版本,建议选择LTS版本,https://nodejs.org/en/,安装的时候务必选择Add to PATH选项。

5.安装Hexo

在Git程序里运行命令行即可安装

1
npm install -g hexo-cli

至此在Win上的部署安装已经完成,接下来就是如何使用了。

二、Hexo的使用

1.新建站点

假设代码存放在D:\hexo\blog

1
2
3
4
5
6
cd /d
mkdir hexo
cd hexo
hexo init blog
cd blog
npm install

在D:\hexo\blog 里就能看到所有文件了,下面是文件说明:

目录名称 说明
scaffolds 模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。 Hexo的模板是指在新建的markdown文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。
source 资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
themes 主题 文件夹。Hexo 会根据主题来生成静态页面。
_config.yml 网站的 配置 信息,您可以在此配置大部分的参数。
package.json 应用程序的信息。EJS, StylusMarkdown renderer 已默认安装,您可以自由移除。

2.Hexo的配置

(1)替换主题

推荐NexT主题,这是一款知名的Hexo主题,非常漂亮简洁。

1
2
cd /d/hexo/blog
git clone https://github.com/iissnan/hexo-theme-next themes/next

回到根目录,找到_config.yml 文件,在第66行的theme字段里把默认主题名字换成next即可。

(2)插入图片

Markdown支持插入本地图片或外部链接图片,要保证本地和网络上都能访问图片,使用hexo-asset-image

1
2
3
4
5
# 安装插件
npm install https://github.com/CodeFalling/hexo-asset-image --save
启用插件,确保主题配置文件D:\hexo\blog\_config.yml中
post_asset_folder: true
# 新增博文后,会在D:\hexo\blog\source\_posts目录下生成 xxx.md 和 xxx 目录,将图片存放该目录中,使用时 ![](***.jpg),这样Typora预览和发布到网上时Hexo博客都能正常显示图片

3.新建博文

1
hexo new "Hello World"

在目录D:\hexo\blog\source\_posts下会生成Markdown文件Hello World.md

手动添加Markdown文件到D:\hexo\blog\source_posts目录效果一样

4.本地预览

如果以后修改了主题和写了一篇新文章都可以使用这个方法在本地查看,解决BUG。

1
2
3
4
5
cd /d/hexo/blog
# 生成静态文件
hexo generate
# 启动本地服务器
hexo server --debug

打开浏览器,输入http://localhost:4000 即可看到站点的预览了。

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴

提醒一点,生成静态化可以使用简化命令

1
hexo g

在后面的上传到Github中,如果你发现明明写了一篇文章,但是网站却没有?那么一定是MD的语法有问题,生成静态化文件的时候就会报错,务必检查一下哪里出问题,修复后才能成功上传和展现文章。

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴

三、配置Github Pages或Coding Pages

Github比较出名些,Coding是国内的平台,和Github基本差不多,如果担心访问速度或者其他原因可以选择国内的。

Github的配置方法

1.注册并登录Github帐号。

新建一个仓库,建好后可以在仓库首页的Setting里修改为:yourname.github.io

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴](https://odg1

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴

2.添加SSH KEY

点击Github右上角的头像,有个Setting,找到SSH and GPG keys,新建一个New keys,随便起名,把密钥内容复制进去。密钥是啥?就是最开始生成的那个密钥,id_rsa.pub文件。

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴

3.测试SSH连接

在本地的Git中执行,

1
ssh -T git@github.com

如果出现Hi username! You've successfully authenticated, but GitHub does not provide shell access.提示,则表示连接成功。如果不行就重新生成一个密钥再重新上传密钥试试。

Coding中的配置方法

Github免费用户只能新建公开的代码仓库,而且是国外的服务器,而Coding可以新建私有代码仓库,国内用户访问速度更快。注册Coding,添加项目,项目名称为Coding用户名,分支选择master,同时还需要在D:\hexo\blog\source目录下创建一个空白文件Staticfile:

1
2
cd /d/hexo/blog/source
touch Staticfile

添加SSH keys

https://coding.net/help/doc/git/ssh-key.html

在Coding 账户中找到SSH 公钥,新增公钥,复制公钥文件id_rsa.pub中的内容

测试SSH连接

Git Bash中执行:

1
ssh -T git@git.coding.net

如果出现Hello username! You have connected to Coding.net by SSH successfully!提示,则表示连接成功。

四、部署你的博客

注意站点配置文件D:\hexo\blog\_config.ymldeploy参数配置如下:

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo:
github: git@github.com:zrj766/zrj766.github.io.git,master
coding: git@git.coding.net:zrj766/zrj766.git,master

在本地Git中执行:

1
2
3
4
5
6
# git方式需要先安装插件
npm install hexo-deployer-git --save
# 上传代码到仓库
hexo clean && hexo generate && hexo deploy
或者:
hexo clean && hexo generate -d

如果出现INFO Deploy done: git提示,则表示部署成功。访问用户名.github.io用户名.coding.me都可以正常打开博客了。

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴

五、独立域名绑定

用个二级域名总是不爽,何况现在主流域名都不贵,现在来绑定自己的域名。

1.DNS解析

www和@记录做CNAME解析到 用户名.github.io

如果使用的是Coding同样的方法解析到 pages.coding.me

2.Hexo上的设置

域名绑定Github

D:\hexo\blog\source目录下新建一个文件CNAME,内容为要绑定的域名:

文件去掉格式,直接空白

1
2
www.example.com
example.com

域名绑定Coding Pages

在Coding网站中进入刚新建的项目,依次单击代码Pages服务自定义域名:

轻快装B低成本–Win10搭建Hexo博客 – 初行博客 - 回归初心,记录生活点滴

重新部署一次代码即可。

六、其他辅助工具

Markdown书写工具

推荐Typora,介绍文章:http://www.iplaysoft.com/typora.html

Markdown渲染插件

推荐Markdown Here

图床

由于markdown要导入网络图片才能让本地用户和网络用户都能正常访问图片,而且像有道云笔记这种还不能支持插入图片,所以要借助图床和快捷插入图片的小插件来提高写作效率。

七牛

注册七牛,在对象存储中新建存储空间,要选择公开空间,不然上传图片后无法分享外部链接。

MPic

下载MPic-图床神器,设置账号,空间名为七牛对象存储空间名称,AccessKeySecretKey在七牛个人面板下的密钥管理中,域名为七牛对象存储空间中内容管理页签下的外链默认域名。

七、扩展阅读

推荐一些文章可以帮助你更快的学习使用和解决问题

Hexo 入门指南(三) – 文章 & 草稿

搭建Hexo博客中碰到的坑

八、参考文章

本篇文章的写成参考了以下文章,感谢原作者的奉献!

Win10搭建hexo-Github-Coding博客

搭建Hexo博客中碰到的坑

九、总结

Hexo这种静态化博客真是轻快,打开速度飞快,比臃肿的WP强了很多。不过因为没有后台之类的东西所以新建文章等操作需要手动操作,不过Hexo的可塑性还是不错的,流行的MD语法,还有文件在本地都可以自由修改,只要懂得一些代码知识就能打造自己的站点。加上配合Github、Coding的使用,完全可以做到0成本拥有自己的博客。如果你对他感兴趣就一起来部署拥有自己的第一个博客吧!