小白如何搭建第一个博客(Hexo+阿里云服务器)

小白如何搭建第一个博客(Hexo+阿里云服务器)

这段时间“新型冠状病毒”疫情严重。学校延期开学,我也只能延期去参加实习。阿里云抓住这个机会营销了一波——学生“在家实践”计划。通过学生认证即可免费领取一台服务器(半年)。拿到服务器本来想做一个展示疫情数据的Web,奈何前端知识所知甚少,于是开始从简单的入手,搭建了我的第一个博客。

准备材料

  • 自己手边的一台能上网的电脑。
  • 云服务器,我的服务器是阿里云,配置为:2核CPU、4G内存、1M带宽、40G系统盘,绰绰有余。
  • 域名(非必须),在服务器的提供商注册一个域名(比如租阿里云服务器,就在阿里注册域名),国内的域名都需要备案,周期可能是6~20天。

云服务器的操作

购买云服务器

同学们可以自行选择服务器,怎么购买这里就不赘述了,基本都是小白操作。推荐主流的运营商:腾讯、阿里等。操作系统推荐选择CentOS 7。

注册一个域名

拥有域名可以方便地让别人访问到你的服务器。例如:在浏览器输入https://www.baidu.com就能直接访问到百度服务器提供的Web服务了。
接下来咱们就开始吧

配置安全组

阿里云默认是不开放80端口的,所以需要手动配置。
打开阿里云官网->控制台->服务器ECS->实例->管理->本实例安全组->配置规则->添加安全组规则

远程连接到服务器

Windows用户可以使用Xshell或者PuTTY。MAC用户可以使用Termius或者直接使用终端。这些软件的使用方法都很简单,连接过程这里就不赘述了。

在建立连接的时候,按照软件的提示,输入服务器的IP地址,用户名密码就行了。用户名一般是“root”。

连接好了之后能看到这样的提示

下载服务器软件

我们用nginx作为我们的服务器,简单几条命令就可以完成。

1
2
3
4
5
#安装:
yum install -y nginx
#启动:
systemctl start nginx
systemctl enable nginx

配置服务器

现在我们可以尝试使用自己的浏览器去访问服务器的公网IP。我们可以惊喜地发现,打开是一个默认的网页。我们现在要做的就是让这个地址指向我们的博客,而不是默认网页。这就需要去修改nginx的配置文件。
如果你是阿里云服务器,配置文件是位于 etc/nginx/ 下的 nginx.conf ,其他服务器可能不一样,需要自己找,可以自己百度一下。并且一定注意:后面的步骤需要把我写的路径换成你自己的路径。(后面会有提示)

找到配置文件之后,不建议直接修改这个文件,我们可以先创建一个新的文件,然后采用include的方式,将新文件包含进nginx.conf(这样做更加安全)
接下来我们开始配置:
在/etc/nginx目录下创建一个文件夹vhost

1
2
3
4
cd /etc/nginx/
mkdir vhost
cd vhost
vim blog.conf

编辑blog.conf文件内容,按i开始编辑

1
2
3
4
5
6
7
server{
listen 80;
root /home/www/website;
server_name 这里填域名如(www.baidu.com) 如果暂时没有域名就填阿里云的公网ip,以后有了再改回来;
location /{
}
}

