hexo+Next+华为云 搭建个人博客

前端 专栏收录该内容
3 篇文章 0 订阅

目录

写在前面

基于Hexo搭建web应用

安装git

安装node.js

安装Hexo

使用next主题

自定义配置

获取公网域名

获取公网服务器 

设置解析

安装启动花生壳

设置解析

开放端口

开放安全组

总结


写在前面

搭建一个个人博客,可以选择自己编写网页代码,也可以直接使用开源的博客框,自己写web代码样式效果总是不尽人意,所以这里推荐使用hexo框架。

部署应用的方式也有很多,有直接在本机run起来就OK了,不需要Internet访问;有依托github服务器部署,但Internet访问速度比较慢;有直接部署在自己的机器上,但开关机频繁不是长久之计, 而且电信给的IP(没域名的情况下)是动态的,一段时间就会变;有购买一个云服务器部署在上面等等,这里推荐使用云服务器,快速方便。

虽然方式多种多样,但是总的来说,搭建一个外网可访问的个人博客,整个过程大体上都可以分为如下步骤:

  1. 编写web应用;
  2. 获取公网域名;
  3. 获取公网服务器 ;
  4. 设置路由解析(把域名指向服务器的IP,通过域名访问网站);
  5. 在服务器上启动应用;

基于上诉步骤搭建,其实选择还是很多的。本着快速,简洁,成本低的原则,这里介绍一种方式:

基于Hexo搭建web应用

首先,这一步是在windows 10下操作的,后续放到linux服务器中。


安装git

官网链接:https://git-scm.com/download/win

长期有效无提取码百度云:https://pan.baidu.com/s/1wQrz19YBkgia8CehzstSjw

安装建议一直点next即可。

安装node.js

官网链接:http://nodejs.org/download/

安装建议一直点next即可。


安装Hexo

Hexo官方文档地址为:https://hexo.io/zh-cn/docs/   内容十分详细,建议参考。
在某处新建一个文件夹,作为站点目录,在这个文件夹内右键,选 `git bash here` ;

弹出框中输入安装hexo 指令

npm install -g hexo-cli

这个指令反应速度可能没那么快,请耐心等;

安装完成可使用如下指令查看版本,安装是否成功

hexo -v

继续初始化,安装依赖,debug模式启动应用,继续顺序输入以下指令:

hexo init
npm install
hexo s --debug

这时可以看到如下成功启动的日志(仅截取部分),默认端口是4000,可访问http://localhost:4000/看是否OK。

到这里,我们成功完成了第一步,但我们发现网站还是非常单调的,这时候我们可以选择使用Next主题

使用next主题

Next官网:http://theme-next.iissnan.com/    内容十分详细,建议参考。

首先要说一个概念:

在 Hexo 中有两份主要的配置文件,其名称都是 _config.yml。 其中,一份位于站点根目录下,主要包含 Hexo 本身的配置;另一份位于主题目录下,这份配置由主题作者提供,主要用于配置主题相关的选项。

为了描述方便,在以下说明中,将前者称为 站点配置文件, 后者称为 主题配置文件

在终端窗口下,定位到站点目录下,clone Next

git clone https://github.com/iissnan/hexo-theme-next themes/next

OK之后,主题文件会放在  '站点目录名称\themes\next ' 下

自此,站点的目录结构如下(我后续修改了一些配置,所以有有些文件前红标,请无视):

打开 站点配置文件, 将 theme 选项的值改为 next,注意要在属性和值之间要加上一个空格,

重新debug启动应用,成功后访问 http://localhost:4000/ 查看。

自此,我们基本完成了下载安装和使用的步骤,接下在,就是根据个人喜好,自定义网站配置。

自定义配置

诚然,我们可以直接使用默认的最简单的初始配置,但这种不是我们想要的,所以自定义配置是必不可少的。

不得不说自定义网站配置也确实是一个比较麻烦的过程,不但要修改配置文件,冲突的时候也需要修改部分样式文件的代码。

自定义配置之后刷新或者重启刷新网站即可看到改动,

使用debug启动,这样改出问题能较方便的看到报错

这里我主要参考了框架的官方文档,强力推荐:

http://theme-next.iissnan.com/    
https://hexo.io/zh-cn/docs/ 

然后参考了部分博客:

hexo的next主题个性化教程:打造炫酷网站 

贴几张我自己的配置配置图,细节就不说了,都不难,就是太多了,最好还是自己摸索。

站点配置文件:

主题配置文件:

 

配置完之后,建议建一个git仓库把代码推上去,这样后续在服务器中就可以直接用git拉下来了。

我自己的git仓库是:https://github.com/JianTang2000/Hexo-next

获取公网域名

---------------------------------------插曲---------------------------------------

为什么需要一个域名? 

首先,为了让网站可以在Internet,说的比较通俗一点。有两种情况:

(1)你上网没有用路由,运营商单独分给你一个IP地址,比如是XX.XX.XX.XX,那你直接可以用你的IP让外网的同学来访问你的网站,比如用的是8080端口,所以形式为:XX.XX.XX.XX:8080。怎么知道自己的IP地址?只要在百度搜索“IP”,第一个就是。

(2)用了路由器,一个路由器带了好几台电脑,这就需要你去路由管理页面去设置一下端口映射,让别人访问你对外暴露的公网IP地址时(或指定特定的端口),通过端口映射,转发到你指定的电脑上。

那么,为什么要域名呢?

我们发现家用宽带的公网IP不是一直不变的,运营商隔几天会重新分配给你一个新的IP地址,难道让别人访问时,重新发一个新的IP给别人?显然这是不合理了。

当然,如果是买的云服务器,一般IP是不变的,但是仍然不推荐直接使用IP去访问。

