2024-06-09

如何自己搭建一个网站

本地部署hexo

步骤一：本地安装nodejs环境与git

安装nodejs，根据自己需求选择.msi或者.zip。msi引导式安装比较方便，一次到位。zip比较灵活，但需要自己配环境变量
node官网
当安装完成之后打开cmd使用如下指令验证安装是否正确成功

node -v

安装成功
然后就是点击这里去下载安装git，我这里就直接以windows版的截图为例子，standalone installer对应的是msi安装包，portable对应的是zip压缩包。
git下载安装
安装完成之后同样使用以下指令确认安装是否成功

git -v

安装成功

步骤二：本地安装hexo

在cmd中输入以下指令安装hexo。

1	npm install -g hexo-cli

安装完成之后同样使用以下指令确认安装是否成功

hexo -v

安装成功

步骤三：使用hexo初始化

在cmd命令行中进入到一个空文件（我们这里命名为blog），使用如下指令初始化一个hexo项目，就和初始化git仓库一样（这个memory leak是另外的问题，和这里没有必然联系，正常的话不会出现）

hexo init

安装成功
初始化仓库完成之后，使用

1
2
3

hexo g ::hexo generate的缩写
hexo s ::hexo server的缩写
::也可以直接使用hexo g&&hexo s一次执行生成+启动本地服务

启动本地服务，根据最后的INFO提示在本地的4000端口上访问
安装成功
初始界面

最后，我们可以对我们的网站进行美化，直接在当前根目录下使用以下指令

1	git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape

或者

1	npm i hexo-theme-landscape

检查确认本地的_config.yml文件中theme的值是否为landscape，如果不是，则修改为landscape（这里后续可以改成自己想换的皮肤）

1	theme: landscape

具体的皮肤作者请访问以下网站：https://github.com/hexojs/hexo-theme-landscape

这一步换皮肤的原因是为了确保以下路径文件存在 themes/landscape(皮肤名称)/layout/_partial/footer.ejs
因为如果我们是国内的服务器开设网站需要进行ICP与公安的备案，这里的操作会方便待会把备案号悬挂在网站底部

服务器端配置

步骤一：购买服务器与域名

我们使用阿里云的服务器，一般是轻量应用服务器或者是云服务器ECS。以下的步骤以轻量应用服务器并且操作系统是ubuntu为参考，云服务器ECS的配置基本相同。购买了服务器之后我们先在阿里云控制台中保证相关端口(22,80,443)处于开放状态

域名购买完成之后需要备案
域名ICP备案
通过之后就需要绑定到自己服务器的IP地址，我这里已经是绑定完成了，第一次操作点击添加记录，按提示操作即可

当我们完成绑定之后，就可以在阿里云控制台中看到我们的域名解析已经完成（同样地，到这里只有一个记录，也就是A解析，CNAME记录是后面绑定证书，启用HTTPS之后才会出现）

步骤二：服务器环境搭建

从这里开始就需要远程连接到我们的服务器进行操作了。可以使用Xshell,FinalShell等远程连接工具或者使用阿里云提供的远程连接服务
域名解析
到我们的服务器端，使用如下指令切换到root

su

安装、启动、查看状态nginx，对应的三条指令如下

1
2
3

apt install nginx -y
systemctl start nginx.service
systemctl status ngnix

启动nginx
如果顺利的话，这个时候直接通过ip地址在浏览器地址框访问，就能够看到以下界面

如果按照上面的步骤操作之后看不到上面这个界面，请检查阿里云防火墙是否放行了80端口，同时对于服务器端也可以按照下面的指令操作，查看并且放行端口

1
2
3

ufw status
ufw allow 80 && ufw allow 443
ufw status

启动nginx
下面，我们创建一个路径用来保存博客内容，这里建立在 /home/www下

cd /home
mkdir www
cd www
mkdir website

建立了博客的根目录后，需要将nginx服务器指向这个根目录地址，才能访问到博客页面，所以我们需要修改 nginx 的配置文件。默认配置文件位于etc/nginx/下的 nginx.conf 。

1 2	cd /etc/nginx vim nginx.conf

启动nginx
在http内添加红线框部分，root代表我们刚才设置的要保存博客文件的路径

然后我们在服务器端安装nodejs

1 2	curl -sL https://deb.nodesource.com/setup_20.x \| sudo -E bash - apt-get install nodejs -y

安装完毕nodejs之后，就开始安装git，为的是本地电脑直接ssh连接到云服务器，把本地写好的博客内容内容传到服务器上

1	apt-get install git -y

安装完毕之后，我们使用如下指令，按照提示新建立一个git用户，这样可以避免所有的内容都有root或者最开始的用户管理。

1	git adduser

添加好git用户之后就开始修改相关权限，添加红线框部分，由于这个文件不具有可修改性，正常操作应该是先使用chmod指令赋予可读性修改后再设置为只读，但是这里我们是root，为了方便直接打开修改，最后使用 !wq 强制覆盖保存退出即可

1	vi /etc/sudoers

修改权限
接下来切换到git用户，在其~目录下创建.ssh文件夹，并且生成一组公私钥（有提示的话一直回车即可）命令如下

su git
cd ~
mkdir .ssh
cd .ssh
ssh-keygen -t rsa

