Mar 11, 2021

Hexo博客建站历程

YochaLyc

Hexo

BlogTech

222 Words … ⏲ Reading Time: 1 Minute

2021-03-11 23:48 +0800

这个博客使用Hexo框架搭建，部署在VPS上并使用Nginx作为代理服务器。博客本身从开始折腾到顺利在服务器上跑起来并没有花多少时间，只是由于本人前端小白又试图魔改主题导致到现在才写下第一篇博客。相关的每个步骤其实网上都有详尽的指导，以这篇作为实际意义上的第一篇博客一是对搭建过程进行整理方便后人，二是给自己打个气希望能由此习惯记录博客。

准备工作

由于其他的考虑，这个博客使用 独立域名 + VPS + 个人电脑 进行搭建及部署。以下是个人对于相关平台的选择：

工具 选择平台
VPS DigitalOcean
域名 namecheap
域名解析 DNSPOD
个人电脑 Mac

VPS

服务器的选择并没有经过特别多的纠结，国内平台购买的服务器需要进行备案，看了些知乎的评价及以前就开始关注的博主的介绍就决定在 DigitalOcean 进行购买。进入网站后进行简单的注册，注册后可以进行支付方式的绑定，需要预付5刀(可作为后续购买droplet使用)，同时获得100刀的限时Promo Credit。Alt text
至此注册的步骤就结束了，在开始创建项目及服务器之前，可以考虑先将个人电脑的ssh公钥进行录入方便后续操作(也可以在创建服务器后手动添加)Alt text
接下来创建项目后就可以进行服务器的配置和创建。DigitalOcean把其上的每个虚拟机称为Droplet，点击Create Droplets可以根据个人需要进行配置及创建Droplet，值得注意的是region的需要根据个人情况进行选择，可以在 DigitalOcean官方提供的测速网站 选择速度较快的地区服务器，博主这里选择的节点是SF3。

域名购买 & 域名解析

域名的购买我选择的是Namecheap，Namecheap提提供免费的域名解析服务，听说国内Dnspod的解析速度不错因此域名解析我另外在这个平台上进行尝试(同样也是免费的)。
域名解析根据Dnspod官方文档操作，记录添加完成后需要到Namespace上将Nameservers配置成Dnspod指定的dns服务器。

搭建

本地安装安装Hexo

Hexo官方文档

通过git远程远程部署Hexo到服务器

服务器操作

  1. 服务器用户添加sudo权限

  2. 服务器添加本地ssh公钥(如果在1.1中已经配置了ssh可以跳过这部)

  3. 在指定目录下建立部署文件夹,同时也是之后Nginx配置的root路径，这里假设为blog_www

  4. 设置裸仓库权限及及编辑hook文件

cd /home/admin
mkdir blog_receiver.git
 // 建立git裸仓库并设置文件夹权限，将$USER替换为你自己的用户
git init --bare blog_receiver.git && chown -R $USER:$USER blog_receiver.git  // 设置文件夹权限
cd /home/admin/blog_receiver.git/hooks //假设/home/admin/blog_receiver.git为建立的裸仓库
touch post-receiver


打开post-receiver并输入如下内容

```sh
#!/bin/sh
git --work-tree=/home/admin/blog_www --git-dir=/home/admin/blog_receiver.git checkout -f

编辑Nginx配置文件，在server中添加如下信息。（注意，DigitalOcean的服务器可能默认对location / 进行了配置，需要将其删除）

location / {
    root /home/yocha/blog_www;  index index.html index.htm;
}

本地电脑操作

  1. 在本地Hexo项目_config.yml中添加
deploy:
  type: git
  repo: $USER@$host:/home/admin/blog_receiver.git //$USER替换为上文提到的用户，$host替换为你的服务器host或ip
  branch: master

之后便可以通过 hexo hexo generate && hexo deploy 命令远程部署到服务器了

完善

主题更换及插件配置

通常Hexo主题都附带有主题安装及支持插件配置教程，我这里就不再赘述，推荐几个个人较喜欢的主题：

  1. Next：支持三种内置风格切换，人气颇高的主题
  2. maupassant: 本博客最开始使用的主题，风格简约，有不少主题是基于这个进行改造的
  3. Cactos: 很可爱的一个主题，简约又实用 …排名前10的Hexo主题

Disqus评论插件base版本去除广告

Disqus是本博客依赖的评论工具，支持多种方式登录评论及自定义评论头像等功能。缺点是免费版本评论框上线会带有大篇幅的广告栏，从 这篇文章 中得到启发，将对应代码复制到Disqus对应的代码片段中可以去除广告。以我最开始使用的maupassant主题为例，在下面代码中插入相关函数:

if theme.disqus.enable == true
  link(rel='stylesheet', type='text/css', href='https://cdn.jsdelivr.net/gh/sukkaw/disqusjs/dist/disqusjs.css?v=' + theme.version)
  script(type='text/javascript' src='https://cdn.jsdelivr.net/gh/sukkaw/disqusjs/dist/disqus.js?v=' + theme.version)
  script(type='text/javascript' id='disqus-count-script').
      $(function() {
           ...
           xhr.ontimeout = function () { xhr.abort(); };
           xhr.send(null);
    // 插入如下函数
    // begin
           setInterval(() => {
            $.each($('iframe'), (arr,x) => {
                let src = $(x).attr('src');
                if (src && src.match(/(ads-iframe)|(disqusads)/gi)) {
                    $(x).remove();
                }
            });
         }, 300);
    // end
         });
        ...

设置需要的目录以下是添加各类分类的方法，按需配置

  1. 添加各类标签
  2. 可以拿来寻找图标的网站

修改模板

在Hexo项目根目录scaffolds下可以配置各类文件的模板，为方便后续写作建议在这里先将模板配置好，配置参数可参考 官方文档。这里给出博主的作为参考：

---
title: { { title } }
date: { { date } }
tags:
  -
categories:
  - []
comments: true //允许评论
layout: post //布局类型
toc: true // 显示目录
---

设置博客图标

设置网站图标及未生效解法

支持HTTPS

免费设置网站支持https 之前不同系统可以通过certbot_auto统一安装，目前不支持。不过到上面这个网站也提供傻瓜式操作指引。

总结

本篇博客是对博主自己搭建博客的过程以及过程中参考的各类文档进行简单的梳理，基本没有什么创造性的输出。希望至少能给有需要的朋友带来些许遍历。

参考资料

  1. Hexo官方文档
  2. ssh远程登录服务器
  3. Dnspod官方文档
  4. Disqus去除广告方法
  5. 知乎:DigitalOcean选择Region问题
  6. 一个博主的maupassant魔改:评论、进度条、烟花效果
  7. 设置网站图标及未生效解法

…对于其他博主忘了记录但对博主搭建博客起到重要作用的文章表示歉意及衷心感谢