Hexo 博客搭建

Hexo 搭建属于自己的博客

部署个人博客

安装noejs和git

安装网站：

nodejs
git
安装完后需要确认有无添加系统路径

安装部署Hexo

使用npm命令安装Hexo
npm install -g hexo-cli
部署Hexo
cmd到指定路径执行命令生成blog：hexo init <folder>
cd <folder>
npm install
将blog部署到本地静态：hexo s
命令添加博客： hexo n "文件名" 或hexo new "文件名"

美化主题
可以自己寻找或者魔改
hexo-theme-matery
cd themes
主题git下载地址或把主题下载好复制粘贴到themes文件夹中
git clone https://github.com/blinkfox/hexo-theme-matery
切换主题：修改Hexo根目录下的_config.yml文件中的theme值：theme:hexo-theme-matery

新建分类categories页
hexo new page "categories"
编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容
1
2
3
4
5
6
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
新建标签 tags 页
tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下
hexo new page "tags"
编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容
1
2
3
4
5
6
---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
新建关于我 about 页
about页是用来展示关于我和我的博客信息的页面，如果在你的博客 source目录下还没有about/index.md文件，那么你就需要新建一个，命令如下：
hexo new page "about"
编辑你刚刚新建的页面文件/source/about/index.md，至少需要以下内容：
1
2
3
4
5
6
---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

新建友情连接 friends 页（可选的）
friends页是用来展示友情连接信息的页面，如果在你的博客source目录下还没有friends/index.md文件，那么你就需要新建一个，命令如下：
hexo new page "friends"
编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

代码高亮
由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：
npm i -S hexo-prism-plugin
然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：
1
2
3
4
5
6
7
8
highlight:
enable: false

prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
搜索
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
1
2
3
search:
path: search.xml
field: post
文章字数统计插件
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件:npm i --save hexo-wordcount
然后只需在本主题下的 _config.yml 文件中，激活以下配置项即可
1
2
3
4
5
wordCount:
enable: false # 将这个值设置为 true 即可.
postWordCount: true
min2read: true
totalCount: true

转载自blinkfox

部署博客可能出现的问题

解决图片路径问题
安装 hexo-asset-image 插件
npm install hexo-asset-image --save
修改_config.yml文件:post_asset_folder: true
当hexo new test创建时，会生成test目录和test.md网页，将图片放入test目录，test.md可正常解析。
解决部署到博客无法显示样式的问题
主要原因是访问路径的原因
还有使用https方法还是http方法
解决方法：在_config.yml文件中找到url项

url:仓库路径 # https://gitee.com/navierstokes20/summary/
root: 仓库名(前后加斜杠) #/summary/

可在主题里的_config.yml里面修改主页配置，以及media文件夹中图片可以自我修改
如果出现页面加载不出来可能是开启某项功能后，缺少相应的插件，需要安装相应插件才能重新显示页面。

Unhandled rejection ReferenceError: D:\ok\themes\hexo-theme-matery\layout\post.ejs:26
24|
25| <% if (isTocEnable) { %>
26| <%- partial('_partial/post-detail-toc.ejs') %>
27| <% } else { %>
28| <%- partial('_partial/post-detail.ejs') %>
29| <% } %>
D:\ok\themes\hexo-theme-matery\layout_partial\post-detail-toc.ejs:90
88|
89|
90| <%- partial('_partial/post-detail.ejs') %>
91|
92|
93|
D:\ok\themes\hexo-theme-matery\layout_partial\post-detail.ejs:53
51|
52| <%- __('wordCount') %>:  ...

注释

hexo blog文章路径: <folder>\source\_posts
hexo clean //清除静态页面缓存（清除 public 文件夹)
hexo g //在本地生成静态页面（生成 public 文件夹）
hexo s //启动本地服务 http://localhost:4000，进行预览调试 -p 80 指定端口80
hexo d //远程部署，同步到 GitHub
npm install hexo-deployer-git --save //自动部署
hexo clean && hexo g && hexo d //发布
hexo markdown语法不支持{}链接跳转直接(#标题名)跳转

部署到gitee

1.在Gitee上创建新的仓库(注意: 仓库名称应该和用户名相同)
2.配置SSHKey,使用ssh key来解决本地和服务器的连接问题。

1 2	cd ~/.ssh #检查本机是否已存在的ssh密钥 ssh-keygen -t rsa -C "邮件地址" 生成ssh密钥

连续3次回车，最终会生成一个文件在用户目录下。
打开用户目录（C:\用户\你的用户名\），找到.ssh\id_rsa.pub文件，记事本打开并复制里面的内容。打开你的gitee主页，右上角头像那里选择设置 → SSH公钥，将刚复制的内容粘贴到公钥那里，标题随便填，填完点击确定。
测试是否成功ssh -T git@gitee.com #注意，'T'是大写的

3.配置用户名和邮箱

1
2

git config --global user.name "xxx"  #你的 gitee 用户名，即注册时的用户名，个人主页最大那个就是了
git config --global user.email  "xxx@qq.com"  #填写你的github注册邮箱

4.配置_config.yml(全局配置)中的deploy部分

deploy:
  type: git
  repo: https://gitee.com/用户名/仓库名  #仓库的地址，比如我的就是：https://gitee.com/Kaiter-Plus/Kaiter-Plus
  branch: master

5.安装部署gitee插件

npm install hexo-deployer-git --save

6.部署giteehexo d

让博客在网上看到，需要 gitee 的 Gitee Pages 服务，操作步骤如下：

打开gitee上的仓库，然后找到服务，然后再找到里面的Gitee Pages
页面跳转之后，往下拉，选择部署的分支（默认为 master）,由于我们直接是部署在根目录的，所以部署分支直接默认，部署目录不用填，最后点击启动即可。

hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy #部署到GitHub
hexo help  # 查看帮助
hexo version  #查看Hexo的版本
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy
hexo s -g #生成并本地预览
hexo d -g #生成并上传