生成公私钥
id_rsa是私钥，id_rsa.pub是公钥。那么为了验证我们的远程登录，我们还需要创建一个authorized_keys文件，（这个是ssh连接验证的默认文件名，自己可以在sshd_config文件中更改）保存我们本地的公钥用于连接验证。
那么在本地的电脑上面，如果没有使用过远程公私钥连接或者git之类的工具的话，也需要在cmd中使用如下指令产生公私钥，一直回车即可。

1	ssh-keygen -t rsa

那么这个生成的公私钥默认在 C:\Users\替换为你的用户名\.ssh 这个文件目录内，然后把本地的id_rsa.pub文件内容复制到服务器的 /home/git/.ssh/authorized_keys 文件内。
对于服务器端，使用如下指令创建并且编辑authorized_keys文件内容

1	vi authorized_keys

直接把本地的公钥内容复制粘贴到该文件中保存退出。然后使用如下指令修改文件的权限

1 2	chmod 700 ~/.ssh chmod 600 ~/.ssh/authorized_keys

最后在本地的cmd上面使用如下方式测试连接云服务器，不出意外就和下面这个图一样，能正常连接了。（git代表我们刚才创建的用户名，第一次连接问询问是否接受指纹，输入yes即可）

1	ssh git@<YourIP>

测试是否成功
最后，我们在云服务器的 git 用户这边（直接在刚才cmd连接到远程这里操作也可以）创建一个Git的仓库，并且新建一个post-receive文件

1 2	git init --bare blog.git vi ~/blog.git/hooks/post-receive

然后把以下代码复制粘贴到post-receive文件中，保存退出

1 2	#!/bin/bash git --work-tree=/home/www/website --git-dir=/home/www/website/blog.git checkout -f

然后赋予该文件的可执行权限，命令如下

1	chmod +x ~/blog.git/hooks/post-receive

执行完之后检查文件应该变绿并且有一个星号，就是说明权限更改完成
赋予文件执行权
到此为止，服务器部分已经配置完毕。接下来回到我们本地的Hexo项目的根目录当中，执行以下命令安装相关插件

1 2	npm install hexo-deployer-git --save npm install hexo-server

然后打开_config.yml文件，修改以下内容

deploy:
  type: git
  repo: git@<YourIP>:/home/www/website/blog.git
  branch: master

修改配置文件
然后执行以下指令，把本地的博客内容更新传到服务器上

1
2
3

hexo clean
hexo g
hexo d

但是这里发现创建失败了
上传失败
我们回去检查一下www文件夹的权限
检查权限
发现拥有者是root，应该是刚才创建的时候忘了改所有者了，让我们把这个目录的所有者改成git用户，使用如下指令

1	sudo chown -R git:git /home/www

这样重新按照刚才更新博客内容的步骤一次就可以了
上传成功
如果网站内容没有什么变化，使用如下指令重新启动一下nginx

1	systemctl restart nginx.service

到了这一步了，那么直接通过域名http访问网站我想也就可以成功了

启用HTTPS

步骤一：下购买SSL证书

可以试着在这里申请阿里云免费DV单域名试用证书(按照指示操作即可)

步骤二：下载SSL证书

首先转到:数字证书管理服务->证书管理->SSL证书管理->免费证书
下载证书

然后点击创建证书,会出现以下界面
创建证书第一步
填写好自己的相关域名之后勾选快捷签发，会进一步地要求填写联系人所在地，其余的选项直接默认
创建证书第二步

等待证书的签发状态变为“已签发”之后点击下载，会出现以下界面，我们选择服务类型为Ngnix的下载到本地。
下载证书第一步
下载证书第二步
接着就需要把下载的证书文件解压，得到两个文件，一个是证书文件，一个是私钥文件都上传到服务器的的/etc/nginx/目录下
上传证书文件

步骤三：在Nginx服务器安装证书

找到Nginx的安装目录，进入conf文件夹，打开 nginx.conf文件（正常应该是/etc/nginx这个位置），将之前server部分对照修改为以下代码

# 启用HTTPS
 server {
        listen 443 ssl;
        # 填写你的域名
        server_name <YourDomain>;

        #填写证书文件的相对路径
        #就是上一步下载的压缩包内的两个文件
        ssl_certificate <filename>.pem;
        ssl_certificate_key <filename>.key;

        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;

        ssl_certificate_key apedia.top.key;

        ssl_session_cache shared:SSL:1m;
        ssl_session_timeout 5m;

        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

        ssl_prefer_server_ciphers on;

        #填写之间建立的网站内容存储的地方
        root /home/www/website;

        #特别注意"/"的左右两边有空格
        #特别注意"/"的左右两边有空格
        location / {
        }
    }

进一步地，可以设置http的访问都重定向到https，在ngnix.conf文件中添加下面这段代码

server {
        listen 80;
        #填写证书绑定的域名
        server_name <YourDomain>;
        #将所有HTTP请求通过rewrite指令重定向到HTTPS。
        rewrite ^(.*)$ https://$host$1;
        #特别注意"/"的左右两边有空格
        #特别注意"/"的左右两边有空格
        location / {
        }
    }

修改为https服务
那么到此为止的配置就算完成，最后使用如下指令重新启动nginx服务，就可以使用https协议访问网站了

1	$ sudo systemctl restart nginx.service