技术存在的终级意义,是为了解决问题。

Hexo博客搭建及配置

概述

本文即描述本博客搭建的过程,个人倾向比较明显。

本博客的环境大致是:良心云VPS + Centos7 + Nginx + Hexo + https + Cloudflare CDN(国内会有点慢但是问题也不大)

最初选择 hexo 我是做了一定的调查的。

因为博客这个东西只是一个工具,我并不想在一个工具上耗费太多精力,对于一个工具来说,用到它的时候打开就可以用才是最好的,这也是我工作和日常生活中的一贯理念。所以选择成熟的工具是一个很不错的决定,这正是 hexo 的优点。并且由于 hexo admin 的存在,我不需要自己再去另开一个 md 编辑器,这对使用体验来说是一个极大的提高。

我不太喜欢 github page,因为访问真的不太稳定,所以这篇文章是基于 vps 的,博客网站前面是 nginx,而 hexo 只是用来生成静态页面。这也是正规网站的逻辑思路,即:编辑–网站后台–生成静态页面–前端 web 服务–用户浏览器。

好了,下面是开始搭建的过程。

准备

首先是准备一台 vps ,我最熟悉也最喜欢的环境是 Centos7,所以下面的运行环境都是以此为基准,不同的 linux 系统会有一些差距,这里不细说。

然后需要提前配置好域名解析,比如把 blog.your-domain.com 作为你的博客域名解析到VPS的公网IP上。

初始化服务器暂且不提,这个我会另开一篇来详细记录我是怎么初始化服务器的,那应该是自动化的前置篇。

剩下的准备工作应该包括:Git、Node.js、hexo、Nginx、SSL 证书配置(证书相关另开一篇,本篇中证书默认已经存放在本地)。

现默认拥有环境的 root 权限(即不再使用 sudo 命令,有需要请自行添加,当然如果为了安全考虑,最佳的方式还是使用普通用户),下面将在此基础上依次说明安装过程。

安装Git

系统自带的包管理器是可以直接安装 git 的,但是这种方式安装的 git 版本比较低,虽然不影响 hexo 的安装,但是难免以后可能碰到其他的坑。为了尽可能的一劳永逸,这里还是选择下载源码包编译安装最新的 git。

这里引用了 git 社区的说明文档,详细的信息点前面链接查看。

首先安装依赖:

# yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel

然后为了能够添加更多格式的文档(如 doc, html, info),需要安装以下的依赖包:

# yum install asciidoc xmlto docbook2x

当你安装好所有的必要依赖,你可以继续从几个地方来取得最新发布版本的 tar 包。 你可以从 Kernel.org 网站获取,网址为 https://www.kernel.org/pub/software/scm/git ,或从 GitHub 网站上的镜像来获得,网址为 https://github.com/git/git/releases 。 通常在 GitHub 上的是最新版本,但 kernel.org 上包含有文件下载签名,如果你想验证下载正确性的话会用到。

接着,编译并安装:

# tar -zxf git-2.0.0.tar.gz
# cd git-2.0.0
# make configure
# ./configure --prefix=/usr
# make all doc info
# make install install-doc install-html install-info

安装完成之后,即可查看 git 版本:

# git -v

输出正确的版本号就代表安装成功了。

安装Node.js

安装 Node.js,首先下载安装包 https://nodejs.org/en/download/

官网下载的是已经编译好的安装包,直接解压到指定位置即可运行:

# yum -y install wget
# wget https://nodejs.org/dist/v10.9.0/node-v10.16.3-linux-x64.tar.xz
# tar xf  node-v10.9.0-linux-x64.tar.xz
# cd node-v10.9.0-linux-x64/
# ./bin/node -v
v10.16.3

但是为了使用方便和后期维护,我们还需要为可执行文件建立软连接:

# ln -s /data/node/bin/npm /usr/local/bin/
# ln -s /data/node/bin/node /usr/local/bin/
# node -v
v10.16.3