此时,有一个域名就好啦。购买一个域名,然后设置访问域名的请求会被指定的转发到某个IP上,比如转发到域名转发控制服务器所在的机器本机,这样当域名转发控制服务器所在的机器IP变化时,我们不需要跟着去修改映射关系。

在云端中服务器甚至可能是集群的形式,但仍然可以让供应商提供统一对外的IP,内部设置对我们而言不可见的转发策略。

---------------------------------------插曲结束---------------------------------------

配置完个性化配置之后,我们已经可以在浏览器输入 http://localhost:4000/ 访问网站了,但是要想在外网访问,请继续往下看:

首先明确一点,要实现外网访问,而我这里也并不想花钱,这就得想点办法。

在多番尝试之后,要想比较方便又不花钱,似乎只能走试用这条路。

首先我们下载一个花生壳,官网地址为:

https://b.oray.com/

注册后会赠送一个域名,而且不用实名,不用备案,不用给钱等等

缺点是不能自己命名,有流量限制,但也足够用了,不出意外服务器到期了流量都还没用完咧。

比如说我得到的域名是:2q60XXXXXX ,备用

获取公网服务器 

<---------------->

小插曲.

一开始我并没有找到比较好用的公网服务器,所以我就直接用的我自己的机器,这明显的也是没问题的。这时我在我自己的机器把应用启动,然后设置一个域名到我自己机器内网IP的的解析,如下:

也可以实现外网对我机器的访问。缺点就是我的机器经常开关机,要不停重启应用,就很麻烦。

小插曲结束

<---------------->

最后我选择使用试用版华为云服务器,免费15天。官网地址为:

https://activity.huaweicloud.com/free_test/index.html

链接进去,实名认证之后,可以免费领取各种云资源,领完之后,可以在控制台界面看到它们。

我们这里暂时只用得到云服务器,选择远程登陆。

远程登陆之后就是CentOS的终端界面。首先要登录root,密码可以在管理界面改

然后对服务器进行配置,使得web应用能在里面跑起来,这和之前在windows下的配置其实是一样的,只是系统不同,配置方式有些不同。

安装git 

sudo apt-get install git-core

安装node.js

可参考:centos7 安装nodejs 最新版

wget https://npm.taobao.org/mirrors/node/v11.0.0/node-v11.0.0.tar.gz
tar -xvf node-v11.0.0.tar.gz
cd node-v11.0.0
sudo yum install gcc gcc-c++
./configure
make
sudo make install
node -v

安装Hexo

npm install -g hexo-cli

获取代码

之前在windows上做好了自定义配置并上传到了git仓库,这里使用对应的仓库地址把代码拉下来即可

测试启动

在项目代码所在处输入启动指令,测试是否可以正常启动,如果OK,会有启动成功的对应日志。

hexo s--debug

设置解析

解析,即把域名指向服务器的IP,通过域名访问网站

到此,可以说完事具备只欠东风。但是这个东风似乎还没那么容易来。

因为域名是花生壳送的,云服务器是华为的。如果要在华为的云管理界面设置解析,得在上面买一份域名,还得各种备案证书之类的,我是不乐意的。

要用我这个已有的花生壳给的域名,得域名转入,这也要各种审核之类的复杂操作,我那个白漂的免费域名没办法通过。

似乎僵住了,但是我想到了小插曲里面得方式,我可以在服务器上装一个花生壳,然后设置一个域名到内网主机得解析,就可以完美解决了。

安装启动花生壳

首先,这是  在linux服务器上安装启动花生壳得官方文档 

在服务器中,先下载对应的包,然后

rpm -ivh phddns-3.0-1.x86_64.rpm
phddns start(启动)| stop(停止)| status(状态)| restart(重启)|
phddns reset(重置)
phddns version(版本)

设置解析

浏览器输入 远程管理地址 进入花生壳远程管理页面
输入安装花生壳时生成的SN码及默认密码admin进入,同小插曲中那样设置映射关系。

开放端口

讲道理,这时候应该就大功告成了,但是我发现并没有,而且看不到无法访问的日志,我首先想到的是CentOS系统中,Hexo默认的4000端口是不是没有开,于是把它打开

启动: systemctl start firewalld

查看状态: systemctl status firewalld / firewall-cmd --state 这个命令也可以,只是信息会简单点

停止: systemctl disable firewalld

禁用: systemctl stop firewalld

添加端口
firewall-cmd --zone=public --add-port=4000/tcp --permanent   (--permanent永久生效,没有此参数重启后失效)

添加端口外部访问权限(这样外部才能访问)
firewall-cmd --add-port=5005/tcp

重新载入,添加端口后重新载入才能起作用
firewall-cmd --reload

查看端口
firewall-cmd --zone=public --query-port=80/tcp

查看firewall是否运行,下面两个命令都可以
systemctl status firewalld

开放安全组

打开4000之后,发现还是无法访问,最后发现是因为使用的云服务器,服务器提供商有安全组的概念,即虚机开方端口的安全策略控制。默认的安全组提供开放22和3389端口,没有4000,是这样的:

我选择新建一个安全组,把4000加上。发现成功,可以正确访问。

贴一张成功展示图:访问地址是  http://2q6054n913.qicp.vip:44771/ 

不过云服务器的有效期不长,我没续费就访问不了了。

总结

整个过程还是比较折腾的,从使用框架到部署应用。

比较耗时的是网站的自定义配置,和云服务器上的环境配置。但其实完整的买一套服务器加域名,操作会大大简化,但我的目的不全是建一个站,更多的是试试中间的步骤,所以复杂的步骤也算是一种乐趣。

至此结束。

 

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值