经过大半个月的折腾，看到自己的博客成功上线并能够访问，感到非常欣喜。尽管之前写过类似的文章，但貌似不见了，因此我决定重新写一篇，作为总结，并顺便为博客注入新的活力。

写在之前：

说明一下，我已经完成了 Github/Gitee Pages 和 Hexo 等搭建工作，因此不会再详细描述这些步骤。最初，我的博客是为了分享给家人和朋友看的，由于他们可能没有梯子等工具，因此如果网站加载速度缓慢，会严重影响他们对网站的评价。（我正好也准备面试性能优化这方面的知识，可以在后面展开讨论，但在这篇文章中就不详述了。）

接下来，我将总结一下，我是如何从零开始搭建博客的。

准备工作

选择并购买服务器

首先打开浏览器，进入搜索引擎，输入：“云服务器选择 -广告 -推广”，进行比价。因为之前我购买域名和服务器时使用的是阿里云，所以这次我也继续选择了它。

如何选择？

在选择云服务器时，对于个人开发者来说，最重要的是价格便宜且性价比高。通常来说，2 核 2G 的云服务器，一年大约 200 元左右是可以接受的。这里就不多说了，选择的原则是服务器距离自己的地理位置较近，配置适中，价格可以接受。

你需要知道的有这些

  1. 公网 IP

进入云服务器控制台，进入实例（就是你买的服务器）页面。记住公网 IP 即可，之后用 SSH 或 XShell 等填的服务器地址就是这个

  1. 服务器 root 密码

可根据需要自行重置

  1. 镜像操作系统

网上资源和教程都很多，选择较新稳定的版本即可。个人用的是 Ubuntu 20.04 64 位

远程登录

推荐使用 XShell、Xftp。前者可以在 Windows 界面下用来访问远端不同系统下的服务器，实现远程控制终端的目的。后者 Xftp 是一个功能强大的 SFTP、FTP 文件传输软件，方便用于远程传输项目、资源文件等。

引用站外地址，点击打开新页面标签
XShell7
引用站外地址，点击打开新页面标签
XFTP7

域名和备案

对应云服务商都可以查询、购买域名，选择自己喜欢的域名即可。需要注意的是，这只是一个开始，想要使其能正常访问需要进行备案和解析。这里就不展开了。现在备案不需要购买那些幕布了，只需要身份证，比以前方便得多，全部可以在线完成。

部署相关配置

到这里开始正式搭建环境了。打开XShell进入购买的服务器.

升级服务器软件包，安装必要的软件

1
2
3
# 这里选的centos所以是yum
sudo yum update
sudo yum install git vim openssl build-essential libssh-dev wget curl

安装 nvm

直接上文档，这里用 Git install 的方式

引用站外地址，点击打开新页面标签
nvm
git install 安装
 
1
2
3
4
5
6
7
8
9
10
11
cd ~
git clone https://github.com/nvm-sh/nvm.git .nvm
cd .nvm
./install.sh

# 重启一下就可以访问到nvm命令了
# 查看稳定版本，顺便设置淘宝源
nvm ls-remote

nvm install 16.20.2
node -v # 可以用了

顺便设置 git 的 username 和 email

1
2
3
4
git config --global user.name "xxx"
git config --global user.email "xxx@xxx.com"

npm config set registry http://registry.npmmirror.com

安装 nginx

1
2
yum install nginx # 安装nginx
nginx -v # 查看版本

配置 nginx

1
2
cd /etc/nginx/conf.d # 目录切换到nginx的配置路径
vi blog_fridolph_top.conf # 以 域名.conf 格式命名便于整理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# fileName: blog-fridolph-top.conf
server {
  listen 80; # 指定端口
  server_name blog.fridolph.top; #你的域名或者 ip
  location / {
    root /home/myblog-hexo;  # 指定静态网站根目录
    index index.html index.htm;  # 指定默认访问文件
    default_type 'application/x-javascript;chartset=utf-8';
  }

  location ~ .*.(gif|jpg|jpeg|png|webp|bmp|swf)$ {
    expires 30d; # 静态资源文件 过期时间30天
  }

  location ~ .*.(js|css)?$ {
    expires 1h; # css/js文件过期时间1小时
  }
}

之前下的 Xftp 现在就可派上用场了，我一般是根据项目类型放到 服务器 /home/ 路径下，填上对应的项目名方便整理。

再执行

1
2
nginx -t
service nginx restart

再到云服务器的控制台，解析域名，添加@、www、blog、*等对应记录即可

遇到的问题

服务器里的中文路径，浏览器访问不能正常展示（ 我以前怎么没遇到过这问题？

解决方案 hexo 的话使用 hexo-uuid 插件，生成的文章用 uuid 来代替原有的中文路径

折腾了半天的 nginx 配置，发现即便是拿 utf-8 重新保存，打开还是有编码问题。中文支持确实不友好，这也侧面提醒了我们在服务端使用尽量用英文+数字吧，减少潜在的坑。

升级 HTTPS，添加 SSL 证书

  1. 服务器安装 certbot 安装相关依赖
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 增加epel源
dnf install https://dl.fedoraproject.org/pub/epel/epel-release-latest-8.noarch.rpm
# 更新dnf仓库
dnf upgrade
# 安装snap
dnf install snapd -y
# 设置开机启动
systemctl enable --now snapd.socket
# 设置软链接  可通过snapd快速调用命令
ln -s /var/lib/snapd/snap /snap
# 更新快照
snap install core
snap refresh core
# 可能需要等待会儿
snap install --classic certbot
# 可通过certbot快速调用命令
ln -s /snap/bin/certbot /usr/bin/certbot
# certbot安装完毕执行certbot --version，输出版本表示安装成功
certbot --version
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 按80端口写好对应的conf 能访问即可
server {
  listen 80;
  server_name blog.fridolph.top;
  root /home/myblog-hexo;
  rewrite ^(.*)$ https://$host$1;
  location / {
    index index.html index.htm;
    default_type 'application/x-javascript;chartset=utf-8';
  }
  location ~ .*.(gif|jpg|jpeg|png|webp|bmp|swf)$ {
    expires 30d; # 静态资源文件 过期时间30天
  }

  location ~ .*.(js|css)?$ {
    expires 30m; # css/js文件过期时间1小时
  }
}

执行命令扫描 Nginx 所有配置，输出信息，都是英文看不懂自己谷歌，跟着选就好了。

1
2
3
4
5
6
certbot --nginx
# HTTPS证书最终生成到 /etc/letsencrypt/xxx 目录中

# Deploying certificate
# Successfully deployed certificate for blog.fridolph.top to /etc/nginx/conf.d/blog-fridolph-top.conf
# Congratulations! You have successfully enabled HTTPS on https://blog.fridolph.top

看到上面这个提示就说明成功了

再重启下即可

nginx 不生效问题

注意路径填写，我之前使用 /root/ 根路径下的都不生效 - - 不知道为啥，浪费了好多时间，建议用 /usr 或者 /home 看个人喜好吧

配置成功了但访问不到

如果是阿里云有默认安全策略，查看一下是否开启了 80 和 443 端口

是否开启安全策略

大功告成

网站可以访问啦，接下来就是优化问题，后续有时间再开新坑吧！