基于Hexo搭建个人博客

一 前言

不知道你们有没有这种感觉，使用一些网上博客写文章会嫌弃广告太多，很影响阅读体验，于是有了个人博客的诞生；知识追寻者抽空 写了篇使用GitHub Pages 服务搭建个人博客，当然个人博客也有许多缺点，毕竟不是自己的开发，只能套用别人主题模板，难免功能上有些缺陷，人生不如意之事，十有八九，搭建个人博客也是如此；

知识追寻者搭建的个人博客如下，体验地址如下:

https://zszxz.github.io/

有这方面兴趣的读者可以参考本篇文章进行搭建

二准备工作

• 需要一个 GitHub 账号；
• 需要安装 node.js、npm，并了解相关基础知识；
• 需要安装git for windows（或者其它 git 客户端）；

github 注册地址： https://github.com/

Node官网: https://nodejs.org/en/download/ (10版本以上)

安装完在cmd窗口执行 如下命令 显示版本号说明安装成功；

node -v

git官网: https://git-scm.com/

填写用户名 邮箱

$ git config --global user.name "user_name" # user_name填入GitHub用户名
$ git config --global user.email "user_email" # user_email填入GitHub注册的邮箱

查看已经配置的用户名邮箱

$ git config user.name
$ git config user.email

github 配置 ssh key 自行搜索配置，否则后文仓库无法发布

三安装 hexo

Hexo 是一个简单、快速、强大的基于 Github Pages 的博客框架，支持 Markdown 格式，有众多优秀插件和主题，详细 参考官网： https://github.com/hexojs/hexo

创建 myBlog 目录，比如知识追寻者的创建目录如下

C:mydataookmyBlog

在myBlog目录中 打开 git Bash 执行如下命令，安装 hexo

npm install hexo-cli -g

接着 执行如下命令，实际上是从 github拉去 hexo代码

 hexo init 

拉去完后目录内容如下

• themes 目录存放博客的主题信息；
• source目录存放文章
• _config.yml 存放hexo的配置文件

接下来 执行 如下一组命令。安装 npm依赖和编译静态文件

npm install
hexo g

执行完成后 文件夹中多出 public 目录 用于存放静态文件

接着执行本地预览命令

 hexo s

浏览器打开 http://localhost:4000/ 出现如下界面表示本地搭建成功；

四基本配置

由于 默认hexo 的静态页面比较丑，所以我们需自定义主题；

在source/_post 目录下有个hello-word.md文件，替换为我们自己的hello-word.md文章

然后 使用 如下命令创建博客文章

hexo new "文件名"

你就可以在里面随意书写内容

之后执行如下一组命令进行缓存清除，重新生成本地预览，运行

hexo clean
hexo g
hexo s

重新运行后的网站首页如下

打开 _config.yml 文件 修改 标题和 作者重新启动

打开网址发现界面是真的丑

打开 官方主题 网址 https://hexo.io/themes/ 挑选自己喜欢的主题，点击进入主题 github地址，复制代码地址

使用如下命令下载主题到thems目录下

git clone https://github.com/justpsvm/hexo-theme-primer.git themes/primer

找到 _config.yml 末尾 如下位置，替换 thems目录下载的主题名称

再次执行三组命令

hexo clean
hexo g
hexo s

然后在github创建一个仓库，名称格式为； “用户名”.github.io

安装部署插件

$ npm install hexo-deployer-git --save # 安装部署插件

修改部署配置

然后 执行如下一组命令

hexo clean
hexo g
hexo s
hexo d

每次 修改完都需要执行如上命令重新发布；

浏览器输出 https://zszxz.github.io/ 显示如下说明搭建成功；

五hexo 命令

常见命令

1. hexo new “postName” # 新建文章
2. hexo clean # 清除缓存
3. hexo generate # 生成静态页面至 public 目录
4. hexo server # 开启预览访问端口（默认端口 4000，’ctrl + c’关闭 server）
5. hexo deploy # 部署到 GitHub
6. hexo help # 查看帮助
7. hexo version # 查看 Hexo 的版本

缩写

1. hexo n == hexo new
2. hexo g == hexo generate
3. hexo s == hexo server
4. hexo d == hexo deploy

组合命令

1. hexo s -g # 生成并本地预览
2. hexo d -g # 生成并上传

六后续迁移

如果换电脑了，hexo的迁移也不困难，将 myblog 内容 存储至github，从另一台电脑拉取，内容如下

_config.yml
package.json
.gitignore
scaffolds/
source/
themes/

之后安装hexo环境

npm install -g hexo

安装依赖

npm install
将文章部署到github上的模块
npm install hexo-deployer-git --save
安装RSS插件
npm install hexo-generator-feed --save
添加Sitemap,加速网页收录速度
npm install hexo-generator-sitemap --save

检查

hexo g
hexo s

最后如果写的不错，大家可以关注下我公众号：知识追寻者