hexo搭建个人博客--基础篇

最新推荐文章于 2024-07-06 22:56:54 发布

Alvabill

最新推荐文章于 2024-07-06 22:56:54 发布

阅读量514

点赞数

分类专栏：建站文章标签： hexo github

本文链接：https://blog.csdn.net/weixin_38796712/article/details/79234849

版权

建站专栏收录该内容

3 篇文章 0 订阅

订阅专栏

写在前面

基于hexo搭建个人blog的文章在网上已经有很多了，不过由于时间的原因有很多已经不再适用或者说留下了很多坑，本文是基于个人这些天搭建的经历，踩了无数坑把这些坑给填上后总结出的目前最简易也是最靠谱的方法，相信小白看着也能直接搭建一个漂亮美观可随时访问的个人博客，嘿嘿，先晒一晒自己的成果，个人还是比较满意的–我的blog。

hexo介绍

官网上的描述是Hexo是一个快速，简单而强大的博客框架。您可以使用Markdown（或其他语言）编写文章，Hexo可以在几秒钟内生成具有美丽主题的静态文件。

简单来说它就是一个主打简单快速的博客框架，这个可以对比下知名度更高一些的WordPress，相对来说后者更强，不过更适合有服务器的人使用，比如你去购买个阿里云什么的建站那种，不过我们这次追求简洁，不想在服务器折腾，后文会介绍具体在哪里架设我们的博客，而且hexo可以魔改…给爱折腾的人用也很不错，另外hexo基于现在大热的nodeJS，可以配合学习一下，这也是我选择它的出发点之一。

正文

声明一下，本教程主要针对windows用户，其他平台用户在某些操作上可能有些不一致，可以在评论区或者右下角留言交流。

如有需要本教程会持续更新。

Git安装

下载并安装git（安装就是一直next就可以）

git主要用于版本控制，另外这里hexo的操作很多都需要在git bash进行，不然会出现奇怪错误，想要了解更多git知识可以参考以下链接：Git教程–廖雪峰网站。当然，直接跟着本教程走也是完全没问题的。

NodeJS安装

关于NodeJS的一些介绍可以稍微看一下这篇文章–NodeJS简介，在本教程中NodeJS主要用于管理下载第三方包，例如hexo，而这些工作都是npm在负责的。
1.下载并安装NodeJS
这里选择最新的稳定版本v8.9.4安装过程可以一路next，不过推荐在选择安装路径时选择D盘，然后记住路径名，一般情况下是D:\Program Files\nodejs\
安装后输入Win+R输入cmd打开控制台输入以下代码：

node -v
npm -v

如果返回版本号即安装完成，否则就需要配置环境变量（参考步骤2中的图片）再测试

2.NodeJS配置
配置npm
我们要先配置npm的全局模块的存放路径以及cache的路径，最好在nodejs安装路径下建立”node_global”及”node_cache”两个文件夹。如下图：

启动cmd，输入

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

配置环境变量（win10可以通过小娜查询“环境变量”找到入口），如下图打开

框中的三条记录是必须的（路径改为你们自己的路径）

测试是否配置完成，可以安装express来进行测试，打开cmd，输入

npm install express -g

完成后在node_global目录下查看是否存在express目录即可。

hexo安装

打开git bash，为了避免出现错误后面的操作在git bash进行
首先新建一个存放hexo文件的目录，例如在D盘根目录新建hexo文件夹，然后cd到该目录下，开始安装

$ cd D:hexo/   #换成你的目录
$ npm install -g hexo-cli  #安装hexo脚手架
$ hexo init    #Hexo自动在当前文件夹下下载搭建网站所需的所有文件
$ npm install      #安装依赖包

$ hexo g       #完整命令为hexo generate，生成静态文件
$ hexo s       #完整命令为hexo server，启动服务器，用来本地预览

用浏览器访问http://localhost:4000/，这时就可以看到了一个比较漂亮的博客了，这个是hexo的默认主题landscape，而我们会使用的是NexT主题，这个在后面会说到如何配置。

Github/Coding

本地博客搭建好了接下来是要把它部署到网上，这里可以选择github和国内的coding平台，后者在打开自己网站时会跳出广告，前者访问速度比较慢，大家自行选择，然后我现在的话是两个同时在使用。
注册部分我就不说了，如果两个都注册的话建议名字取相同的。下面详细说一下github和coding的Pages服务如何创建
1.Github Page
打开github主页，新建仓库（repository），这里要注意仓库的名称，比如我的帐号是alvabill，那么仓库名称应该是：alvabill.github.io。

这里警告是因为我已经创建过该仓库

2.Coding Page
Coding的操作和github相差无几

新建一个名为{user_name}.coding.me 的项目。{user_name} 指您本人的用户名，例如我的用户名为alvabill

自己的报错，用一下别家的图了

配置SSH

以上过程完成后就是把hexo生成的静态页面上传了，以为要结束了吗，还没呢，这里还需要配置SSH，首先要本地生成公钥私钥

$ ssh-keygen -t rsa -C "你的邮件地址"

引号里面的内容输入你的邮箱地址，然后回车，会提示你文件保存的路径，这时候按回车键确认，然后会提示你输入密码，输入即可（输入密码是看不到的），然后会确认输入一次，就可以在刚刚的路径看到生成了两个文件，一个是id_rsa，另一个是id_rsa.pub，用sublime打开id_rsa.pub然后选中里面的全部内容，复制下来。
打开GitHub或Coding的SSH页面
Github：setting–>SSH and GPG keys–>New SSH key

Coding：

发布

打开D:\hexo，用sublime打开_config.yml文件，文件最后可以看到

deploy:
  type:

修改（注意要换上自己的链接）

deploy:
  type: git
  repository: git@github.com:yourname/yourname.github.io.git   #发布到github
  #repository: git@git.coding.net:yourname/yourname.git            #发布到Coding
  branch: master

或者同时发布到两个平台：

deploy:
  type: git
  repository:
    github: git@github.com:yourname/yourname.github.io.git,master
    coding: git@git.coding.net:yourname/yourname.git,master

ctrl+s保存修改。
打开git bash在当前目录输入以下命令：

$ hexo d       #完整命令为hexo deploy，将本地文件发布到page服务平台上

如遇遇到异常可以

$ hexo clean && hexo g
$ hexo d

如果出现以下异常

ERROR Deployer not found: git

尝试输入以下命令，然后重新执行刚刚的两条命令

$ npm install hexo-deployer-git --save

这时候如果弹出一个对话框，输入在github/coding上面的用户名和密码即可
这时候我们就可以在浏览器输入https://yourname.github.io 或者https://youname.coding.me 打开

更改主题

D:\hexo目录下的theme文件夹下存放的就是博客的主题，hexo便是依据主题来生成静态文件的，挑选主题可以在官网https://hexo.io/themes/ 查找，根据自己的喜好来挑选。
下载主题的方式如下：

$ cd your-hexo-site  #eg:D:\hexo
$ git clone {主题链接} themes/{主题名称}

启用主题的方式也很简单
sublime打开上文提到的hexo目录下的_config.yml，ctrl+f输入theme查找这个关键字，修改其主题名称为下载的主题名称即可。

theme: {主题名称}

以本人使用的next主题为例：
下载最新版：

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

修改hexo目录下的_config.yml

theme: next

具体可以到主题官网看看–NexT

域名申请

经过以上过程我们已经实现了一个可以即时访问的个人博客，不过我们想要的是一个更酷的更个性化的域名，下面就看一下如何申请一个免费的域名然后配置到我们的github/Coding Page上面，实现以个人域名访问自己的博客。
1.免费域名
这里推荐一个网站Freenom，点进去注册，注册之后按照以下步骤进入下面这个页面，然后就可以在输入框处输入你喜欢的名字查找域名了

既然是个人博客，那当然还是找自己昵称啦，例如我的昵称，查找有免费的域名后就点击加入购物车~

最后别忘了拖到最后点击确认购买

这里可以选择免费一年，域名快到期前的一个星期会发邮件提醒续期，续期也是不要钱的，也就是可以一直免费使用了。点击continue确认然后填写一堆信息后就能获取到了。

回到初始界面后查看自己的域名，可以看到刚刚购买的域名已经在列表下了

2.使用第三方DNS解析工具
虽然freenom自身也能进行DNS解析，但是毕竟不适合国内的朋友使用。所以我们使用国内的DNSPOD、CloudXNS等第三方DNS工具。
这里介绍如何使用CloudXNS管理，一如既往的先注册，这里好像需要身份证验证了，挺麻烦的，不过为了我们的域名能好好的用上，还是只能选择原谅他啊。
进入控制台–>我的域名，点击添加域名，例如刚刚弄到手的alvabill.ga

然后会跳出这么一个提示

意思就是要到freenom那边把域名接管过来，好的，我们先记住那一段蓝色字

lv3ns1.ffdns.net
lv3ns2.ffdns.net
lv3ns3.ffdns.net
lv3ns4.ffdns.net

打开freenom刚刚的那个界面，点击对应域名的manage Demain按钮进入域名管理界面

进入NS服务器管理界面

选择Use custom nameservers (enter below)，然后把刚刚记录的那四段字符串复制粘贴进去，点击change nameservers

enter description here

完成，回到CloudXNS，等半分钟刷新一下就有了，可以现在就点击开启，或者之后配置好了点击开启。

域名绑定Page服务

1.添加记录
如下为我的域名的记录，记录值分别为coding page和github page的网址，你们只需要修改这两个值，其他和我的一样配置便可。如果是只使用一个page服务就只需要两条对应的记录，然后记得要把线路类型都设置为全网默认哦。

2.配置Page服务
GitHub：
进入{yourname}.github.io仓库–>Settings，向下找到以下界面，在红框处填入你的域名

到D:\hexo\sourse目录下（即你安装hexo的目录下的sourse目录下）新建文件CNAME，用Sublime打开填入你的域名，如alvabill.ml，保存。
然后到D:\hexo目录下用sublime打开_config.yml，ctrl+f查找skip_render，然后改为

skip_render:
  - README.md  
  - CNAME

这个指令就是可以跳过CNAME和README.md文件，防止每次hexo重新渲染把它们清除掉。这里的README.md可有可无，最好还是有，因为每个github项目都需要一个readme文件，添加位置和CNAME一样。

Coding：
进入项目–>pages服务，填入域名，绑定~

最后重新布置项目：

$ hexo clean && hexo g && hexo d -g
$ hexo g && hexo s   #如需本地预览，执行这一条

浏览器输入你的域名回车，就可以成功访问你的个人博客了！

总结

摸索了一段时间才完成的，还是很有成就感的，比较遗憾的是并没有很好地记录下自己搭建这么一个网站的过程，教程写完后总感觉漏了什么，当时遇到的问题应该还是挺多的，再加上重新写博客时无法再次亲身经历那种由无到有的过程，难免会有不少疏漏的地方，欢迎大家在评论区或私戳我进行讨论，遇到什么问题也欢迎提出，我会及时地进行修正的。
下一篇文章将介绍如何优化以及个性化Next.mist主题。如果你也喜欢这个主题的话，可以继续关注我的更新~~