阿里云服务器+Hexo+Nginx搭建个人博客网站

前言

花费了两天的时间,看了很多的博客文章,在KenSporger的帮助下,终于搭建了自己的个人网站。写下这篇文章,也是希望读者能少走些弯路。网站搭建是基于hexo和nginx。

本地端(个人PC)

首先,本地的电脑需要 git 和 hexo,这里默认git都已经装好了。

安装node.js

Node.js 是运行在服务端的 JavaScript, 是基于 Chrome JavaScript V8 引擎建立的平台。

Hexo基于Node.js,所以安装Node.js是必须的。在这里还是建议使用Windows环境进行安装。

Linux环境下 安装(不建议)

命令如下:

wget https://nodejs.org/dist/v14.18.1/node-v14.18.1-linux-x64.tar.xz

我这里安装的是Linux x64的 v14.18.1版本,其余版本可以在Node.js 官网自行挑选。
在这里插入图片描述
下载完成后,我们就可以看见有安装包了。
在这里插入图片描述
解压该安装包

tar xvJf node-v14.18.1-linux-x64.tar.xz

解压完成后,我们可以看到文件夹了
在这里插入图片描述

将文件改名并放入到 /usr/local 文件夹

mv node-v14.18.1-linux-x64 /usr/local/node-v14

软链接到 /bin 目录

ln -s /usr/local/node-v13/bin/node /bin/node
ln -s /usr/local/node-v13/bin/npm /bin/npm

配置环境变量

将 /usr/local/node-v13/bin 目录添加到 $PATH 环境变量中可以方便地使用通过 npm 全局安装的第三方工具

echo ‘export PATH=/usr/local/node-v13/bin:$PATH’ >> /etc/profile

使环境变量生效

source /etc/profile

测试安装是否成功

输入 node -vnpm -v,如果显示出版本号,即安装成功
在这里插入图片描述

Windows环境下 安装(推荐)

直接在Node.js 官网选择windows,我选择了 == node-v12.14.1-x64 版本,因为 nodejs v14的版本,在hexo的github的issue里有好多问题==,我还是选择了稳妥起见哈哈哈。
下载完成后,双击 node-v12.14.1-x64.msi文件,选择安装的文件夹,一步步点击即可。安装完后如下图
在这里插入图片描述
在cmd中输入以下命令行,返回版本号即算安装成功。
在这里插入图片描述

安装Hexo

以下只介绍在window环境下安装hexo。
打开 git bash 命令行界面。
输入以下命令

npm install -g hexo-cli

如果下载速度过慢,可以尝试更换npm源

npm config set registry https://registry.npm.taobao.org

下载完成后,输入 hexo version,显示出版本号等信息,即安装成功。

输入命令行

hexo init myblog

会在C盘用户文件夹下,直接生成 myblog 文件夹,该文件夹就是个人博客的本地位置。
然后继续输入,

> hexo g
> hexo s

这里显示的 BUTTERFLY 是hexo博客的一个模板,可以忽略。
在这里插入图片描述

打开本地浏览器,输入URL localhost:4000,就可以看见自己的hexo博客了。
在这里插入图片描述

两种部署方法

显然,博客内容在本地,只有我们本机电脑才能访问网站里的资源,所以我们需要将博客内容部署到线上服务器。
这里有两种做法

  • 通过github来部署
  • 部署到自己的服务器上

第一种做法(GitHub,该方法不需要买域名)

建立GitHub.io仓库

首先,我们需要在登录GitHub,然后创建一个新的仓库,名字叫 自己用户名.github.io,下图是我已经建过这个仓库名了。
在这里插入图片描述

设置ssh密钥

然后我们打开本地的 Git Bash,设置用户名和邮箱内容

git config --global user.name "your GitHub username"
git config --global user.email "your GitHub email"

然后,输入以下命令生成ssh密钥,ssh密钥可以让你将本地的内容直接推送到GitHub仓库里

ssh-keygen -t rsa -C "your GitHub email"

