【5】详细记录大学生自学搭建个人网站全过程，从0开始到小有成果

　　接上文，这一集我们开始正式上传文章！

　　但在上传文章之前，博主的域名审核刚好到啦，那就先把域名解析做了。

9878cbe4-239c-4991-bf19-573bcad51c7a

8 域名解析

8.1 域名解析

　　老规矩，开篇先上参考的帖子。

序号 标题 链接 备注
1 hexo 博客开启 https (SSL 证书) hexo 博客开启 https (SSL 证书)_hexo配置ssl-CSDN博客 救我狗命！
2 阿里云免费SSL证书白嫖指南 阿里云免费SSL证书白嫖指南 - 知乎 (zhihu.com) 整体流程参考价值很大。
3 阿里云官方给的ssl证书配置Nginx视频教程 https://cloud.video.taobao.com/play/u/901422/p/1/e/6/t/1/306659382376.mp4 非常好！

　　域名审核通过啦，不得不夸夸阿里巴巴的服务，在提交审核的时候会有客服电话打来帮助我写用途，提交管局审核花了很多天，但这几天都没计入ECS的费用期间。

0fb6f32b943a683bd17cd7d362f3fe6 image-20240416152826013

　　我们在阿里云控制台搜索进入【云解析DNS】，进入【域名解析】页面点击【添加记录】。

9f1f37e636ddb63a0fb7839e430c024

　　按照如图所示添加两条解析记录，两者的区别只有【主机记录】不同，注意记录值填写实例的公网ip，这样我们就在浏览器地址栏输入www.wangyuanhang.cn和wangyuanhang.cn都能够访问到主页了。

eb4f6578aaaf812b0d6aaf47c63f4eb 6195714aa6f6fddb1a1c97da4d5b0d8

　　添加完成后可以在记录页面看到。

d28a36f519dae0dc6ad8906eecee780

　　之后我们就可以通过自己购买的域名访问到自己的网站了，初次访问会有些慢，因为要做DNS记录，但再访问就好啦。

443945620ed1d2b56ddff1cdd26e983

8.2 申请SSL证书

　　浏览器会提示说不安全，是因为我们现在用的是http协议，我们可以改成https协议来访问，但是每三个月就要重新申请一下证书，这一步是可选项。

　　我们可以用阿里的免费SSl证书来做，首先在控制台打开【数字证书管理服务】，点击【SSl证书】，找到【免费证书】，点击【立即购买】。

3f1582f40feaa42d029b3886a1d22e7

　　然后按照图示选择。

d2d2f918c08b3fcadefd3c40b492026

　　之后点击支付，会支付一个0.00元的账单，如果失败就返回再来一次。然后回到证书控制台，这次在【免费证书】中点击【创建证书】。

724d444bdad4338081f2c9fb369452b

　　按照图示选择并输入。

e2771caa89e07387b970708ce8cff10

　　可以选择快捷签发，输入信息确认之后我们可以在详情栏看到证书签发的状态，然后点击【验证】。

ba3343c760e9af7bb926b7eebc16986 d78467512d615ad38a65561e9fddebc

　　根据提示，点击进入【阿里云DNS控制台】并添加下面的DNS记录用来辅助验证。

4d198f61fb1609744b63d373511da69

　　点击确认后，会在列表里出现一个新的记录。

092944b29ddde4c593abaf81f9238a7

　　然后回到刚刚的【证书申请】页，点击【验证】后即可看到DNS验证成功，然后我们等待签发即可，一般都很快。

5827665ef90262df4b25450aa1a04e2

８.３ SSL证书安装

　　Hexo是安装在Nginx上的，我们需要吧ssl证书安装到Nginx云服务器上才能使用https加密服务。

　　我们首先点击【下载】，把Nginx的两个证书下载到本地，一个是XXX.key，一个是XXX.pem。

　　我们需要把这两个证书放到云服务器中Nginx有权限读写的路径中，打开之前的ftp工具FileZilla，输入主机的ip地址、用户名root、【密码】和端口22后，别忘了密码哦，然后点击【快速链接】。

