这段时间“新型冠状病毒”疫情严重。学校延期开学,我也只能延期去参加实习。阿里云抓住这个机会营销了一波——学生“在家实践”计划。通过学生认证即可免费领取一台服务器(半年)。拿到服务器本来想做一个展示疫情数据的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 | #安装: |
配置服务器
现在我们可以尝试使用自己的浏览器去访问服务器的公网IP。我们可以惊喜地发现,打开是一个默认的网页。我们现在要做的就是让这个地址指向我们的博客,而不是默认网页。这就需要去修改nginx的配置文件。
如果你是阿里云服务器,配置文件是位于 etc/nginx/ 下的 nginx.conf ,其他服务器可能不一样,需要自己找,可以自己百度一下。并且一定注意:后面的步骤需要把我写的路径换成你自己的路径。(后面会有提示)
找到配置文件之后,不建议直接修改这个文件,我们可以先创建一个新的文件,然后采用include的方式,将新文件包含进nginx.conf(这样做更加安全)
接下来我们开始配置:
在/etc/nginx目录下创建一个文件夹vhost
1 | cd /etc/nginx/ |
编辑blog.conf文件内容,按i
开始编辑
1 | server{ |
编辑完成之后,按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 | cd /home |
安装Git和Node.js
安装Node.js
1 | curl -sL https://rpm.nodesource.com/setup_10.x | bash - |
安装完成后执行 node -v
和 npm -v
,如果能打印版本号,说明安装成功。
1 | [root@a404 ~]# node -v |
安装Git
安装Git可以让我们把个人电脑上的博客推到服务器上。
1 | #安装git: |
仿照下图进编辑。添加一行写:git ALL=(ALL) ALL
保存退出之后,再将sudoers文件权限改回原样:
1 | chmod 400 /etc/sudoers |
设置完密码之后一定要记住,以后会用git用户以及密码来推送我们的博客。
切换到git用户,然后在 ~ 目录下创建 .ssh 文件夹:
1 | su git |
生成公钥文件
1 | ssh-keygen |
到这里,我们的服务器端就完全配置完了!
本地的操作
远程登录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 | cd ~ |
输入以下内容(按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 | a404@404s-MacBook-Pro ~ % node -v |
显示出版本号就说明安装成功了。
接下来安装Hexo,打开cmd或终端输入以下命令:
1 |
|
然后我们在自己电脑上新建一个目录用来初始化我们的博客,记录下这个目录的路径,例如是C:/Blog
,打开cmd或终端:
1 | #切换到这个目录,如果你的路径不一样,改成你自己的路径 |
安装好之后,我们就可以在自己的电脑上查看博客了。
1 | #生成静态文件 |
打开浏览器访问 http://localhost:4000
接下来我们需要把本地的博客上传到服务器上。
部署
首先需要配置_config.yml文件,在刚刚生成hexo的目录下(刚刚举的例子是C:/Blog),找到_config.yml,打开它。
找到 deploy 修改成下面这个样子:
1 |
|
保存并退出。
打开cmd,切换到hexo目录。
1 | #如果你的路径不一样,改成你自己的路径 |
部署的过程中需要输入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地址。
结语
我自己在搭建博客的时候,也踩过很多坑、看过很多教程。所以我这篇博客写得比较详细,希望可以帮到你。
欢迎在评论区留言。