hexo部署和优化记录

title: hexo部署和优化记录

date: 2020-06-14 09:00:03

• 前端
  
  tags:
• hexo

summary: Repository_Pages使用、Github仓库打造网页群

一、准备软件

• Git 进行部署
• NVM 用于安装和管理各个版本的nodejs
• Sublime 编辑这种多个文件夹的非常棒的编辑器
• everthing 方便查找，其实这个不是必须的

二、hexo常用命令

• hexo clean 清除缓存文件db.json 和已生成的静态文件public

• 网站显示异常时可以执行这条命令试试,比如，网站的标签和分类没有及时更新
• hexo g && hexo s -p 5555 用本地的5555端口，进行本地调试
• hexo clean && hexo g && hexo d 上传到github

• hexo new page "tags" 新建标签

• hexo new test 新建一篇博客，名字叫test.md

三、Hexo优化

（1）hexo域名解析

hexo域名解析，图床搭建，文章聚集

1、准备

1）域名

比如我的hacv.xyz

2）hexo新建CNAME

在blog\source文件夹下新建文件CNAME（在此新建文件，可以保证hexo d的时候不会删除掉），文本打开编辑，添加个人购买的域名，例如hacv.xyz

还需要继续整理完

（2）个人Markdown图片腾讯云做图床

参考博客https://www.cnblogs.com/asheng2016/p/9572128.html

此外，为了便于后续扩展，以后博客中插入图片前，要讲图片编号附上

比如图片2020_06_12_Flexible Array_01.gif

便于后续可能的迁移

以后上传博客图床就去腾讯云了https://cloud.tencent.com/

用法和百度网盘用法似的，蛮好的

（3）hexo 博客发布时间调整和文章聚集

本hexo中，文章发布的时间可以修改

title: Hexo优化
date: 2020-06-29 21:03:09
//本来这是07-01的文章，但是修改前面的日期可以调整文章摆放文章，使文章集中化。

categories:
- 随笔
tags:
- hexo

自行应用page写博客比CSDN写就更加注重自己的文章的聚集方式了。

（4）百度URL提交

百度站长传送门：https://ziyuan.baidu.com

我采用的HTML认证。

找到“layout.ejs’”或者“layout.png”这样名称为layout的文件,打开将复制的内容黏贴进去保存。

三、Github仓库打造网页群

github单个仓库打造网页群,Repository_Pages仓库pages的使用

（1）Github pages的两种类型

Project Pages（Repository Pages）

比如https://hacv.github.io/Test/

User Pages

https://hacv.github.io

本想使用github任何一个仓库，打造一个网站群

但是，后面发现，我将本地的.md编译为html静态网站之后

无论用git还是hexo发布当仓库中去（注意，我特别没有使用.io的，毕竟那个每个github只能一个）

而我想要的是，能够用来专门表现任何单个仓库的网页

Github Pages的限制

Github Pages只是静态网站(HTML, CSS, JavaScript)

没有服务端，所以不支持服务端的语言(没有ruby, php, python)

三种静态站点生产机器

• Jekyll、Hugo、Hexo 是简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。
• Jekyll、Hugo、Hexo 也可以运行在 码云（Gitee.com） Pages 上，也就是说，你可以使用码云的服务来搭建你的仓库页面、博客或者网站，而且是完全免费

四、hexo部署我的第2个网站

（1）电脑已有环境（重要）

• Node.js配置，hexo配置，npm配置
  
  等，参见https://www.bilibili.com/video/BV1cW411A7Jx
• 已经有一个部署到https://hacv.github.io的网站
  
  注意：每个Github账户都可以开一个自己的静态网站（域名为 username.github.io）

（2）部署新的网站到github其他仓库

使用 域名如下：

https://hacv.github.io/Test/

（3）操作（难点）

难点：解决github的层叠样式表（CSS）的那个加载不出的两种方法

解决方案参考的链接：https://segmentfault.com/q/1010000002924963

• 1）买域名。

• Hacv.xyz解析,去单个仓库中，改setting为这个，解析能成功
  
  缺点：那我要是想要为多个仓库分别展示，岂不是要买很多域名，不经济
• 此外，绑定这些，还可以用CNAME等解决，(这个方法，我以前是用来解析hacv.xyz的，后来发现，直接改setting比这个快多了。)但是，那个不够直观，我就不用了

• 2）利用在项目设置CNAME可以解决
• 在CNAME中，写上我的那个仓库https://hacv.github.io/Test/

• 然后，我把这个提交到我的那个文档中去，就好了

• 3）似乎改某些源代码可以，但我不主攻前端。

