Vincent's Notes
0%

Mac上搭建基于Github的Hexo博客

发表于 更新于 分类于 阅读次数： Valine：

安装环境

  • Ndoe.js: 在官网下载，直接安装即可。
  • Hexo: 按照官网的指令npm install hexo-cli -g安装即可。

初始化博客环境

可以在Mac上新建一个博客文件夹blog，用于存放之后的博客。然后终端cd到该目录：

  • 初始化博客：Hexo init
  • 安装npm：npm install
  • 本地启动Hexo：hexo s，在浏览器中打开本地网页即可看到效果。

关联Github

创建仓库

登录Github帐号，新建仓库，名为用户名.github.io固定写法。创建完成之后，需要修改博客文件夹下的配置文件，打开_config.yml文件，修改deploy部分为如下：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/Teckee/Teckee.github.io.git
  branch: master

注意type，repository，branch需要有一个空格。

写博客

  • 创建新博客， hexo new “blog”， blog为博客名称，可以任意改动
  • 保存更改，hexo g
  • 提交到Github，hexo d

一般修改提交之前需要hexo clean清除之前生成的文件，所以提交的流程一般为hexo clean && hexo g && hexo d，可以利用使用alias简化该指令。

上传ssh key

由于没有上传ssh key到Github，每次提交的时候都需要输密码，比较繁琐。

  • 如果之前有生成过ssh密码，可以直接复制.ssh目录下的public key的内容到Github，直接在Github上的Settings页面添加即可。
  • 如果没有没有ssh密码，利用ssh生成即可，注意生成ssh key时的email需要是注册Github的email地址。

个性化Theme

这里以Next主题为例，来进行说明。

进入到博客目录下的theme目录，clone该主题的文件。然后回到blog目录中，修改_config.yml中的theme名称为next。

访问量统计

站点访问量统计

找到你所用主题的_config.yml文件，enable不蒜子访问量统计功能。注意最下面的post_views会和valine的文章统计冲突，可以disable。

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: false
  post_views_icon: fa fa-eye

开启后在博客的页脚处就可以看到站点访问量。

文章访问量统计（基于valine）

首先按照如下的方式申请好LeanCloud的id和key：

在LeanCloud中注册完成后，创建新应用，点击应用进入后。创建名称为Counter的class。接着在页面中找到你的app_id和app_key。

然后在config yaml中开启valine并填入上面申请的id和key即可。对于阅读统计可以直接enable valine里面的阅读统计即可。

配置评论

2022更新，推荐valine评论，参考git的readme即可，https://github.com/next-theme/hexo-next-valine

catagories和tags

在主题对应的_config.yml开启category和tags，然后使用command分别生成category和tags。

1
2
hexo new page categories
hexo new page tags

将category和tags分别修改为如下：

1
2
3
4
5
---
title: categories
date: 2022-12-17 11:15:14
type: "categories"
---
1
2
3
4
5
---
title: categories
date: 2022-12-17 11:15:14
type: "tags"
---

Sina图床防盗链问题

可以参考这里设置refer，但是会导致一些统计信息失效。https://www.playpi.org/2019042701.html

建议迁移到阿里oss，现在sina已经限制refer必须为weibo.com.

其他配置

参考：https://tding.top/archives/42c38b10.html

vercel提升访问速度

由于Github在国内的访问速度不稳定，可以采用vercel来host github pages提升国内访问速度。https://zhuanlan.zhihu.com/p/347990778

Hexo升级

1
2
3
4
5
6
7
8
//以下命令分别执行即可
npm install -g npm-check     //安装npm-check
npm-check                    //查看系统插件是否需要升级
npm install -g npm-upgrade   //安装npm-upgrade
npm-upgrade        //更新package.json
//在执行npm-upgrade命令后会要求输入yes或者no，直接输入Yes或Y即可
npm update -g      //更新全局插件
npm update --save  //更新系统插件

换Blog目录或者换电脑后如何同步blog

  1. 安装好nodejs和hexo的环境，具体可以参考上面的步骤。
  2. 初始化hexo blog的环境，新建目录，比如hexo-blog，接着在该目录里面执行如下步骤：
  • 初始化博客：Hexo init
  • 安装npm：npm install
  • 本地启动Hexo：hexo s，在浏览器中打开本地网页即可看到效果。
  1. 确定没问题后，就可以hexo g && hexo d来上传到git了。

参考链接：