个人博客搭建


20220127011404

简介

Hexo是一个博客框架,可以将用户写的Markdown文件渲染成网页HTML
Nginx是一个服务器框架,可以挂载HTML文件,供浏览器访问
而Git是版本控制工具,可以将本地生成的HTML同步到服务器,这样就实现了本地写网页,一键部署到服务器
本文介绍如何使用Hexo博客框架+云服务器Nginx搭建静态博客

准备工作

  • 一台本地电脑
    个人PC,笔记本均可,最好有绿色上网软件
  • 一台云服务器
    各大云服务厂商一直都在做新人活动,一般都蛮便宜的
    我入手的是阿里云的一核2G,带宽1M,个人博客够用
    腾讯云最近有款双核4G,带宽5M的,一年也只要70/(ㄒoㄒ)/~~
  • 已备案的域名
    找域名提供商备案,阿里云备案下来的还是蛮快的

开始搭建

配置本地写博客的电脑

安装Git

Git for Windows: 官网地址
安装完成后在桌面右击就会出现GitBash控制台,代表安装成功
桌面右键菜单

安装Node.js

Node.js: 官网地址
安装完成后我们打开刚刚Git的命令行,右击桌面空白处打开GitBash,输入如下指令查看node和npm的版本

node -v
npm -v

版本提示
返回版本信息就说明安装成功

安装Hexo

换源和配置git代理(可选)

git config —global —unset http.proxy
git config —global —unset https.proxy

配置代理
换源

使用nodejs的npm安装包管理工具安装hexo,指令如下
安装指令

npm install -g hexo-cli

查看是否安装成功

hexo -v

出现版本信息说明安装成功
20220125134917

生成本地网页

两个工具就绪后我们开始生成静态网页:
我们首先创建一个文件夹,用来存放网页数据
20220125134948
在文件夹内右击打开gitbash,输入初始化指令

hexo init my_blog

输入后git会从远程拉取初始化代码下来,拉取后Git显示如下
20220125135028
若长时间无反应,需要删除文件夹,重新初始化
直到没有任何报错和WARN,才可继续
在Git中改变当前目录的位置,进入该文件夹,代码如下

cd codepoet/

使用hexo编译指令

hexo g

然后开启本地端口访问

hexo server

在浏览器输入如下内容,就可以本地访问Hexo生成的网页代码了:

localhost:4000

20220125135142

更换Hexo的主题(第一次建站的话可跳过,稍后再操作)

Matery主题下载地址
将下载的文件解压到hexo目录下的themes中
20220125135249

切换主题

修改 Hexo 根目录下的_config.yml的theme的值:

theme: hexo-theme-matery-master

在hexo目录gitbush运行下列代码

hexo clean # 清除缓存
hexo g # 编译
hexo s # 运行

浏览器再次打开localhost:4000,就可以看到主题已经变了
20220125135618

_config.yml文件的其它修改建议:

  • 请修改_config.yml的url的值为你的网站主URL(如:http://xxx.github.io)
  • 建议修改两个per_page的分页条数值为6的倍数,如:12、18等,这样文章列表在各个屏幕下都能较好的显示。
  • 如果你是中文用户,则建议修改language的值为zh-CN

Matery主题详细设置
https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

配置云服务器

购买云服务器,添加安全组,允许http服务80端口访问
20220125155940
备案域名,并解析到云服务器的ip地址上
20220125160001

安装git和nginx

yum install -y git
yum install -y nginx

配置Nginx

创建文件目录, 用于博客站点文件存放, 并更改目录读写权限

mkdir -p /data/www/hexo
chmod -R 755 /data/www/hexo

添加 index.html 用于检测配置 Nginx 是否成功

vim /data/www/hexo/index.html

我们添加一个index.html页面来验证一下我们的nginx是否配置成功了,内容如下:

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>
    <<h1>hello nginx<h1>
  </body>
</html>

修改端口和域名

vim /etc/nginx/nginx.conf

找到如下代码段:

server {
      listen       80 default_server;
      listen       [::]:80 default_server;
      server_name  www.xxx.com; # 填写个人域名
      root         /data/www/hexo; # 填写自己创建的路径
  }
启动nginx服务

service nginx start

打开浏览器,输入域名,若出现页面,则服务器配置成功
20220125160450

Git配置

创建文件目录, 用于私人 Git 仓库, 并更改目录读写权限

mkdir -p /data/blog
chmod -R 755 /data/blog

Git 初始化裸库

cd /data/blog
git init —bare hexo.git

创建 Git 钩子(hook) (重点!!!)

创建post-receive文件并保存

vim /data/blog/hexo.git/hooks/post-receive

#!/bin/bash
git --work-tree=/data/www/hexo --git-dir=/data/blog/hexo.git checkout -f

这里就是把我们git文件映射到我们的nginx代理文件夹,以后每次执行git同步就将同步的文件放到/data/www/hexo的文件,也就是我们nginx的工作目录
保存并退出后, 给该文件添加可执行权限

chmod +x /data/blog/hexo.git/hooks/post-receive

配置hexo部署文件

本地 Hexo 配置
进入~/myBlog 目录, 修改 Hexo 博客站点配置文件 _config.yml, 如下修改:

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: http://badboy2002.xyz
permalink: :year/:month/:day/:title/

.....

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: 'git'
  repo: root@badboy2002.xyz:/data/blog/hexo.git

开始部署

清除缓存

hexo clean

生成静态页面

hexo g

部署到服务器上

hexo d

浏览器打开badboy2002.xyz,不出意外的话就可以看到我们的网页了
20220125161507

配置Markdown的图床

安装Markdown插件
20220125162459

安装Markdown预览
20220125162523

安装PicGo插件
20220125161943

阿里云开通OSS对象存储,并注册OSS的RAM用户,记录ID和Secret
20220125162249

PicGO中依照下图配置
20220125162314
之后便可在Markdown中Ctrl+Alt+U粘贴图片

数学公式支持

Latex数学公式语法参考链接

Markdown数学公式插件

安装Markdown Math
20220130225527

更换Hexo渲染器

由于Hexo的原生markdown渲染引擎对数学公式的支持不好,所以需要更换Hexo的markdown渲染引擎,hexo-renderer-kramed引擎是在默认的渲染引擎hexo-renderer-marked的基础上修改了一些bug,两者比较接近,也比较轻量级。
执行下列的命令,替换渲染器

npm uninstall hexo-renderer-marked —save
npm install hexo-renderer-kramed —save

更换引擎后行间公式可以正确渲染了,但是这样还没有完全解决问题,行内公式的渲染还是有问题,因为hexo-renderer-kramed引擎也有语义冲突的问题。接下来到博客根目录下,找到node_modules\kramed\lib\rules\inline.js,把第11行的escape变量的值做相应的修改:

//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
    escape: /^\\([`*\[\]()#$+\-.!_>])/,

这一步是在原基础上取消了对\,{,}的转义。
同时把第20行的em变量也要做相应的修改。

//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

在所用主题下的_config.yml打开mathjax

mathjax:
  enable: true
  cdn: https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML

再在具体的文章的markdown的font-matter中打开

mathjax: true

重新启动hexo,先clean再generate,应该就可以了

全域名解析

阿里云域名解析界面
添加www记录指向域名,再添加@记录将域名指向ip地址

添加https支持

实例端口放行

放行443端口
实例控制台安全组

购买 SSL 证书

阿里云提供了一种免费的”单域名“证书,单域名证书只能给一个域名/子域增加 https,适用于个人小网站。

阿里云SSL页面
申请免费证书
证书购买后,需要填写信息,提交审核。免费的证书审核下发很快。
下发之后,将证书下载到本地,解压后是.pem和.key两个文件。

将证书复制到远端实例
  • 登录远程服务器 ssh username@服务器ip
  • 在 /etc/nginx/下新建 cert 文件夹
  • vim /etc/nginx/cert.pem 将pem内容复制进去
  • vim /etc/nginx/cert.key 将key内容复制进去
修改nginx配置

打开配置文件
vim /etc/nginx/nginx.conf

修改以下字段

server {
       listen       443 ssl http2 default_server;
       listen       [::]:443 ssl http2 default_server;
       server_name  badboy2002.xyz;
       root         /data/www/hexo;
       ssl_certificate "/etc/nginx/cert/cert.pem";
       ssl_certificate_key "/etc/nginx/cert/cert.key";
       ssl_session_cache shared:SSL:1m;
       ssl_session_timeout  10m;
       ssl_ciphers PROFILE=SYSTEM;
       ssl_prefer_server_ciphers on;
}

重启服务
service nginx restart

在浏览器中输入https://badboy2002.xyz,查看是否成功访问


文章作者: Allen Hong
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Allen Hong !
  目录