c06133deceefd2e2575ecd1ec896d06

　　然后在远程站点中输入/usr/local/nginx/conf，右键点击在里面创建一个名为cert的目录，并在cert目录上右键点击【文件属性】，权限值改成777后点【确定】。

　　在左侧找到我们下载的.key和.pem文件，把两个我们下载的文件拖动到这个目录里，注意检查两个文件权限，如果不是777就都手动改为777。

55f332e87b1a4528457b1749152347b

　　如果是以后再来更新的话，做到这一步，拖入新的密钥文件，再重启实例，然后进入/usr/local/nginx/sbin重启nginx即可。

　　然后要修改Nginx的配置文件，博主是通过VNC登陆到服务器，找找Nginx的目录/usr/local/nginx/conf里的nginx.conf，然后用vim编辑。

# cd /usr/local/nginx/conf
# ls
# vi nginx.conf

　　按i键进入编辑模式，然后向下找到最后的https服务配置项，按照下面的提示修改。

#以下属性中，以ssl开头的属性表示与证书配置有关。
server {
    listen 443 ssl;
    #配置HTTPS的默认访问端口为443。
    #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
    #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
    server_name yourdomain.com; #需要将yourdomain.com替换成证书绑定的域名。
    root html;
    index index.html index.htm;
    ssl_certificate cert/cert-file-name.pem;  #需要将cert-file-name.pem替换成已上传的证书文件的名称。
    ssl_certificate_key cert/cert-file-name.key; #需要将cert-file-name.key替换成已上传的证书私钥文件的名称。
    ssl_session_timeout 5m;
    #表示使用的加密套件的类型。
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; #表示使用的TLS协议的类型。
    ssl_prefer_server_ciphers on;
    location / {
        root html;  #站点目录，参考上面的。
        index index.html index.htm;
    }
}

　　博主修改完成后是这样：

f592b66e6412db44ec5ce05c9f975c9

　　如果想要所有的http访问自动跳转到https页面，在server里面添加一行复写信息。

rewrite ^(.*) https://wangyuanhang.cn$1 permanent;

　　博主修改完是这样的：

c637d0519b84f4ca8b01cfa811c07b3

　　然后我们按ECS，输入:wq保存退出。

　　输入以下命令，确认Linux的443端口是否开放，如果已安装lsof可忽略第一步，安装过程中询问就输入y然后回车。

# yum install lsof
# lsof -i:443

　　如果有显示说明已经开放了，如果没有显示说明没有开放，博主的就没有任何显示，输入以下命令打开443端口。

# /sbin/iptables -I INPUT -p tcp --dport 443 -j ACCEPT

　　输入以下代码，再次打开Nginx服务。

# cd /usr/local/nginx/sbin
# ./nginx

　　博主的报出了以下错误，说明缺少ngx_http_ssl_module模块。

a0f2e2209ef158b9ebcc6a213de713c

　　退回到上两个文件夹，连续输入两次cd ..然后找到config文件。

# find . -type f -name configure

　　找到后cd进这个文件，然后输入下面的命令，我们之前安装了openssl库所以此处应该不会报错，如果报错就安装以下ssl库yum -y install openssl openssl-devel。

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

　　配置完成后make一下。

# make

　　替换已经安装好的Nginx包，替换之前先备份一下。

# cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak

　　先停止Nginx服务，再覆盖Nginx包，停止Nginx服务要把我们刚刚在nginx.conf做的修改全注释掉。

# ./usr/local/nginx/sbin/nginx -s stop
# cd ./usr/local/nginx-1.10.1
# cp ./objs/nginx /usr/local/nginx/sbin/

　　tips：如果此时提示command not found，那就是在Centos中没添加环境变量，添加环境变量。

# vim /etc/profile

　　然后按i，在底部添加：

