hexo+NexT主题建站过程

本来是想通过搭网站来学习HTML和CSS的,尝试着自己手写框架,结果感觉要死。而且还发现不仅要学HTML和CSS,还有JS、PHP、SQL等一堆东西,所以还是先打算用现成的博客框架来搭网站。然而尽管是这样,还是感觉很艰难,踩了个大坑还没人救,但总算是搭出来了(还在等备案通过),就记录一下供想搭网站的爱好者参考 (其实是为了写个博客爽爽)


配置

  • 系统:CentOS 7.x
  • 博客框架:hexo v6.0.6
  • 基于hexo的博客主题:NexT
  • 域名:阿里云的.top
  • 服务器:阿里云的云服务器ECS

域名和服务器

在配置博客框架和主题之前,从时间安排上考虑,应该先购买域名和服务器并备案。因为购买国内的服务器,备案往往需要十天以上,所以先做好准备工作比较快。如果是购买国外的服务器就没有这个问题,因为国外管得比较松。

服务器购买

国内的提供商一般选择阿里云和腾讯云,其他的我并不清楚。

国外的可以考虑vultr(貌似挺便宜的)。

这里介绍一下阿里云(因为我是在阿里云买的),如果是学生的话可以购买学生云服务器,一年只要114元。

域名购买

这方面看个人爱好,比较常见的顶级域名是.com和.cn,但都比较贵而且.cn不能用于个人。作为一个死肥宅当然是要选择.moe这样的域名da★ze,然而作为一个穷鬼我的钱包并不允许,其实还有.cc这样便宜又极其适合我的域名,但是在中国.cc并不能用 (nmd,wsm) ,所以我选择了便宜又高逼格(大概)的.top。

域名解析

进入控制台,云解析DNS->解析设置->添加记录

主机记录就是域名前缀,常见用法有:

  • www:解析后的域名为 www.cloude-remnant.com
  • @:直接解析主域名 cloude-remnant.com
  • :泛解析,匹配其他所有域名 *.cloude-remnant.com

记录类型:

要指向空间商提供的 IP 地址,选择「类型 A」,要指向一个域名,选择「类型 CNAME」

  • A记录:地址记录,用来指定域名的IPv4地址(如:8.8.8.8),如果需要将域名指向一个IP地址,就需要添加A记录。
  • CNAME: 如果需要将域名指向另一个域名,再由另一个域名提供ip地址,就需要添加CNAME记录。
  • NS:域名服务器记录,如果需要把子域名交给其他DNS服务商解析,就需要添加NS记录。
  • AAA:用来指定主机名(或域名)对应的IPv6地址(例如:ff06:0:0:0:0:0:0:c3)记录。
  • MX:如果需要设置邮箱,让邮箱能收到邮件,就需要添加MX记录。

其它的默认就行。

https设置

左侧菜单打开域名,在对应域名处右侧点击管理,然后点击免费开启SSL证书,填入在域名解析时设置的主机记录(即域名前缀),之后在跳转的页面点击申请,按提示操作,等待签发即可(一般睡一觉就好了233)。

签发之后,可以在SSL证书(应用安全)里查看。

之后如何安装证书可以参考Nginx/Tengine服务器安装SSL证书,注意关于ssl的段落不要照搬,按照自己的情况修改。

这里介绍一下如何从本地端传输文件到linux服务器端,在本地文件所在处打开cmd,输入scp [your_filename] [user]@[your_remote_IP]:/etc/nginx/cert。这里注意由于操作权限的关系,user一般是root。

配置好后重启nginx,尝试利用https浏览就行。

本地博客系统搭建

hexo安装

这里默认读者会用git(要是不会用请去学习一下,不然后面也不用看了)

首先是安装hexo,这里请参考hexo官方的安装帮助

NexT主题安装

这里也请参考NexT官方的安装帮助

NexT主题配置

写作说明

本来hexo有布局和模板两个设置,布局用来设置板块的样式(例如本网站的“标签”、“分类”等都是布局),模板用来设置文章的样式。但因为使用了NexT主题,NexT帮我们把布局都设置好了,只需要在themes文件夹里的_config.yml(主题设置)里启用即可。而模板则需要由我们自己来设置,或者可以不自己设置而使用默认的post模板,下面是我设置的模板。

1
2
3
4
5
6
title: {{ title }}
date: {{ date }}
updated: {{ date }}
comments: true
categories:
tags:

其中的设置可以参考hexo官方的Front-matter,comments功能用于开启评论。

如何创建一篇新的文章请参考hexo官方的写作

本地查看网站效果

请参考hexo官方的服务器、生成器部分。

部署到服务器上

这里是重点,曾困扰了我两天,几乎快崩溃,当然也有可能是我太蠢了XD。前面的我几乎都是给的链接,因为这部分瞎搞搞一下午总能出来,部署到服务器花了我很长时间,翻阅了无数搭建教程,折腾了无数次,所以打算自己写个最简单的教程。

设置安全组规则

安全组规则用于设置允许或禁止安全组内的ECS实例对公网或私网的访问,可以保证服务器的安全。这里可以参考安全组应用案例