安装Hexo

直接执行命令即可:

# npm install -g hexo-cli

安装后要初始化博客的存放路径,目录下包括以后博客的配置文件、md 文件以及生成的静态 html 页面:

# hexo init <blog-folder>
# cd <blog-folder>
# npm install
// <blog-folder> 为上面所说的路径,需自行指定。

启动服务器测试安装效果:

# hexo s

然后浏览器访问地址 http://服务器ip:4000/ 就能看到博客页面。当然了,VPS 要在防火墙上开启 4000 端口才能在外面访问到这个页面。

好了,测试成功之后就按 Ctrl+c 结束服务吧,我们接下来是要使用更加稳定性能也更好的 Nginx 来作为 Web 前端。

安装并配置Nginx

毕竟是运维,在我看来 Nginx 安装实在太过简单熟悉,并且网上教程也确实太多了,所以在此就不细说,只是大概提一下操作步骤。

如果服务器后期有特殊用途的话,可以考虑源码编译安装,这样自主性大一些。

如果没特别要求,那么直接用 yum 源安装就可以。yum 安装的话则要先添加 epel 源,然后直接 yum install nginx 就可以了。

安装完成后,我们需要修改一下它的配置文件。

# vim /etc/nginx/nginx.conf

在这里应该能看到如下的配置行:

