服务器上的Hexo博客

MyBlog 3.0

这应该是 我的博客3.0 版本了。不过看起来应该和 2.0 版本一样。毕竟主题没有变化。但为什么要说它是 3.0 呢?

2.0 版本中,我使用 Visual Studio + DevAzure + Github Pages 来构成我的整个博客管理体系。

也就是使用 Visual Studio 写文章,传到 DevAzure 上存储。服务器搭建Hexo博客,git 获取 DevAzure 上的文章,通过 Hexo 的配置文件将生成的静态文件发布到 Github Pages 。最后在 Github Pages 上重定向到我的域名。

What the F**K !

还能再墨迹点吗?

所以!这次 3.0 版本,没有 DevAzure,没有 Github Pages,Visual Studio 继续用或者换成记事本也没问题,直接使用 git + nagix + hexo 解决所有问题!

Come on !

搭建流程

运行环境

  • 阿里云服务器
    • Ubuntu 18.04
  • 本地主机
    • Win10 专业版 1903

安装 Hexo

在服务器上安装 Hexo 首先需要两个前提:Node.js 和 Git。

在Ubuntu环境下安装 Git 使用命令:

1
2
3
4
apt-get install git

#老版本
apt-get install git-core

安装 Node.js 时,先使用命令安装 nvm:

1
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

重启服务器之后,使用 nvm 安装 Node.js:

1
nvm install stable

此时,环境准备结束,使用 Hexo 官网提供的命令安装 Hexo:

1
npm install -g hexo-cli

在安装过程中,我们可能会看到两个“警告”。内容大致为 npm 为我们跳过了可选安装选项“fsevents”,这是因为“fsevents”是针对“darwin”系统也就是苹果系统推出的可选插件。所以我们忽略即可。


Hexo 新建项目

在准备工作已经妥当之后,我们终于要开始构造我们的博客了。
在我们想要存放项目的文件夹下使用命令:

1
2
3
hexo init <folder>
cd <folder>
npm install

即可在指定文件夹(即< folder >中)新建项目文件。

期间,我们可能会遇到报错:

npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. 
Please, upgrade to core-js@3 or at least to actual version of core-js@2.

但是就算使用npm全局更新了core-js版本到最新,仍然无法解决此问题。但并不影响项目的正常使用,暂且忽略。

我们此时便可以使用命令:

1
2
hexo g
hexo s

其中hexo g命令可以生成静态文件,hexo s则是开启本地服务。此时,我们便可以本地预览博客了。

但是!博主是在服务器上部署,根本没法本地预览啊!只能等部署好 Nginx 后进行查看了。

在配置其他环境之前,首先我们要知道 Hexo 项目文件夹下面我们要用到什么。

  • _config.yml
    • 项目的配置文件
  • public
    • 项目生成的静态文件就存在这里
  • scaffolds
    • 模版 文件夹。新建文章时,Hexo 会根据 scaffold 来建立文件。
  • source
    • 存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
  • themes
    • 主题文件夹。Hexo 会根据主题来生成静态页面。

Nginx 环境搭建

Nginx是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的Web和反向代理服务器,也是一个IMAP / POP3 / SMTP代理服务器。

我们可以使用以下命令进行安装:

1
2
apt-get update
apt-get install nginx

安装成功之后直接访问 ip 地址即可看到 Nginx 预设的欢迎页。

我们可以使用systemctl管理Nginx服务:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#启动Nginx服务
systemctl start nginx

#停止Nginx服务
systemctl stop nginx

#重新启动Nginx服务
systemctl restart nginx

#配置更改后重新加载Nginx服务
systemctl reload nginx

#Nginx开机自启
systemctl enable nginx

#禁用Nginx开机自启
systemctl disable nginx

而后对我们的 Nginx 进行配置,其配置文件为/etc/nginx/nginx.config

在其中 Http 下添加添加/修改代码:

1
2
3
4
5
6
7
8
9
server {
listen 443; #监听端口
server_name *.com; #自己的域名
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root /root/<folder>/public; #hexo 存放静态文件的目录
index index.html;
}

博主使用阿里云购买的域名,云解析到服务器的ip,在创建的hexo项目下修改_config.yml 文件中 url 下的 url 改为自己的域名。

此时即可使用自己的域名查看博客。

但此时浏览器会警示连接不安全,为了解决此问题,我在阿里云上申请了一年的免费SSL证书。

从阿里云上下载Nginx版本证书,包括一个.crt文件和一个.key文件。将其上传到/etc/nginx/cert文件夹中。

随后修改Nginx配置如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

user root;

