什么是hexo

  Hexo最初是由Tommy Chen在2012年创建和维护的。自那时以来,它已经帮助成千上万的人建立了他们梦想的网站/博客。圆圆小屋就是利用这种技术搭建的,就买了个域名甚至你都可以不需要域名。
安装node.js

  首先要先把环境搞好,再来搭建,hexo依靠的是node.js来生成静态页面,如果你不会node.js怎么办,没关系,找我说的做,很简单,直接点我去node.js官网下载你的版本,这里就以win版的为例了。
下载node.js
  我下载的是安装版的,就直接开始安装吧:
安装完成
  上图就是安装好了的样子
安装git

  我们既然不要服务器,那么我们就要把我们的代码托管到github或者码云等这些平台,后面会说如何将hexo博客托管到github和码云双平台加速。既然要托管到github我们就要用git来上传上去,点我去git的官网下载:
点击此处下载
  下载好之后还是安装,有很多的设置,基本上全都默认下一步,下一步即可,安装完成之后如下图:
安装完成
检查git和node.js是否安装成功

  同时按下 Win 键和 R 键打开运行窗口,输入 cmd ,然后输入以下命令,有相应版本信息显示则安装成功,若不正确可以卸载软件重新安装,此外若安装成功,在桌面右键鼠标,可以看到菜单里多了 Git GUI Here 和 Git Bash Here两个选项,第一个是图形界面的Git操作,另一个是命令行。  

git --version
node -v
npm -v

  如图所示是安装好的样子:
安装成功测试

安装Hexo

  准备工作就这些,现在我们直接步入正题,安装hexo,我们需要在我们的本地找一个位置,创建一个新的文件夹(如:/hexo),博客相关文件将储存在此文件夹下,在该文件夹下右键鼠标,点击 Git Bash Here,输入以下 npm 命令即可安装:

npm install hexo-cli -g
npm install hexo-deployer-git --save

  输入上面的命令就安装完成了。过程如图:
安装
  之后我们还要在将我们的hexo初始化,我们要在刚才的文件夹里面再新建一个文件夹(/hexo/blog),然后在该文件夹下面再次右键鼠标,点击 Git Bash Here,输入下面的命令初始化hexo:

hexo init 

  这一步相当于是从github克隆来的,速度会有些慢。
初始
  装完之后打开刚才的文件就是上图的样子。继续右键鼠标,点击 Git Bash Here,然后我们再输入下面两条命令:

hexo g
hexo s

  这时候会出现如图所示的提示:
启动成功
  这个时候我们打开我们的浏览器输入http://localhost:4000然后就可以查看我们的hexo博客了,注意,有这个提示之后不要关闭你的命令窗口,这相当是一个进程,如果你关闭了窗口你将无法看到下面的图片:
本地浏览器访问

书写一篇文章

  到此我们的hexo博客就搭建好了,注意这个博客是没有后台的,我们的管理方式就是在本地来管理,比如发表一篇文章,我们可以输入命令:

hexo n "文章标题"

  这样来创建一个新的文章。太麻烦? 我们可以直接在source_posts这个文件夹下面新建一个.md后缀的文本文档,用Markdown来书写你的博客。例如自带的就有一篇hello-world的文章。至于什么是Markdown,这里稍微提一下,这是一种语法,比如我现在写这篇博客就是采用的Markdown来写,它很通用,如果你不会换行,加粗,等等操作,推荐几个好用的Markdown编辑器,网页版有小书匠编辑器,还有github的atom编辑器(https://atom.io/)这个下载比较慢,有时候官网都崩了,还有就是博主正在用的vscode,嘿嘿没想到吧,vscode也可以写Markdown。前面的小书匠编辑器适合新手朋友刚刚接触Markdown的人用,后面两个对新人不太友好需要安装一些好用的插件。自己慢慢摸索吧。另外给点资料:
  文章标题,标签,分类,封面图片,摘要等,可以在 Front-matter 里面配置(Front-matter 是文件最上方以 — 分隔的区域,用于指定个别文件的变量,官方文档: ),举个例子:

---
layout: 页面布局(配合主题文档使用)
title: 文章名称
date: 文章日期
comments: 文章是否开启评论
photos: 文章封面图(仅部分主题支持)
tags: 
  - 文章标签一
  - 文章标签二
categories: 文章分类
description: 文章描述,即要在首页显示的摘要(仅部分主题支持)
---

这里是摘要

<!-- more -->

这里是正文

更换一个主题

  文章说完了,再来说说主题怎么更换。我们可以去hexo的官方主题,讲道理这个里面的主题真心都不错,我们随便选择一个主题之后点击打开看看效果,如果你喜欢的话直接下拉到页面最底部的版权信息处:
点击主题
  来到了主题的github主页,然后复制它的主题项目地址:
复制地址
  然后打开刚才我们的hexo文件夹中的themes目录,会看到里面有一个landscape这个是默认的主题,我们就在/hexo/blog/themes里面输入下面的命令(输命令的方式和刚才一样,后面就不赘述。但是一定要保留你hexo s的这个窗口,重新打开一次来输入)把主题克隆过来:

git clone 此处填写你刚才复制的主题地址

  比如安装我刚才看到的antiquity主题,就输入:

git clone https://github.com/yiluyanxia/hexo-theme-antiquity

  等它克隆好之后就会看到主题文件夹里面多了一个名字叫做“hexo-theme-antiquity”的文件夹,这个就是我们的主题文件。
主题文件夹
  我们进到这个主题文件夹然后打开看到有一个“_config.yml”的文件,这个配置文件就是关于我们主题的配置文件。我们后续要修改什么友情链接呀,归档文章之类的都在这个文件上修改。建议在修改之前备份好,那么我们如何启用这个主题呢?
  回到我们的hexo/blog主目录下面,注意这里也有一个“_config.yml”的配置文件,这个配置文件是我们的hexo博客的主配置文件,用它来说明主题到底用哪个的。:
主配置文件
  我们打开这个配置文件,找到下面的语句:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape

  聪明的小伙伴已经知道怎么做了,将我们默认的landscape改成你的themes文件夹里面git到的这个主题文件夹名字,注意注意!!!必须要文件夹的全名,你可以康康默认的landscape就是原文件夹名。改好之后我们可以将我们的博客关闭重新打开一下(直接将INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.这个窗口关闭)然后输入:

hexo g
hexo s

  这样就OK了, 再次打开浏览器就能看到网站已经改变成了我们的主题了:
修改后
  剩下的那些鸡毛蒜皮的小细节就需要各位在主题配置文件中慢慢摸索了。
  到此为止我们本地端写博客文章,改主题基本没问题了,再说一点,如果你的网站中包括你的博客文章里面需要上传图片的时候,你可以点我去学习jsDeliver+github实现免费CDN,这篇文章可以将你的图片转成一个加速的url,因为你布置你的网站背景,文章内容图片,都是用的Markdown语法,所以你的图片基本都是一个一个的链接。

怎么让人们看到我的网站

  重点来了,你的博客只能localhost:4000让你自己看到,而你的朋友们看不见,不要着急,我们甚至连域名都不需要帮你搞定,我说的免费的博客,从图床到主题,到网络域名,服务器都是要免费才对得起标题,那么怎么把我们的网页都让大家看到呢,这就需要我们将博客部署到Github Pages上
  首先要注册一个github账户,如果你看不懂英文没关系,用你的浏览器去翻译,点击 Sign Up 注册账户。注册完成之后点击右上角的加号<font color='red'>New repository</font>开始创建,步骤及注意事项见下图:
注意事项
  用户名是一开始创建账号时定好的,无法修改,项目名字必须必须用<font color='red'>用户名+.github.io</font>格式才行。我这里有这个项目了所以显示不行。
  紧接着我们要配置一个ssh秘钥,不然你想想你的博客在github上任何人都可以去上传了?只有配置好 SSH 密钥后,我们才可以通过 git 操作实现本地代码库与 Github 代码库同步,在你第一次新建的文件夹里面(/hexo) Git Bash Here 输入以下命令:

ssh-keygen -t rsa -C "your email@example.com" 

  引号里面填写你的注册邮箱地址,比如我的是1461103297@qq.com,之后就会出现:

Generating public/private rsa key pair.  
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa):  

  到这里可以直接回车将密钥按默认文件进行存储,然后会出现:

Enter passphrase (empty for no passphrase):  
//这里是要你输入密码,其实不需要输什么密码,直接回车就行 
Enter same passphrase again:  

  接下来屏幕会显示:
公钥创建成功
  运行以下命令,将公钥的内容复制到系统粘贴板上

clip < ~/.ssh/id_rsa.pub

  现在在你的github账户上添加你刚才的公钥,两边配对即可,登陆 GitHub,进入 Settings:
在你的头像处
  然后点击右边的SSH and GPG keys
SSH and GPG keys
  开始新建一个:
新建
  title名字自定义,然后内容直接Ctrl+V将你刚才复制的粘贴到此即可,如果你的剪贴板内容改变了,再次执行即可:
key
  最后测试一下,输入下面的命令,不要改变任何东西:

ssh -T git@github.com

  成功的话就显示yes
成功
  现在要配置我们的git信息(用于上传),Git 会根据用户的名字和邮箱来记录提交,GitHub 也是用这些信息来做权限的处理,输入以下命令进行个人信息的设置,把名称和邮箱替换成你自己的,名字可以不是 GitHub 的昵称,但为了方便记忆,建议与 GitHub 一致,还是在刚才的地方输入下面命令:

git config --global user.name "此处填你的用户名"  
git config --global user.email  "此处填你的邮箱"

  到此为止 SSH Key 配置成功,本机已成功连接到 Github,只差把我们的网站同步上去即可,登录 Github 打开自己的项目 your name.github.io
注意每一步操作
  注意我的每一步操作。复制完之后,打开你创建的 Hexo 文件夹(/hexo/blog),右键用记事本(Notepad++或者VS code等都可以)打开该文件夹下的 _config.yml 文件,也就是我们刚才说的那个博客的主配置文件,而非主题的配置文件,然后按下图修改<font color='red'>_config.yml</font>文件并保存:
英文冒号
  在 /hexo/blog 文件夹下分别执行以下命令

hexo g
hexo d

  执行完之后会让你输入你的 Github 的账号和密码,如果此时报以下错误,说明你的 deployer 没有安装成功

ERROR Deployer not found: git

  需要执行以下命令再安装一次:

npm install hexo-deployer-git --save

  再执行<font color='red'>hexo g -d</font>,你的博客就会部署到 Github 上了,访问的时候只需要输入:https://你的用户名.github.io,比如我的就是:https://yuanyuan999.github.io
  我们每次写完文章都要使用hexo g -s在本地检查一下,然后在输入hexo d -g直接推送到服务器。

给你的博客配置个性域名

  白嫖党注意,现在进入收费区域了
  其实如果你不想买也没关系,你可以用github给你的免费域名,但是太长了,不好记。都是二级域名
  如果你有八九块钱可以去腾讯云或者阿里云买一个域名,一年也就几块钱,购买过程自行百度,买好之后我们去阿里云的域名解析台(其它云平台同理):
DNS解析
  点击设置,有两个方法
  方法一:就是点击添加记录,需要添加两个记录,两个记录类型都是 CNAME ,第一个主机记录为 @ ,第二个主机记录为 www,记录值都是填你自己的博客地址(比如我的是:yuanyuan999.github.io),保存之后域名解析就完成了!(主机记录有 @ 和 www 能保证URL加不加 www 都能访问),CNAME类型就是将一个域名解析到另一个域名,就是把我们github那个很长的解析到这个短的上面。两条主机记录@就是泛解析,比如就是xiangxiang521.com而www就是访问的时候加一个www.xiangxiang521.com。
  方法二:两个记录类型为 A ,第一个主机记录为 @ ,第二个主机记录为 www,记录值都为博客的 IP 地址,IP 地址可以 cmd 中输入 ping 你的博客地址 获得(比如我的:ping yuanyuan999.github.io),保存之后域名解析就完成了!
  为了使 GitHub 接收我们的域名,还需要在博客的根目录下添加一个名为 CNAME 的文件(注意不要加.txt,没有任何后缀名!),这个文件放到 blog 文件夹的 source 里面,(比如我的是:/hexo/blog/source),文件里面填写你的域名(加不加www都行),比如要填写我的域名,文件里面就写:www.xiangxiang521.com 或者 xiangxiang.com,经过以上操作,别人就可以通过 www.xiangxiang521.com 、xiangxiang521.com 、yuanyuan999.github.io 三个当中任意一个访问我的博客了!你的也一样!
  加不加www的区别就是,如果你不加www,那么无论是访问 https://www.xiangxiang521.com 还是 https://xiangxiang521.com ,都会自动跳转到 https://xiangxiang521.com,如果你填写的是带了www那么不管你输入什么都会跳转到带了www的网站上去,对了你改了CNAME就要记着这条上传命令哟hexo g -d
总结

  整体下来你奇怪的知识增加了,不用服务器不用域名部署一个博客出来,其实这个就是利用了github Page的方便之处,可以免费托管静态网页,而node.js生成静态网页很厉害,我们就用git把我们本地生成的静态网页上传上去,如果这个hexo是个PHP的那就凉凉,写博客的文章语法就是Markdown的,这个语法在很多平台都是通用的。就像你的学英语一样很实用。只需要找一个简单的编辑器,然后写好文章,每次本地预览一下检查错别字之后就可以扔上去了。不过github在国外,访问时会慢一些,不过你可以把你主题的那些JS和CSS都扔到免费的github+jsDeliver的CDN上面,如果大家觉得这篇文章不错,你也会搭建了,可以试试做一个我的那个爱情小屋去给你喜欢的人表白吧。如果本文反响不错我会考虑教大家把网站放在国内的coding和国外的github上双HTPPS加速。效果如图:
站长之家ping
  OK,废话有些多,基本上算是小心得吧,我自己折腾爱情小屋只花了三天时间,大家加油呀~~~
附带下载链接

  鉴于有的小伙伴下载文章中的软件较慢,这里提供了一个下载链接
  git点我下载(64位)
  git点我下载(32位)
  node.js点我下载(64位)
  node.js点我下载(32位)

最后修改:2020 年 04 月 02 日 10 : 41 PM
请俺喝杯咖啡呗