PATH=$PATH: /usr/local/nginx/sbin  //这个是你nginx的位置
export PATH
19effba15abb1aeae3517b0af81c76a

　　之后按ESC，然后输入:wq保存退出，我们还需要让其立即生效。

# source /etc/profile

　　提示是否覆盖的时候，我们输入y。

1921e5be72d00b0f32338aaa489e01b

　　通过查看版本命令收看是否下载SSL模块成功，出现图示内容说明成功。

# /usr/local/nginx/sbin/nginx -V
c3d60c80f458951105ae5901dace310

　　回到刚刚的配置文件，把注释掉的再弄回来。

# cd /usr/local/nginx/conf
# ls
# vi nginx.conf

　　启动Nginx！不会有任何提示哦。

# /usr/local/nginx/sbin/nginx

　　然后我们在本地计算机回到阿里云这个实例的安全组，检查以下安全组里是否打开了443端口，没有打开的就把这一条规则添加上。

bbb85d683926bc58bc876eed55fb593

　　此时，如果在浏览器网址栏输入https://wangyuanhang.cn就可以访问到我们采用https的网站啦，输入http://wangyuanhang.cn也会自动跳转成https。

9 发布第一篇文章

9.1 markdowm

　　hexo的文章是以.md格式在本地编辑，编辑完成后被解释成静态html放在服务器上得以访问。.md就是最常用的轻量级标记语言，经常用来编写各种计算机类的博客教程。.md文件可以用很多软件打开，记事本、Sublime、编译器等都可以打开，但是推荐用Typora打开，这是最专业最好用的markdown编辑器。

　　Typora的下载安装破解教程我放在这里Typora激活使用指南（2023年最新版） - 知乎 (zhihu.com)，感谢网友的无私分享。

9.2 新建文章

　　在hexo的根目录中右键打开GitBash，输入以下命令来新建一篇博客。

hexo new my_first_blog
b9009292bb8a2e68b66d904cb8a4fd3

　　Hexo会自动在source\_post文件中创建一个.md文件，打开这个文件，这就是我们写博客的文件了。

　　打开之后，会在上方看到基本配置信息，这个叫Front-matter，这里可以添加很多其他选项，在这里可以做一些基础设置。

f0e5f6f39db202080550942c95adc19
配置项 意义
title 网页文章标题
date 文章创建如期
comments 文章评论功能是否启动
tags 文章标签
categories 文章分类
keywords 文章关键字

　　在下方空白处，我们输入“大家好，这是我的第一篇博客！”，选择这句话后，鼠标移动到【段落】处，选择【一级标题】，我们的文章大标题就写好了。

c4498dc74ef9708a4d0f041c2dadd92

　　然后按照类似的方法再输入几个不同级别的标题和段落。

# 大家好，这是我的第一篇博客！

## 第一个二级标题

### 小标题1

这里是第一段...

这里是第二段...

### 小标题2

这里是第三段...

这里是第四段...

## 第二个二级标题

这里是第五段...
e6b82b4c0a86f43842ebd3997bd93c2

　　文章我们写好之后，按快捷键Ctrl+s保存，然后关闭Typora，回到之前的GitBash，输入以下命令来完成文章的发布，以后每次更新完一篇文章，我们都要先保存，再输入这三条命令来上传。

$ hexo clean
$ hexo g
$ hexo d

　　看到一大串的代码跑过之后，没有黄色或者红色的报错，就说明我们上传成功啦，此时在浏览器输入ip地址，由域名了就输入域名，我们就可以看到刚刚发布的文章。

71a26ccb50f85b0d98992ad8497772d

　　大家点进去之后可以看到文章内容，并且注意hexo会帮我们自动生成目录，这个目录非常清晰好用。

34a6d806a4dbdc5ed54af28f3ef95cb

　　写博客一定要逻辑清晰，所以这篇先讲怎么列标题。在下一篇，我们在博客中加入代码、链接、表格、缩进、图片、视频。

5205d162-3ee2-4e73-a1fc-3b7d91385347