编辑完成之后,按ESC,再输入:wq即可保存并退出。
打开 /etc/ngnix/目录下的nginx.conf文件。注意:如果是阿里云,直接跟我一样写。如果是其他服务器,可能需要把路径换成自己的路径。
vi /etc/nginx/nginx.conf
仿照下图进行编辑。添加一行写:include /etc/nginx/vhost/*.conf
同样也是按i开始编辑,编辑完成之后,按ESC,再输入:wq即可保存并退出。(后面还有类似的操作,不再赘述)

如果以后还想添加新的网站,可以在vhost目录下新建一个.conf文件。
最后,我们还需要创建博客的目录,跟配置文件中的/home/www/website对应起来:

1
2
3
4
5
6
cd /home
mkdir www
cd /www
mkdir website
cd /home
chmod -R 777 ./www

安装Git和Node.js

安装Node.js

1
2
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install -y nodejs

安装完成后执行 node -vnpm -v ,如果能打印版本号,说明安装成功。

1
2
3
4
[root@a404 ~]# node -v
v10.19.0
[root@a404 ~]# npm -v
6.13.4

安装Git

安装Git可以让我们把个人电脑上的博客推到服务器上。

1
2
3
4
5
6
7
#安装git:
yum install git
#在CentOS中新建一个用户git:
adduser git
#修改用户权限:
chmod 740 /etc/sudoers
vi /etc/sudoers

仿照下图进编辑。添加一行写:git ALL=(ALL) ALL

保存退出之后,再将sudoers文件权限改回原样:

1
2
3
chmod 400 /etc/sudoers
#设置git用户的密码:
sudo passwd git

设置完密码之后一定要记住,以后会用git用户以及密码来推送我们的博客。
切换到git用户,然后在 ~ 目录下创建 .ssh 文件夹:

1
2
3
4
su git
cd ~
mkdir .ssh
cd .ssh

生成公钥文件

1
2
3
4
5
6
ssh-keygen
#此时目录下就会生成两个文件,我们将id_rsa.pub复制一份
cp id_rsa.pub authorized_keys
#这样目录下就会有一个authorized_keys文件,我们修改它的权限
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

到这里,我们的服务器端就完全配置完了!

本地的操作

远程登录git用户,并创建仓库

接下来我们在自己的电脑上,打开cmd(Windows)或终端(macOS),使用ssh方式连接云服务器。输入下面的命令,@符号后面填上自己服务器的IP地址。
ssh -v git@云服务器公网IP
Windows用户可以会出现报错,原因是没有开启ssh,把报错内容copy下来百度。
输入git用户的密码,即可连接。
登录成功后会显示:Welcome to Alibaba Cloud Elastic Compute Service !
现在我们创建一个git仓库,并且新建一个post-receive文件。

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

输入以下内容(按i开始输入,还记得吗?)
git --work-tree=/home/www/website --git-dir=/home/git/blog.git checkout -f
保存退出,并授予该文件可执行权限
chmod +x ~/blog.git/hooks/post-receive
这一步就完成啦,可以关闭窗口。

安装Hexo

首先,安装Node.js,直接在官网下载就行了。
安装完成后,使用cmd查看是否安装成功:

1
2
3
4
a404@404s-MacBook-Pro ~ % node -v
v12.16.1
a404@404s-MacBook-Pro ~ % npm -v
6.13.7

显示出版本号就说明安装成功了。
接下来安装Hexo,打开cmd或终端输入以下命令:

1
2
3
4
5
6
#将npm换成淘宝的服务器
npm config set registry https://registry.npm.taobao.org
# 然后安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
#接下来安装hexo
cnpm install -g hexo-cli

然后我们在自己电脑上新建一个目录用来初始化我们的博客,记录下这个目录的路径,例如是C:/Blog,打开cmd或终端:

1
2
3
4
5
6
#切换到这个目录,如果你的路径不一样,改成你自己的路径
cd C:/Blog
hexo init
#执行成功之后安装两个插件
npm install hexo-deployer-git --save
npm install hexo-server

安装好之后,我们就可以在自己的电脑上查看博客了。

1
2
3
4
#生成静态文件
hexo g
#开启本地服务
hexo s

打开浏览器访问 http://localhost:4000
接下来我们需要把本地的博客上传到服务器上。

部署

首先需要配置_config.yml文件,在刚刚生成hexo的目录下(刚刚举的例子是C:/Blog),找到_config.yml,打开它。
找到 deploy 修改成下面这个样子:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@这里改成服务器的公网IP:/home/git/blog.git
branch: master

保存并退出。
打开cmd,切换到hexo目录。

1
2
3
4
#如果你的路径不一样,改成你自己的路径
cd C:/Blog
#部署到服务器
hexo clean && hexo generate --deploy

部署的过程中需要输入git用户的密码。
等待部署完成之后,再次远程连接到服务器。
在服务器上重新运行 nginx 服务器:
nginx -s reload
到现在,博客就已经部署到你的服务器上了,在自己的电脑上输入服务器的公网IP,就可以访问到你的博客啦!

后续

自定义

现在看到的博客是hexo自动为你初始化的版本,实际上你可以自定义很多东西。
还可以更换主题,我的博客是用的主题是icarus
博客的配置信息都在_config.yml文件中,你可以修改博客的title、subtitle等等信息。网上也有很多换主题的教程,可以自己折腾折腾。

写博客

新建一篇文章的需要在hexo目录下输入:
hexo new "这里写博客的标题"
在hexo目录的/source/_posts/路径下,你就能发现一个 .md 文件,这就是新建的博客,需要使用markdown的语法来书写,网上也有一大堆教程。开始写你的第一篇博客吧!

更新博客

对hexo文件进行任何修改之后,都可以在本地使用hexo s命令(参考前面3.2.的内容),先在本地预览一下博客修改后的效果。
如果修改的结果你还满意,就可以更新到服务器了。
首先在本地执行:hexo clean && hexo generate --deploy
然后在服务器执行:nginx -s reload

留下的坑

  • 2.6. 中blog.conf文件,填写的是IP地址,如果以后有域名了,需要改为域名。
  • 配置_config.yml文件时,也填写的是IP地址。

结语

我自己在搭建博客的时候,也踩过很多坑、看过很多教程。所以我这篇博客写得比较详细,希望可以帮到你。
欢迎在评论区留言。

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×