输入完成后,会询问设置密码,无需理会,只要一直按回车就行。
然后去C盘/用户/你的用户名/.ssh文件夹里找到 id_rsa.pub文件,复制里面的内容。
在这里插入图片描述
打开 GitHub设置ssh keys 页面, 选择 New SSH key,将刚刚复制的内容粘贴进去即可。

推送网站

只有将本地的内容推送到了github.io仓库,才能让互联网上其他人看见我们的网站。
打开之前的 myblog 文件夹,找到_config.yml 文件
在这里插入图片描述
下一步将我们的Hexo与GitHub关联起来,打开站点的配置文件_config.yml,翻到最后进行修改。

在这里插入图片描述
关闭保存文件后,打开命令行,安装Hexo部署Git的插件,输入命令

npm install hexo-deployer-git --save

然后接着输入

hexo clean
hexo g
hexo deploy

完成后,打开浏览器,输入 你的GitHub用户名.github.io,就可以看到自己的网页界面了。
在这里插入图片描述

第二种做法(部署到自己的服务器)

首先,需要一台服务器,在这里我使用的是阿里云服务器,操作系统为Ubuntu 20.04 64位。

配置安全组

阿里云服务器默认的安全组为最后三个,我们需要配置红框里的两个。

  • 端口80:http的端口,源:0.0.0.0代表该端口开放给所有ip地址
  • 端口8888:宝塔Linux面板的端口(虽然搭建个人网站不需要宝塔,但是还是安利一下),源:这里我马赛克掉了自己的ip地址,各位可以在搜索引擎里搜索 ip,即可查到自己的ip地址,然后设置成自己的ip地址即可。
    在这里插入图片描述
服务器安装 Git 和 Nginx

首先,通过ssh方式连接上服务器。
打开终端,输入命令

apt-get update
apt-get install git nginx -y
服务器创建Git仓库

服务器需要建立git仓库,作为网站的部署仓库。
建立文件路径:

mkdir /var/repo/

修改权限:

chown -R $USER:$USER /var/repo/
chmod -R 755 /var/repo/

创建远程git仓库,这里我自己选择仓库名叫myblog

cd /var/repo
git init --bare myblog.git

在这里插入图片描述

服务器配置Nginx

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

mkdir -p /var/www/hexo

chown -R $USER:$USER /var/www/hexo
chmod -R 755 /var/www/hexo

修改 Nginx 的 default 文件使得 root 指向刚刚创建的 /var/www/hexo目录:

vim /etc/nginx/sites-available/default

修改红框语句
在这里插入图片描述
然后重启 Nginx 服务

service nginx restart

此时已经搭建好自己的nginx服务器,输入自己的服务器公网IP地址即可访问如下界面:
在这里插入图片描述

配置钩子文件(hooks)

执行以下命令,新建钩子文件,其中 myblog.git 文件是上文创建的git仓库

vim /var/repo/myblog.git/hooks/post-receive

打开文件后,加入下面的代码(myblog.git 是我的仓库名):

#!/bin/bash

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

将文件保存(方法参加上文)后,增加该文件可执行权限:

chmod +x /var/repo/myblog.git/hooks/post-receive
部署本地 Hexo 到远程服务器

将服务器地址添加到受信任的站点,在本地PC的任意目录从服务器上把仓库克隆下来:
因为我服务器使用的是root用户,所以这里@之前是用root。

git clone root@{云服务器IP}:/var/repo/myblog.git

然后,修改配置文件 _config.yml, 将 url 改成 https://{云服务器IP}/
在这里插入图片描述
将 deploy 目标改为 {服务器用户名}@{服务IP}:/var/repo/myblog.git:
在这里插入图片描述在个人博客站点目录下,打开 Git bash ,输入 hexo clean && hexo g -d 部署。
在这里插入图片描述

在浏览器里,输入 自己服务器的 ip 地址,即可访问自己的个人博客。
在这里插入图片描述

参考资料

  • https://zhuanlan.zhihu.com/p/120743882
  • https://chenuon.cn/2020/01/29/code-hexo-git-nginx/
  • https://blog.csdn.net/sinat_37781304/article/details/82729029
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值