如何使用hexo+gitte+typora建立个人博客网站？

一、准备工作

1.安装git

在各大电脑管家安装（我是用的是联想自带的电脑管家），速度比较快一点，用git官方安装速度太慢，不建议。

2.安装node.js

node.js其自带npm，用来下载hexo插件，建议下载国内cnpm，速度较快

https://nodejs.org/zh-cn/ #node.js中文网站
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install hexo-symbols-count-time  #利用cnpm安装hexo插件

二、安装hexo（官网）

启动Git Bash Here，然后输入命令：

npm install hexo-cli -g

手动在d盘下建立blog文件夹，d:\blog或者使用命令：

mkdir blog

首先进行初始化在本地生成Hexo相关目录：

hexo init

然后就可以使用Hexo三连了，即我们最常用的三个主要命令（依旧在上述Git Bash命令端口中）：

hexo clean # 清空已有hexo网站文件
hexo generate(or g) # 依据网页文本与新的CSS样式生成新网站文件
hexo server(or s) # 启动本地服务器，可以在localhost:4000查看网站修改效果

依次运行上述三个命令，就可以在浏览器打开localhost:4000端口，查看对应网站界面效果，一般默认的是一个landscape主题，后期当提交新文章或者新的样式修改时，往往都是先从本地查看结果无误后再部署到Gitee Page。至此最简单的个人博客建立工作就已经完成了。接下来是如何部署到网上，让别人也能看到你的个人博客网站。

三、 把博客部署到码云上

首先说明一下，为什么选择码云，最近 GitHub 经常性蹦，访问也比较慢，所以我就选择了码云实现一下，当然你有服务器就最好不过了。

码云（gitee）：https://gitee.com/

1. 注册码云，创建仓库

我们需要在 gitee 创建自己的账户（如果没有），然后再创建一个自己仓库

输入仓库名称，其它默认即可，这里因为我已经创建了。

这里强烈建议使用与归属名相同的仓库名和路径名，最后会产生个人博客的网站时，没有二级目录，如https://www.xiahanlin.gitte.io

2. 生成/添加 SSH 公钥

码云 Gitee 、GitHub 提供了基于 SSH 协议的 Git 服务，在使用 SSH 协议访问仓库仓库之前，需要先配置好账户/仓库的 SSH 公钥。

2.1 配置 ssh 账户和邮箱

邮箱不必与 Gitee 账号相同，个人邮箱即可。

git config --global user.email *********@163.com # 设置邮箱
git config --global user.name '****'   # 设置用户名

查看账户和邮箱

git config --global user.name 
git config --global user.email

2.2 本地生成ssh公钥

邮箱为刚配置好的账户邮箱

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

按照提示完成三次回车，即可生成 ssh key

2.3查看 ssh 公钥

vim ~/.ssh/id_rsa.pub
# 退出
:qa!

复制公钥去 Gitee 粘贴，添加

2.4 测试是否连接成功

码云 Gitee

ssh -T git@gitee.com

如下图所示，则表示连接成功

2.5 配置连接 Gitee

进入到我们新创建的仓库，复制项目地址

复制 URL ，到 hexo 的配置文件 _config.yml，相应位置修改成如下：

四、部署博客

1.安装自动部署发布工具

cnmp install hexo-deployer-git --save

新建 deployer.sh 文件，输入代码：

hexo clean
hexo g 
hexo d

一键部署博客

sh deployer.sh

2.Gitee Pages 设置

在项目的服务中选择 Pages 选项

默认配置，点击启动即可

下图则成功开启，记住博客地址，之后可以点更新进行操作

博客发布成功之后，可以访问博客地址：xxxxxx，就可通过他提供的博客地址进行访问，预览在线博客啦！！

如果博客的样式不对，则需要在_config.yml中配置下博客地址和路径：

url: “码云提供给您的博客地址” #如https://www.xiahanlin.gitte.io
root: /

五、主题配置

下载自己喜欢的主题，可以去hexo官网主题探索。这里我是用的是next主题，可以去next github仓库中下载压缩包然后放到博客项目根目录下的 themes 中。

然后配置站点 _config.yml

theme: “您的主题文件夹完整名称”  
# 这里需要注意:后面要有一个空格，名称要和theme下的主题目录名称相同。

修改完成，本地运行 hexo s 测试成功即可上传部署到 Gitee 然后点击更新即可。

六、主题优化

1.Next主题风格

Next提供了四种主题风格scheme，可以在主题配置文件blog/themes/next/_config.yml文件中进行选择，分别是Muse、Mist、Pisces、Gemini：

我目前使用的是第一个布局。

Next主题一般配置：

override: false

# Console reminder if new version released.
reminder: false

# Allow to cache content generation. Introduced in NexT v6.0.0.
cache:
  enable: true #表示添加缓存功能，这样浏览器后续打开我们的博客网站会更快

# Remove unnecessary files after hexo generate.
minify: false

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
  #head: source/_data/head.swig
  #header: source/_data/header.swig
  #sidebar: source/_data/sidebar.swig
  #postMeta: source/_data/post-meta.swig
  #postBodyEnd: source/_data/post-body-end.swig
  #footer: source/_data/footer.swig
  #bodyEnd: source/_data/body-end.swig
  #variable: source/_data/variables.styl
  #mixin: source/_data/mixins.styl
  #style: source/_data/styles.styl


# ---------------------------------------------------------------
# Site Information Settings
# See: https://theme-next.org/docs/getting-started/
# ---------------------------------------------------------------

favicon:
  small: /images/16×16.png
  medium: /images/32×32.png
  apple_touch_icon: /images/128×128.png
  safari_pinned_tab: /images/icon-close.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

# Show multilingual switcher in footer.
language_switcher: false

footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2021 #建站时间

2.添加小宠物

  npm install --save live2d-widget-model-epsilon2_1

npm install --save live2d-widget-model-haruto

npm install --save live2d-widget-model-hibiki

npm install --save live2d-widget-model-hijiki

npm install --save live2d-widget-model-izumi

npm install --save live2d-widget-model-koharu

npm install --save live2d-widget-model-tororo

七、问题解决

1.hexo框架下，如何解决图片插入？

试了好多方法，发现下面这种方法是可行，结合typora。

使用最简单的方式在 source 目录下创建images目录，然后图片都保存在这里。

关键是要在typora上做以下设置：

在md文件头部的配置项中，添加 typora-root-url: ../

---
title:  hexo+typora 插入图片
date: 2019-06-08 10:37:22
tags:
typora-root-url: ../
---Copy

这样引用的图片都以上一级目录即 sourse作为根目录了，并在偏好设置中，设置插入图片复制到指定到路径，此时插入的图片，都会自动保存在 sourse/images目录下，并且本地的显示和服务器上的根目录完全一致，使用体验还是很方便的。

总结以上，就是在每篇md文件中，开头设置typora-root-url: ../，然后设置偏好设置，就可以既实现typora本地实时预览和网上配图的完美结合。

一次配置，永久实现，在scaffolds文件夹下的post.md，是每次hexo n 的默认模板，可以通过更改它，实现每次新建md文件，就已经配置好，然后在typora设置一下，就可以永久不用担心图片在博客中的实现问题。

8.测试代码和公式支持

****  合并数据 ****

use C:\Users\msi\Desktop\数据处理\asset.dta,replace
merge m:m BankCode Date using C:\Users\msi\Desktop\数据处理\operation.dta,nogen
merge m:m BankCode Date using C:\Users\msi\Desktop\数据处理\profit.dta,nogen
merge m:m BankCode Date using C:\Users\msi\Desktop\数据处理\creditlossprepare.dta,nogen
****  转换文字变量为数字变量和日期变量 ****