http {
server {
listen 443;
server_name *.com;
#charset koi8-r;
#access_log logs/host.access.log main;
ssl on;
ssl_certificate cert/2727627_suspects.cn.pem;
ssl_certificate_key cert/2727627_suspects.cn.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
root /root/<folder>/public;
index index.html;
}
}
}

但到这里还不行,因为如果用户使用的是http协议进行访问,那么默认打开的端口是80端口,所以我们需要做一个重定向,我们在上一个代码块的基础上增加一个server节点提供重定向服务。

1
2
3
4
5
server{
listen 80;
server_name *.com;
rewrite ^/(.*)$ https://*.cn:443/$1 permanent;
}

此时重新加载配置文件并重新启动nginx,即可看到连接变为https,证书有效。

Git 仓库搭建

我想在本地编写文档并上传到服务器上。使用服务器作为存储博客文章的仓库,实现公司、公寓两编写。

所以我们需要添加 git 用户,使用

1
2
git config --global user.name " "
git config --global user.email " "

命令配置 git 用户名和邮件。

使用命令

1
adduser git

新建一个 git 用户。此时,/home文件夹下出现了一个名为 git 的文件夹。

我们在 /home/git 目录下使用命令

1
2
git init --bare blog.git
chown -R git:git blog.git

创建一个名为 blog.git 的仓库,并更改拥有者用户为 git 。

为了防止 git 用户 Shell 登陆。我们打开/etc/passwd文件。将git:x:1001:1001::/home/git:/bin/bash修改为git:x:1001:1001::/home/git:/usr/bin/git-shell

这时我们回到 /home/git 目录下。

进入其中创建 .ssh 文件夹并修改其权限。在 .ssh 文件夹下创建 authorized_keys 文件存储公钥。

1
2
3
4
mkdir .ssh
chmod 755 .ssh
touch .ssh/authorized_keys
chmod 644 .ssh/authorized_keys

在编写文档的机器上,使用 Git Bash Here,通过命令

1
2
3
4
ssh-keygen -t rsa -C " "  #邮箱
#存放位置
#密码
#确认密码

来创建 SSH Keys。

将获得的公钥,即id_rsa.pub 文件中的内容复制到 authorized_keys 文件中。

此时我们就可以使用 git 命令操作这个仓库了。

1
2
3
4
5
6
7
8
9
10
11
12
#清除缓存首次提交
git rm -r --cached .
git add .
git commit -m 'update'
#与远程建立连接
git remote add origin git@ * :/home/git/*.git
#推送到远程origin的master分支上
git push origin master
#克隆仓库
git clone git@ * :/home/git/*.git
#拉取最新分支
git pull

现在有一个新的问题,我们每次 push 和 pull 的时候,都要输入密码,太麻烦了。而且这样也没有办法编写 Shell 脚本自动化处理。所以,我们使用一下命令

1
git config --global credential.helper store

来进行配置。这样在输入一次密码之后,就不用再次输入了。在不考虑安全的情况下,创建 SSH Keys 时直接不设置密码也可以达到此效果。

Hexo 的基础配置与文章发布

上面一堆的环境都搭建好了之后,我们终于可以把目光放回到 Hexo 本身上了。我们接下来就要对自己的博客进行配置了。

Hexo 的基础配置

我们已经知道 _config.yml 文件就是 Hexo 的配置文件。

那么我们根据我们网站的相应内容对其中的 #Site 和 #URL 进行修改。使其符合我们的网站信息。

如修改页面标签 title ,修改网站 url 等等。

而后执行hexo g即可在页面看到网站信息的更改。

文章发布

这个时候,我们发现整个博客只有一个 Hello World 文章。并且存储在 /source/_posts 目录下,我们将文件删除,并将已上传的文章的仓库克隆过来。

首先也要使用 ssh-keygen 命令生成 ssh 公钥,存入 /home/git/.ssh/authorized_keys 中。然后使用

1
git clone git@ * :/home/git/blog.git

命令来克隆仓库。再次hexo g后即可在页面看到自己的文章。

Front-matter

我们的文章是发布好了,但是怎么设定文章的分类标签等等属性呢?

Hexo 的机制便是,在 .md 文件的顶部,会有一个特定的区域用来编写相关属性。格式如下:

1
2
3
4
5
6
7
8
9
---
title: 文章名
date: 日期
tags:
- 标签
- 可以有
- 多个
categories: 归档分类
---

除了上述几个。一些其他的属性如:layout等,也会在其中进行配置。

结语

以上就是在服务器上搭建自己的 Hexo 博客的方法。重点放在了环境的配置上,而没有对 Hexo 的配置进行过多的描述。如果想要查看更多 Hexo 相关内容,请关注后续文章 “Hexo 的个性化定制”。

本篇文章就到这里,我是 Lonely Exile ,一个花里胡哨的程序员,我们下次再见。