我的Hexo博客建成经历

hexo，jekyll，hugo是主流的博客搭建平台。

我为了写题解，特意花了几天捣鼓这个博客。

一开始想用CSDN和博客园，但是他们需要手机号让我感到十分不爽。

我感到深深的局限性，尤其是博客园最近还在审查博客，闭园重整，

这使我意识到我似乎并没有我的博客的最高管理权。

后来接触了github，还有github page，于是我开始了博客搭建之旅。

一开始用的是jekyll，因为hexo需要下载nodejs才能做到部署，

而github有jekyll的处理器，所以……。

但是后来我想写一些别人看不到的笔记，于是将目光转向了hexo，

况且还有Travis-CI与Github Action实现自动部署，唯一的心结解开了。

我用的是时尚大方的Next主题，而hexo-next的暗黑模式更深得我心。

在选择部署平台时，我用过github，gitlab，gitee，coding这些平台，利弊我会在文末讲。

后来又在网上漫长的浏览，一篇文章Hexo 博客终极玩法：云端写作，自动部署让我感受到了大气与简约，于是向这里迈进。

他用的是语雀。虽然语雀的Markdown编辑器好看简洁，但他无法处理Front-Matter，

可我是要私密的笔记，有密码的！于是这项计划破产了。继续回到万能的互联网，我才回想起，

为什么腾讯云的代码编辑器那么像VsCode，于是我回到了CloudStudio，

应该是因为以IP为名字创建的代码空间，所以无法通过别的设备进行访问。

这根本就是一台掌上电脑啊！出门旅游再也不怕把文章鸽了。

偶然打开coding，发现它也有CloudStudio，开心的一匹。它是以用户名来存的，访问效果更好。

每天还有4小时访问时间，内存对一般博客来说是绝对够的。

感慨万千，于是写下了这篇文章。

长话短说，我现在用的是Coding Cloud Studio+github搭建的完美博客

不说配置直接肝都是废话；我用的是windows 10.0

搭建博客请在本地搭建，防止用完4个钟CloudStudio无法操作

本篇文章分为几部分，请从左边的目录中点开你需要的，节省时间。请小白一步一步慢慢来！

Hexo博客搭建（小白）

  1. 新建文件夹，举个例子(我的是~/hexo)

    image-20210803152151689

    1. 打开NodeJS官网，下载并安装长期支持版。

    image-20210803152601316

  2. 打开Git官网或者Git淘宝镜像 下载对应版本。

  3. 检查一下版本

    image-20210803153344820

    在cmd命令提示符中输入以下命令

    1
    2
    3
    node -v
    npm -v
    git --version

  4. 回到一开始的hexo根目录(~\hexo)，右键git bash依序执行以下命令

    1
    2
    3
    4
    npm i hexo-cli -g
    npm install
    npm i hexo-deployer-git --save
    hexo init

    hexo init命令会有点慢，因为是从半墙的github上克隆下来的模板

    非大陆读者无视这点。

  5. 依序输入以下命令可以查看博客效果。

    1
    2
    3
    hexo cl // 清除缓存
    hexo g // 生成静态网站文件
    hexo s // 创建虚拟站点

    命令框会给你一段网址localhost:4000（大部分是这样）。如果说出现了错误，可以上网搜索复制下来的错误信息，要相信互联网是万能的，总会有神犇出现。效果是酱紫的。关掉的话按Ctrl+C就好辣！

    image-20210803194213751

  6. 你已经学会了最最最普通最朴素的hexo博客搭建！现在讲讲怎么部署，让别人通过网址找到你的网站。

    首先打开GitHub，注册一个github账号，用邮箱就好辣。太简单不阐述。之后的步骤用图说话

    image-20210803195434751

    image-20210803195700901

    image-20210803200424384

    image-20210803201710008

    打开~\hexo\config.yml（你的博客根目录的config文件），到最后一行找到deploy

    原来是这样子的

    1
    2
    deploy:
      type: ''

    改成这样子

    1
    2
    3
    4
    deploy:
      type: 'git'
      repo: https://github.com/phantomfrost/phantomfrost.github.io.git # 你上一步复制的东西
      branch: master # 你的分支

    然后回到~/hexo，右键git bash输入命令

    1
    npm i hexo-deployer-git --save

    之后如果要部署的话依序四步走（默认已经打开了~/hexo的git bash）

    1
    2
    3
    4
    hexo cl
    hexo g
    hexo s
    hexo d

    git会向你询问密码，输入就好。如果不想输密码的话，可以使用SSH（左边的目录有讲）。

    如果你是第一次hexo d的话，打开GitHub->username.github.io->settings->pages。

    image-20210803202557474

    把branch修改为你记住的分支，Save，就可以通过https://username.github.io访问啦！

    如果访问不了，是因为国内DNS污染严重，更改你的DNS地址为114.114.114.114，备用为114.114.114.115就好辣！

    完结撒花！

使用SSH连接github

虽然说我不知道SSH是什么东西，但是我知道它是一个无需密码即可连接到github的好东西（只要是git系列都是可以哒）。那怎么配置呢？随便找个位置打开git bash，依序输入以下命令：

1
2
3
4
ssh-keygen -t rsa -C 'youremail@??.com' //github的注册邮箱
//不断enter
cat ~/.ssh/id_rsa.pub
//复制出现的东西

前往Add new SSH keys (github.com)，

image-20210803212723183

回到GitHub->username.github.io（仓库名）

image-20210803213334930

这样子的话~/hexo/config.yml就要改改辣

原来的是酱紫

1
2
3
4
deploy:
  type: 'git'
  repo: ......
  branch: ......

改成酱紫

1
2
3
4
deploy:
  type: 'git'
  repo: git@github.com:phantomfrost/phantomfrost.github.io.git # 你上一步复制的东西
  branch: master # 你的分支

完成(*^▽^*)！

主题配置

我用的是Next主题，打开链接，它有不同语言的教程，按照他说的即可。

主题深化配置

打开~/hexo/themes/next/config.yml，它的每一个参数前都有注释，建议左边文件，右边翻译器，分屏食用更香。

博客超深化配置

  • 点击特效

  • 本地搜索（Local Search）
    安装插件hexo-generator-searchdb,执行以下命令:

    1
    npm install hexo-generator-searchdb --save

    修改~/hexo/_config.yml站点配置文件，新增以下内容到任意位置：

    1
    2
    3
    4
    5
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

    编辑~/hexo/themes/next/_config.yml主题配置文件，启用本地搜索功能：

    1
    2
    local_search:
      enable: true

  • 雪花动态效果背景