写在前面

这一部分是博客搭建的前置准备以及框架搭建和域名准备

Personal Blog

个人博客使用 Hexo 作为框架: Hexo 是一个快速、简洁且高效的静态博客框架，具有较强的可拓展性

个人博客应该更加注重内容而不是样式

一、准备工作

环境准备

需要准备以下环境

1
2
node.js
git

如果挂载了梯子，如果遇到了安装时的网络问题，建议在安装 npm 时暂时关闭,或者设置先相关代理

Github 上搭建仓库

在 Github 上搭建名叫<username>.github.io的仓库，设置为公开

安装 Hexo

1
npm install -g hexo

二、搭建 Hexo

初始化 Hexo

进入项目文件夹中，进行初始化

1
hexo init

安装初始依赖

1
npm i

项目文件夹结构

treer -e ./result.txt -i node_modules

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
D:\Resince\project\Hexo
├─.gitignore
├─package-lock.json
├─package.json
├─_config.landscape.yml	# 主题的配置文件
├─_config.yml			# 博客的配置文件
├─themes
|   └.gitkeep
├─source				# 用来存放你的文章
|   ├─_posts
|   |   └hello-world.md
├─scaffolds				# 生成文章的一些模板
|     ├─draft.md
|     ├─page.md
|     └post.md
├─.github
|    └dependabot.yml

本地启动项目

1
2
hexo server
hexo s

将博客挂载到 GitHub 上

安装 hexo-deployer-git

这个包可以支持一键将页面部署到 GitHub 上，其中包括git push、建立 .github/workflows/pages.yml等

详细查看在 GitHub Pages 上部署 Hexo | Hexo

1
npm install hexo-deployer-git --save

修改 _config.yml 文件

1
2
3
4
deploy:
  type: "git"
  repo: git@github.com:Resince/Resince.github.io.git
  branch: main

将代码部署到 Github

1
hexo clean && hexo deploy

通过访问 https://Resince.github.io

三、安装主题

通过 npm 安装

这里使用的是 hexo-theme-butterfly 主题

1
npm i hexo-theme-butterfly

配置

配置文件 _config.yml:

1
theme: butterfly

如果你没有 pug 和 stylus 的渲染器，可以尝试：

1
npm install hexo-renderer-pug hexo-renderer-stylus

四、部署到 nginx 服务器

这个借鉴了知乎的一篇文章：将 hexo 个人博客部署到个人云服务器–最详细踩坑教程 - 知乎 (zhihu.com)

注意其中的文件命名需要改成自己的命名

准备工作

需要一台云服务器，以及备案的域名

这一部分可以去网上寻找相关教程比较详细

云服务器环境配置：

git 作为代码仓库， node 作为 Hexo 的环境

1
2
apt-get update
apt-get install git nginx -y

建立文件路径：

1
mkdir /var/repo/

修改权限以让这个文件夹可以被编译:

1
2
chown -R <username>:<groupname> /var/repo/
chmod -R 755 /var/repo/

创建远程 Git 仓库：

1
2
cd /var/repo
git init --bare {自定义仓库名name}.git

配置 Nginx 托管文件目录

创建目录并修改目录所有权和权限：

1
2
3
4
mkdir -p /var/www/hexo

chown -R <username>:<groupname> /var/www/hexo
chmod -R 755 /var/www/hexo

修改 Nginx 的 sites-available/default 文件

1
vim /etc/nginx/sites-available/default

让 root 指向刚刚创建的 /var/www/hexo目录：

1
root /var/www/hexo;

如果有域名可以将 server_name 字段后写入自己的域名。

最后重启 nginx 服务:

1
service nginx restart

Git 钩子

Git - Git 钩子 (git-scm.com)

执行下面的命令，在自动生成的resinceBlog.git/hooks 目录下创建一个新的钩子文件：

在 hooks 文件夹下的初始都是 .sample 文件这些都是实例,不是初始化

1
vim /var/repo/resinceBlog.git/hooks/post-receive

打开文件后，加入下面的代码：

1
2
3
#!/bin/bash

git --work-tree=/var/www/hexo --git-dir=/var/repo/resinceBlog.git checkout -f

将文件保存（方法参加上文）后，赋予该文件可执行权限：

1
chmod +x /var/repo/resinceBlog.git/hooks/post-receive

使用 Git 部署本地 Hexo 到远端服务器

编辑站点配置文件_config.yml , 将 url 改成https://{云服务器IP}/

将 deploy 目标改为 {服务器用户名}@{服务IP}:/var/repo/resinceBlog.git：

在个人博客站点目录下，打开 Git bash ,使用 hexo g -d 部署：

注意这里如果设置的是 username@ip 的形式,那么每次 deploy 需要输入密码,这里可以通过密钥的形式来避免登录时输入密码

五、域名访问

购买域名

购买域名建议买便宜的域名,为了免得折腾可以在购买服务器的厂商处购买域名

域名备案

域名备案需要身份证明等，需要耗费较长的时间

域名解析到服务器

这一步的作用就是将域名指向你的主机的 IP 的地址。

进一步说明就是如果你服务器上有多个 WEB 应用，都在同一个 IP 下这就需要先将对应的泛域名都指向同一个 IP

其中两种主要的解析方式，一种是 A ，一种是 CNAME ，可以看这篇文章 cname 记录是什么?

  • 其中 A 类型是将域名与 ip 地址绑定

  • CNAME 是将域名与域名绑定

这里建议将你的二级域名设置为 A 类型，三级域名设置为 CNAME 方便以后更改服务器的 ip 后的更改

这一步就是在域名解析购买商处 添加解析 直接设置即可

设置完成后可以通过 ping 你的域名就可以查看是否正确配置

如果是正确的 ip 就说明配置正确

服务器设置解析

这一步的作用是承接上一步的解析，上一步有多个泛域名指向了同一个 IP 现在要对这些域名进行一一对应

这里修改对应的配置文件 sites-available/default

1
server_name resince.fun www.resince.fun

这样就将这两个域名指向了你需要的页面

SSL 证书获取

华为云有免费的证书获取方式： 如何申请免费证书？华为云

再将域名绑定到 ssl 证书中，需要在 SSL 证书管理中操作，并且要经过申请、验证

SSL 证书配置

可以查看华为云的文档在 Nginx 中安装 SSL 证书

  • 先下载证书文件并解压
  • 之后在 etc/nginx 下创建 cert 目录
  • 之后将 nginx 对应的文件移动到 cert 目录下
  • 配置 site-available/default 文件
1
2
3
4
listen 443 ssl
# SSL configuration
ssl_certificate cert/server.crt;
ssl_certificate_key cert/server.key;
  • 之后在通过 https 访问网站验证即可