include /etc/nginx/conf.d/*.conf;

如果没有的话可以加上,这一行的意思是 nginx 会同时读取上面路径下的 *.conf 文件作为配置文件的一部分。然后我们可以到这个目录下新建一个 blog.conf 文件来作为我们的博客配置文件:

# mkdir /etc/nginx/conf.d/
//如果上面所说的配置行是新添加的,则需要建立相应的 conf.d 目录。

# vim /etc/nginx/conf.d/blog.conf

下面是 blog.conf 文件的最终版内容,如果测试的话建议先越过此段配置,按照下方初始的简单配置文件先行测试。

server { #使 80 跳转到 443 端口,达到全站 https 的效果
    listen  80;
    server_name           blog.your-domain.com; #这里修改为你自己的域名
    return 301            https://blog.your-domain.com$request_uri;
}

server {
    listen                443 ssl http2;
    ssl                   on;
    ssl_certificate       /data/nginx/pem/fullchain.pem;
    ssl_certificate_key   /data/nginx/pem/privkey.pem;
    #上面两条是证书的key文件在服务器本地存放的地址
    ssl_protocols         TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers           HIGH:!aNULL:!MD5;
    server_name           blog.your-domain.com;

    root                  <blog-folder>/public; #按照上面设置的 <blog-folder> 来调整
    #这里是一个坑,在很多教程以及我在测试机上都是指向博客的跟目录 <blog-folder> 的
    #但是这种设置在实际部署的时候提示 403 错误
    #经过我测试发现可能是 Nginx 找不到博客的 index.html 文件
    #所以直接指向静态文件所在的 public 目录是解决办法
    index                 index.html;

    location /images { #为以后博客添加图片新建一个目录,相应的 images 目录需要创建一下
        root              <blog-folder>/images;
       }
     #这里有变动,具体请看本文最后博客配置的第二小节

    location /admin { #关于 hexo-admin 模块的相关配置,未安装或未开启模块也不影响服务运行,具体看本文最后博客配置的第一小节
        proxy_redirect    off;
        proxy_pass        http://127.0.0.1:4000;
        proxy_http_version 1.1;
        proxy_set_header  Upgrade $http_upgrade;
        proxy_set_header  Connection "upgrade";
        proxy_set_header  Host $http_host;
        proxy_set_header  X-Real-IP $remote_addr;
        proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    error_page  404 403 500 502 503 504  /404.html;
    location = /404.html { #配置自定义错误页面
        root              /data/www/error_page;
    }

}

就像上面所说,这个最终的成熟配置在现在并不能直接生效,因为里面还涉及了诸如 SSL 证书、自定义错误页面、自定义图片路径等配置,并不适合在初期排错阶段直接使用。所以可以在测试部署的阶段先使用如下简单的配置:

server {
      listen                80;
      server_name           blog.your-domain.com; #这里修改为你自己的域名
      root                  <blog-folder>/public; #按照上面设置的 <blog-folder> 来调整
      index                 index.html;
  }  

好了,到此为止 Nginx 的配置算是告一段落,如果上面步骤没有错误的话,我们重启 Nginx 之后应该就可以看到博客的页面了。那么我们重启 Nginx:

# systemctl restart nginx

访问地址:

http://blog.your-domain.com

这样一个博客就初步搭建完毕了。

Hexo 博客配置

本来我是想仔细写一下关于配置的过程的,但是后来想了想发现,我也就是下载了个 next 主题,然后调了一下主题里面自带的配置文件而已。

总的来说还是没什么创新,中间也没什么坑,所以也就不打算详细写,只提两点网上没看到过的吧。

Nginx 配合 Hexo Admin 的具体实施

Hexo Admin 的安装就不说了,我当时在这里遇到的问题在于 是否能通过域名直接访问 Hexo Admin ?

刚部署完毕之后,是只能通过 IP:4000 来访问 Hexo Admin 的。Hexo Admin 本身就是一个很好的 MD 编辑平台,它可以让我们直接编辑同时看到输出效果,并不需要在其他编辑器上面写好之后再拿过来发布。

但是这样一来每次编辑文章都需要输入 IP + 端口,就显得非常繁琐。

考虑到这一点,我使用 Nginx 做反向代理,把 4000 端口映射到了 /admin 目录,这样一来只要开启了 hexo s 就等于开启了后台,然后就可以通过连接 https://blog.your-domain.com/admin 来直接进入 Hexo Admin 后台。

如果考虑使用便利程度,可以把 hexo s 添加到守护进程或者后台运行,这样只要访问上面的连接就能随时随地编辑博客。当然我认为你不会这么做的,这样做代表任何人都能编辑你的博客…不过,想到这里,我感觉可以给这个页面加一个加密访问,这应该能算是一个不错的想法。

为安全考虑的话,则可以每次远程到服务器上运行 hexo s ,然后去后台编辑文章,结束之后直接 Ctrl+c 就可以了,非常简单易用。哪怕你手头的电脑没有 ssh 客户端,那也可以使用手机 ssh 到服务器上,然后回到电脑用网页来编辑,听起来就很 Geek(当然可能也有点傻)。

写到这里我突然发现还有一个问题:选择第二种方式的话,代表在我编辑文章的同时,博客后台也是对外可以访问到的。

对于初期的个人小站来说,这种时间差上的漏洞问题并不大。但是这也确实是一个非常大的破绽,所以我决定还是采取第一种方式,给链接添加加密认证。

解决修改图标(favicon.ico)后不生效的问题

因为我的配置和网上存在区别,导致这一步的时候遇到个问题网上从没人提到过,我也废了好半天才找到原因。

如果是按照我上面的 Nginx 配置文件来的,那么就会遇到这个问题。其原因在于 /images 部分和主题的配置文件冲突了。

简单的办法就是把 Nginx 里面的部分注释掉,但这样就不能做到我之前设想的把图片单独存放了,这对于一个强迫症患者来说是不能忍受的(并且我也没打算放太多图片,也不打算使用第三方图床,因为我的服务器是不限流量的,所以就直接放本地了)。

所以这里我最终的选择是:

  • 把上面 Nginx 中的 images 部分删除或注释
  • 在服务器上配置一个新域名,如 images.your-domain.com,然后把所有图片都放在此网站路径下
  • 配置文件中使用超链接的形式直接调用 https://images.your-domain.com 下的图片

这样就能做到二者兼顾。

打赏猫粮!!!