0%

记录Hexo建站

前言

之前一直想做一个自己的网站,也买了域名,最开始看了果核的建站教程,觉得基于WordPress的非常方便,但是搭建除了买域名之外还需要虚拟主机,费用比较高。作为一名屌丝研究生呢,肯定是要选择便宜的呀,然后问了我队友,决定用Hexo试试。

最初它推荐的是国内的Coding上面建站,访问速度比Github快,我也网站找了很多教程,很多人也都是这样说,因此我开始了很多的摸爬滚打,但是最后还是选择了Github,毕竟是全球最大的同性交友网站嘛,这里提一句在B站找到了一些教程用的Linux,我这里是用的Window10,其实在linux是一样的操作,只是相应的文件目录不一样而已。说到底呢其实主要是记录和学习用的,以后看到自己的博客可能也会觉得自己很有意思的吧。

关于Hexo+Next主题的说明

首先说明我也是参考了大部分的教程,非常感谢在CSDN,知乎,简书,B站和掘金上面看到的相关教程,在结语中有相应的列举,下面的工作都是自己之前做的一些工作截的图,也是比较新的内容。

然后说说Hexo,它是一款基于Node.js的静态博客框架,依赖少、易于安装使用,可以方便的生成静态网页托管在Github上。他的一些指令非常方便的生成静态网页,对于像Github和Coding这样能够生成静态网页的平台而言非常好用,关键在免费!Hexo的常见这是台湾人,因此对中文支持很好,而且全开源,主题非常好看,也可以进行非常多的个性化配置,一条指令可以直接同步到Github和Coding,非常好用。

其次是Next主题,Hexo支持很多主题风格,其中Next主题是Github上Star最多的主题,其一直在更新维护,支持非常多的外部插件和功能选项,关键是非常好看,配置起来也很简单,上手也快。

搭建步骤

搭建步骤我都是非常简洁的去写,但是都会留一些截图具体说明,下面是几个具体的步骤:

  • GitHub创建仓库
  • 安装Git
  • 安装Node.js
  • 安装Hexo
  • 将 GitHub 和 Hexo 关联起来

GitHub创建个人仓库

登录到GitHub,如果没有Github账号,如果没有的话就注册一个。如下图所示创建个人仓库,仓库名应该为:用户名.github.io,[注:这是固定写法],比如我的仓库名为:Homepea7.github.io
仓库

安装Git

Git是开源的分布式版本控制系统,我们网站在本地搭建好了,需要使用Git同步到GitHub上。安装后的效果就跟WIN10的CMD或者Linux的终端一样,都是执行的命令行,具体上传的过程后面会有具体的说明。关于Git的使用网上的教程很多,廖雪峰老师的Git教程Python教程我都看过,需要一点点的基础,不过逻辑和说明都非常的详细,大家可以自己搜一下看看。从Git官网下载Git-安装包 ,下载后安装,在命令行输入git测试是否安装成功,安装成功后,将Git与GitHub账号绑定,鼠标右键打开Git Bash Here。

Git

设置GIT配置信息

安装了Git之后首先要设置user.name和user.email配置信息,具体如下所示(双引号也是需要的):

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub注册邮箱"

生成ssh密钥文件

设置好了以后需要生成SSH密钥文件,方便上传网站。具体操作执行代码如下(双引号也是需要的):

1
ssh-keygen -t rsa -C "你的GitHub注册邮箱"

执行完了之后直接三个回车即可,默认不需要设置密码 然后在目录【C:\Users\XXX.ssh】文件夹下面找到id_rsa.pub密钥,如下所示:
SSH

复制到Github

将前面得到的SSH内容全部复制到Github上面的界面即可。新建new SSH Key,Title为标题,随意填即可,如下图所示:
KEY

在Git Bash检测GitHub公钥设置是否成功:

1
ssh git@github.com

如果下图说明成功:

SSHOK

安装Node.js

Hexo基于Node.js,将官方的文件下下来直接安装即可。

检测Node.js是否安装成功

1
node -v

检测npm是否安装成功

1
npm -v

安装Hexo

Hexo就是博客的框架,这里需要在自己的电脑里创建一个文件夹,这里我命名为Hexo,Hexo框架与以后你自己发布的网站都在这个文件夹中,创建好后,进入文件夹中 -> Git Bash Here -> 使用npm命令安装Hexo。

1
npm install -g hexo-cli

复制代码这个安装时间较长(耐心等待中),我在下载的过程中好几次都下不下来,因此也打包了整个项目文件,下载解压可以直接进行下面的步骤,也包含了Next主题。安装/下载 完成后,初始化我们的博客,输入:

1
hexo init Hexo

复制代码为了检测网站的雏形,分别按顺序输入一下三条命令:

1
2
hexo g
hexo s

复制代码完成后在浏览器输入: http://localhost:4000/ ,可以看到我们写出的第一篇博文Hello World,里面有最基本的几个指令。

将 Hexo 和 GitHub/Coding 关联起来

在Hexo根目录里_config.yml文件成为站点配置文件,打开_config.yml修改deploy(yml文件是根据缩进来判断的,因此一定要注意空格的多少),具体的操作如下所示:

1
2
3
4
5
deploy:
- type: git
repo: git@github.com:Homepea7/Homepea7.github.io.git
- type: git
repo: git@e.coding.net:homepea/blog.git

复制代码保存站点配置,其实就是然hexo知道你要把Hexo部署在哪个位置,很明显,我们部署在我们GitHub/Coding的仓库里,最后安装Git部署插件,在部署之前需要执行以下指令,让Hexo能够正确上传。

1
npm install hexo-deployer-git --save

复制代码这时,我们分别输入三条命令,即可在通过xxx.github.io看到我们的博客了,最后执行下列执行,分别是清理,重建页面和上传仓库三个操作,一般上传之后不能立马看到效果,需要等待十分钟左右。执行的指令如下:

1
hexo clean && hexo g && hexo d

关于网站的美化

说实话我对好看的想法不多,只是想看起来能看,而且给妹子看她们觉得不丑就好了。我把我修改好的next主题打包好了,下载之后直接替换应该也是可以直接使用的。关于网上Next的主题优化的教程很多,相应的图标啊,图片啊什么的也有很多网站,我个人比较喜欢阿里的图标库,免费且很多很好看的图标。这里就不一一列举了,直接Google关键字【Next主题美化】即可。

这里有一点要指出来的就是Next主题自7.6.0版本开始,自动在首页对文章进行摘要描述作为前言文本的功能被移除,请自行安装第三方插件,或阅读 Hexo 有关文档。没有这个功能的话对导致主页上面是文章的全部内容,显得非常的杂乱,相应的处理方法也是非常简单,自行安装【 hexo-excerpt 】即可,如下所示:

在博客目录下执行Git Bash

1
npm install hexo-excerpt --save

在站点配置文件_config.yml添加内容

1
2
3
4
5
6
#自动在首页对文章进行摘要描述作为前言文本
excerpt:
depth: 3 #摘要的内容多少
excerpt_excludes: []
more_excludes: []
hideWholePostExcerpts: true

在主题配置文件_config.yml确认开启

查找字符excerpt_description 改为true,如下所示:

1
2
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

最后执行下列指令,重新生成一下静态网页就可以啦。

1
hexo clean && hexo g && hexo s

域名购买和解析

相信不少同学对生成的网页名称(xxx.github.io 或 xxx.coding.me)不满意,购买自己的域名也是需要相应的解析的,这个步骤比较简单,下面我也做一些介绍。具体分三步,如下:

  • 购买域名
  • 仓库中添加CNAME文件并在文件中填写绑定的域名
  • 添加域名解析

购买域名

前提是前面的利用Github或者Coding搭建已经完成了并且可以访问了,后面的操作才有意义。关于域名的购买,有免费的和收费的,免费的王章也是一搜一大把,但是作为自己个性化的东西我觉得还是付费的安全一些。我买的是阿里云的.top域名,别问为什么,问就是穷,三年才68块软妹币,美滋滋,还有就是.com 和 .cn 的域名需要备案才能使用,.top的域名可以不用实名认证直接就可以用的。阿里云上选取自己的域名然后用支付宝扫码登录和购买就可以了,非常的方便。

仓库中添加CNAME文件并在文件中填写绑定的域名

如果是第一次测试的话直接在仓库中建立名为CNAME的文件(文件名大写,且没有后缀)是完全可以的,在CNAME文件中添加刚刚购买的域名,如【homepea.top】,不能包含:【http://】和【www.】,如下图所示:

CNAME

然后Github会自动解析的,不过还是自己确认以下最好,在最后的Settings里面,向下翻到【GitHub Pages】即可,找到自己的域名即可。

但是注意,如果上传代码的话CNAME文件会丢失的,因此需要最本地的Hexo文件夹下面的【/source】文件夹下面建一个CNAME文件,内容还是前面购买的域名,这样可以保证每次使用 【 hexo d】指令的时候代码仓CNAME文件还在。这点一定要注意,否则上传了代码可能网站还进不去。

添加域名解析

ping你的github.io域名,得到一个IP,如下所示:
PING

登录到阿里云的云解析控制台,如果没有登陆过就添加域名,我是已经添加过了,所以有,然后点击右边的解析设置。
ALIYUN

点击蓝色且显眼的标签“添加记录”,添加两个A记录,用得到的IP,一个主机记录为:“www”,一个为“@”,如图中箭头所示。这样通过homepea.topwww.homepea.top两种方式就都可以访问自己的网站了。
DNS

结语

这个建站的过程花费了接近三天的时间吧,最开始折腾了一点的Coding,到后来用Github的过程,我觉得一路看过来觉得收获还是比较大的,后面如果有哪些有意思的东西,我也会都记录下来。

最后非常感谢我的队友宝藏,还有看到的一些教程,有掘金的菜包包,知乎的SnailClimb,还有最后学习的Markdown书写的高鸿祥,还有参考了很多的教程才有最后的成功,非常感谢。

-------------本文结束感谢您的阅读-------------