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:
😄😄😄

posted @ 2021-01-24 09:17  HACV  阅读(223)  评论(0)  编辑  收藏  举报