destring BankCode,gen(Code)
gen date = date(Date,"YMD")
format date %td
tsset Code date
drop BankCode 
drop Date
label var Code 银行代码
label var BankName 银行名称
label var date 统计日期
label var FCIC 手续费及佣金收入
label var NIAPC 归属于母公司所有者的净利润
label var BEPS 基本每股收益
label var REV 营业收入
label var TDepo 存款总额
label var TLoan 贷款总额
label var CptAdqRt "资本充足率(%)"
label var NpfLnRt5 不良贷款比例
label var NpfPpCvRt5 不良贷款拨备覆盖率
label var CsIncRt "成本收入比(%)"
label var TA 资产总计
label var EAPC 归属于母公司所有者权益合计
label var DdLnRsvfd "贷款呆帐准备金"


****  导出为excel格式  ****
export excel using "C:\Users\msi\Desktop\数据处理\年度数据.xls", sheetreplace firstrow(varlabels)

$$\frac{x^2}{y^2}*z^2=m^2+n^2$$

$y^2=2$

$y^2=2$

$$y^2=3$$

---
title: 基于Hexo的hexo-theme-matery主题搭建博客并优化
date: 2019-10-03 14:25:00
author: 悟尘
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: 工具
tags:
  - blog
  - hexo
---

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
title	Markdown 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top	true	推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover	false	v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc	true	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	false	是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO 时需要
reprintPolicy	cc_by	文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

八、插入PDF

如果我们想在word上编辑，然后放到博客上，可以先利用word另存为pdf，然后利用pdf插件实现。这一点在我所使用的Next6主题中采用了，具体如下：

• step1 安装pdf插件

  进入我们博客的主题目录，如blog/themes/next6，执行：

git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

或者在blog/目录下执行：

npm install hexo-pdf --save

• step2 hexo 配置（如果采用第一种安装方式）

pdf:
  enable: true
  per_page: true
  height: 500px
  pdfobject:
    cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

• step3 存放pdf

  存放pdf的方式跟图片一模一样，具体我就不说了

• step4 插入pdf

  官方支持的方式是

[](pdf链接)

而采用方法二的使用方式是：

{% pdf pdf链接 %}

官方的那个我总是编译出问题，所以下面给出方法二的效果：

九、配置个性化域名

配置个性化域名

一顿操作下来，打开我们的博客还是：www.xxx.github.io，是不是很没有牌面？我们可以考虑购买一个专属域名，以后打开博客就是这样：www.xxx.com 。

阿里云和腾讯云都可以，我的是腾讯云，购买域名后首先需要添加解析：

方法一：点击添加记录，需要添加两个记录，两个记录类型都是 CNAME ，第一个主机记录为 @ ，第二个主机记录为 www，记录值都是填你自己的博客地址（比如我的是：muyiio.github.io），保存之后域名解析就完成了！

方法二：两个记录类型为 A ，第一个主机记录为 @ ，第二个主机记录为 www，记录值都为博客的 IP 地址，IP 地址可以 cmd 中输入 ping 你的博客地址 获得（比如我的：ping muyiio.github.io），保存之后域名解析就完成了！

参考资料：

《域名解析中A记录、CNAME、MX记录、NS记录的区别和联系》

不管在哪个平台购买域名，操作都大同小异，这里说明两点：

如果你填写的是没有www的，比如 muyio.com，那么无论是访问 https://www.muyiio.com 还是 https://muyiio.com ，都会自动跳转到 https://muyiio.com。

如果你填写的是带www的，比如 www.muyiio.com ，那么无论是访问 https://www.muyiio.com 还是 https://muyiio.com ，都会自动跳转到 http://www.imuyiio.com。

然后打开你的github博客项目，点击settings，拉到下面Custom domain处，填上你自己的域名，保存就可以了。

现在我们的项目根目录应该会出现一个名为CNAME的文件了。如果没有的话，打开你本地博客/source目录，我的是C:\Blog\Hexo\source，新建CNAME文件，（注意不要加.txt，没有任何后缀名！）。然后在里面写上你的域名，保存。最后运行hexo g、hexo d上传到github。

现在就可以通过我们的个性化域名：www.xxx.com、xxx.com访问自己的博客了

xiahanlin1993

git config —global user.name “xiahanlin1993”
git config —global user.email “xiahanlin1993@163.com”

git config user.email

ssh-keygen -t rsa -C “xiahanlin1993@163.com”