Tips：有的hexo主题，不能这么弄，就算是hacv.xyz也解析不出的，那种是由于生成的静态文件等，比如：skapp主题，你还需要按照它的装一些其他的才行。

但是这主题是可以的：shoka（但是很卡）

详细操作：

一、本地部署

1）先创建一个文件夹，然后cd到那里，由于已经装好Hexo了，也就是我以前进行了npm install -g hexo-cli

2）hexo init Test这样就会按照我设置的博客名进行配置了（初始化）

这样会在你当前文件夹下创建一个文件夹，名字为Test，这个文件夹里面有hexo给你下载的最开始默认的版本

在themes中，很显然有默认的Next主题（我们到时候去hexo官网下载其他主题，其实就是为了修改这个文件夹的）

3）安装依赖（此处可以暂时不弄）

cd 进入Test

然后npm install

常见依赖

$git clone git@github.com:yscoder/hexo-theme-indigo.git themes/inidgo
$npm install hexo-renderer-less --save   #安装less,作为css的预处理工具
$npm install hexo-generator-feed --save #安装rss的feed生成工具
$npm install hexo-generator-json-content --save #用于生成静态站点数据，用于站内搜索的数据源
$npm install hexo-helper-qrcode --save #用于生成微信分享二维码

4）本地运行测试

hexo g

hexo s -p 3333

至此，本地原始博客测试完毕

可以在本地localhost:3333中看到我们的网站

二、修改主题

可以参考本文的，修改部分

https://www.jianshu.com/p/ef07bdcde72e

PS：

1）他使用的git clone下载

笔者喜欢自己找hexo官网，选择自己喜欢的，然后去对应的github仓库，自己下载那个zip

然后解压，放进主题文件夹中

2）注意事项，我的这种解压后文件夹名字叫

hexo-theme-diaspora-master

我需要手工将其他的去掉，只剩下diaspora，否则会出错

3）一定要修改Test文件夹（注意，不是主题文件夹）中的_config.yml

将theme: next改为你刚刚下载的，重命名好的文件夹的名字

比如theme: diaspora

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: shoka

修改完之后，你就可以hexo clean && hexo g && hexo s -p 5555

看最新的主题了。

注意，这个时候，原先的next主题那个文件夹，其实是可以删了。

三、上传到github部署

• 0）很重要的一部分：部署上去之前，还需要配置Test文件夹（注意：不是主题文件夹）中_config.yml（deploy，是部署的意思）

deploy:
  type: git   #这个是指定，我hexo上传是借助的hexo和git
  repo: https://github.com/HACV/Test.git  #这个是指定你需要上传的仓库的位置（比如，我的HACVgithub下，我创建的Test仓库）
  branch: master   #这个表示，你将这个上传到你的Test仓库的

• 2)在Test文件夹下创建一个没有后缀的CNAME
  
  在这个里面写上，那个文件中写上，到时候你的仓库中设置的setting中的域名
  
  比如https://hacv.github.io/Test/
• 3）在你要上传的
• 1）Hexo g hexo generate， 也可以用缩写hexo g生成静态页面//在本地生成静态文件,毕竟hexo是静态站点生产机器，而且，网站是需要生产的HTML才能展示的，所以我们的github上没有.md那些是可以的，但是这个也告诉我们，需要对自己写的.md进行备份
• 2）Hexo d和hexo deploy是一样的，根据_config中的deploy区域，进行上传

• 上传到github
• （在进行，hexo d之前，记得安装hexo deploy插件,记得先在这个文件夹npm install --save hexo-deployer-git）

• 虽然，我以前装github.io的时候，也有弄过这个，但是似乎，这个是每个文件夹
  
  都要这样，才能面向这个文件夹进行这些事情。
• 3）记得去

（4）其他网站

hexo官方文档，讲解得很清晰了

https://hexo.io/zh-cn/docs/configuration.html

hexo部署到国内的gitee

https://www.cnblogs.com/zhengqing/p/11150687.html

我的第一个博客配置和这个视频的差不多

https://www.bilibili.com/video/BV1cW411A7Jx?p=1

（5）比如可以这么设置

• （唯一user Pages）博客网站——本网站
• （Github Pages）Coding网站——PAT，Leetcode，CSP
• （Github Pages）计算材料学网站

五、hexo安装插件

• 原理：借助装完nodejs之后有的npm工具

（1）安装emoji插件

npm install hexo-filter-github-emojis --save

Add configuration of _config.yml file in Hexo root folder as follows：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

然后就可以

:smile::smile::smile: