简介
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
出现版本信息说明安装成功
生成本地网页
两个工具就绪后我们开始生成静态网页:
我们首先创建一个文件夹,用来存放网页数据
在文件夹内右击打开gitbash,输入初始化指令
hexo init my_blog
输入后git会从远程拉取初始化代码下来,拉取后Git显示如下
若长时间无反应,需要删除文件夹,重新初始化
直到没有任何报错和WARN,才可继续
在Git中改变当前目录的位置,进入该文件夹,代码如下
cd codepoet/
使用hexo编译指令
hexo g
然后开启本地端口访问
hexo server
在浏览器输入如下内容,就可以本地访问Hexo生成的网页代码了:
localhost:4000
更换Hexo的主题(第一次建站的话可跳过,稍后再操作)
Matery主题下载地址
将下载的文件解压到hexo目录下的themes中
切换主题
修改 Hexo 根目录下的_config.yml的theme的值:
theme: hexo-theme-matery-master
在hexo目录gitbush运行下列代码
hexo clean # 清除缓存
hexo g # 编译
hexo s # 运行
浏览器再次打开localhost:4000,就可以看到主题已经变了
_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端口访问
备案域名,并解析到云服务器的ip地址上
安装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
打开浏览器,输入域名,若出现页面,则服务器配置成功
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,不出意外的话就可以看到我们的网页了
配置Markdown的图床
安装Markdown插件
安装Markdown预览
安装PicGo插件
阿里云开通OSS对象存储,并注册OSS的RAM用户,记录ID和Secret
PicGO中依照下图配置
之后便可在Markdown中Ctrl+Alt+U粘贴图片
数学公式支持
Markdown数学公式插件
安装Markdown Math
更换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,适用于个人小网站。
申请免费证书
证书购买后,需要填写信息,提交审核。免费的证书审核下发很快。
下发之后,将证书下载到本地,解压后是.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,查看是否成功访问