首先登入阿里云,右上角进入控制台,在左上角选择云服务器ECS,在网络和安全中选择安全组。如果没有安全组,右上角点击创建安全组。然后加入如下规则

协议类型 端口范围 授权类型 授权对象 优先级
自定义TCP 4000/4000 IPv4地址段访问 0.0.0.0/0 1
自定义TCP 443/443 IPv4地址段访问 0.0.0.0/0 1
自定义TCP 80/80 IPv4地址段访问 0.0.0.0/0 1

4000是一个常用端口,但我好像没有用到,可以不加;443用于https访问,但是现在还没有证书,所以不能不能用https访问,预先设置一下;80用于http访问。授权对象0.0.0.0/0表示允许所有IP地址访问。

网页终端连接

如果是购买的云服务器ECS的话,会自动分配给你一块数据盘并安装好操作系统,所以我们可以直接上手使用系统。远程连接服务器有两种方法,一个是用阿里云提供的网页终端,一个是用电脑自带的cmd或是PuTTy、Xshell。我们先用网页终端进行远程连接,创建好环境后就可以用cmd登陆了,这样会更方便。

在云服务器ECS中选择实例,可以看到我们购买的服务器实例,在实例右侧更多中配置密码/密钥,设置远程连接密码和实例密码(默认是root用户的密码)。之后选择远程连接即可登陆。

环境安装

在服务器端,安装nginx,这是一个轻量级的高性能的HTTP和反向代理服务,用于静态博客托管yum install nginx -y

安装gityum install git -y

创建git环境

  • 创建用户:adduser git
  • 设置密码:passwd [your_password]
  • 切换到git用户:su git
  • 创建hexo文件夹:mkdir hexo
  • 进入hexo文件夹:cd hexo

设置ssh密钥

在本地端,如果我们想不用每次远端登陆都输入密码,可以通过ssh来进行验证。首先生成一个ssh密钥对ssh-keygen -t rsa -C [youremail@example.com]

然后将公钥推送到远端服务器上ssh-copy-id -i ~/.ssh/id_rsa.pub [your_remote_IP]

之后打开cmd,输入ssh git@[your_remote_IP]

如果出现Welcome to Alibaba Cloud Elastic Compute Service !即登陆成功;

如果不成功,考虑以下情况:

  • Windows上没有安装ssh
  • 推送ssh公钥失败,可能是我写的命令错了 (因为我也忘了当初怎么推送的了)
  • 推送到的远端用户不是git

部署网站

之前看其他配置教程,总是让你写hooks,然后我搞了还没卵用,这里讲一种最简单的方法。首先配置hexo的_config.yml,注意不是NexT的

1
2
3
4
5
deploy:
type: git
repo:
vps: git@[your_remote_IP]:/home/git/hexo
branch: master

在远端进入hexo文件夹,将其初始化为一个仓库git init(注意别的教程是将其初始化为一个裸仓库git init --bare),这里介绍一下仓库和裸仓库的区别。

仓库包含项目源文件和.git目录,.git目录里的文件用于记录版本库历史记录;而裸仓库只包含.git目录里的文件。裸仓库是没有工作目录(working tree)的。

git init初始化的版本库用户也可以在该目录下执行所有git方面的操作,但别的用户在将更新push上来的时候容易出现冲突。问题在于提交的分支不能是远端仓库的工作分支,但是往远端仓库中空闲的分支上提交还是可以的。

这里我们就采用建立仓库并在空闲分支上提交的方法。

  • 进入hexo目录cd hexo
  • 建立一个空仓库git init
  • 随便创建一个文件(因为没有文件不允许提交)vim 1.txt
  • 然后保存:wq
  • 提交一次git commit -m [message]
  • 创建并切换到其他分支git checkout [branch_name] -b
  • 然后在本地部署网站hexo deploy
  • 远端切回分支mastergit checkout master
  • 修改nginx的设置vim /etc/nginx/nginx.conf
  • 将其中的root(这里不是指root用户,指根,一般来说在42行)指向/home/git/hexo(即你的仓库目录)
  • 最后重启服务让nginx生效service nginx restart
  • 在本地浏览器输入http://[IP]测试一下,能正常显示即成功

但这样会遗留一个问题,每次部署都需要来回切换分支,可能还是比较麻烦。

总结:可能还是我比较蠢

增加功能和美化

统计文章阅读量

参考NexT主题下,用Leancloud统计文章阅读量

评论系统

参考Valine的快速开始

如果要邮件提醒有人评论,可以参考Valine的邮件提醒

设置背景

参考【持续更新】最全Hexo博客搭建+主题优化+插件配置+常用操作+错误分析

增加Live2D看板娘

参考hexo-helper-live2d

然而会挡住我的自定义背景,而且原生支持的live2D并不好看(小声bb),所以我没有开启这个功能。本来是打算自己折腾个海王星的诺瓦露出来,然而自己做一个node包很麻烦,就放弃了。

其它

添加下载文件

被搜索引擎收录

参考hexo高阶教程:想让你的博客被更多的人在搜索引擎中搜到吗?,但是这篇关于sitemap的生成讲得不清楚。

如果要生成sitemap,参考hexo做SEO(添加sitemap和baidusitemap)

待更新