在上一期 ，我向大家介绍了如何使用Github Pages ，但如果仅仅几个字的html作为个人主页，即使再多华丽的词藻也不会让人眼前焕然一新，于是，这个能体现html语言非常不错的装X工具就出现了，它就是大名鼎鼎的Hexo ！第一部分 前期的准备工作，包括工具安装、用户配置、本地调试和域名发布。
第一步 安装一下两个工具及注册Github （已有请忽略）
第二步 安装后在所有程序中找到”Git “文件夹，点击后打开”Git Bash “，之后输入以下代码:
1 2 git config --global user.name "yourname" --global user.email "youremail"
注:引号内的”yourname”需改为你的Github注册名称，”youremail”需改为你的Github注册邮箱 ，执行后可通过git config user.name&&git config user.email检查一下输入对错。ssh-keygen -t rsa -C "youremail"，然后一路回车，然后打开C盘→用户→你的用户名称，如果对了的话可以看到有一个叫做.ssh的文件夹，没有则切换，进入，然后用记事本打开”id_rsa.pub”，复制文件中的所有内容，然后打开这个网址 ，名称随便起，然后把刚刚复制的内容粘贴进去。
这里简单说一下ssh的工作原理，不愿意听废话的可以略过。简单来讲，ssh就是一个秘钥，其中，”id_rsa”是你这台电脑的私人秘钥，”id_rsa.pub”是公共秘钥，把公钥录入git托管平台(如Github、Gitlab、Bitblucket等)，当你链接自己的账户时，它会根据公钥验证你本地的私钥，当两个文件能够相互匹配时，文件就能顺利通过git读取和写入。
第三步 在git中输入npm install -g hexo-cli，hexo的命令行模块就已安装，然后，关闭该窗口。接着，选择一个读写速度快的硬盘的空文件夹(没有请新建)，然后右键→Git Bash Here，然后输入hexo init和npm install，之后的文件框架如下：
node_modulesnpm依赖包
public生成文章的位置(可能会没有)
scaffolds新建文章/页面/草稿的模板
source存放文章和生成文件的位置，里面除了有_前缀的三个文件夹其余文件均会被复制到生成的网址下
themes主题文件存放处
_config.yml博客的配置文件(全局)
1 2 3 4 5 6 7 8 9 title : 谢佳宇的个人主页 subtitle : '' description : '谢佳宇的个人主页' keywords : 谢佳宇的个人主页 author : 谢佳宇 language : zh-CN timezone : 'Asia/Shanghai' url : https://xiejiayu.ml root : /
这里简单强调一下ymal的格式：
先是变量名称，然后是英文冒号加上一个空格，然后是变量值。举个例子，比如变量名称是title。变量值是test，则需要的代码为title: test 还有一点，就是缩进必须绝对一致，也就是一栏的子栏的空格数必须一致，否则无法识别，在以后会经常提到，这里不做演示。 接着转到文件下方deploy:变量，将代码改为如下所示:
1 2 3 4 deploy: type: git repo: https: branch: master #git仓库分支
注:若要添加多个仓库，请将repo变量改成以下形式，注意缩进！ :
1 2 3 repo: github: https: gitlab: https:
第四步 首先，在git中运行hexo server命令，等待执行完毕后打开http://localhost:4000 可以在本地查看网页，大概长这样，如下图。然后转到git，输入Ctrl+C退出。接着，在git中输入npm install hexo-deployer-git --save安装git部署插件。然后输入hexo clean、hexo generate、hexo deploy，等待几分钟，然后转到上期教程中提到的你的网址https://yourname.github.io (yourname为你的Github注册名称)中，你会发现，界面焕然一新。至此，第一部分完成。
第二部分 hexo进阶配置
第一步 打开这个网址 ，选择一个你喜欢的主题，可以预览一下，博主选用的是ppoffice 的icarus 主题，我的博客 本身就是个很好的Demo，接下来，分享一下我的博客配置方法，不愿意听我墨迹的可以看icarus官方配置教程 ，其他主题请参见其博主写的教程。
1 git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
hexo config theme icarus将主题切换为icarus，然后hexo s(hexo server的缩写)运行一下，你会发现，一堆报错，如下图。这个时候不要慌，简单读读会发现是少了一些依赖包，那就安装呗。复制绿色的字，输入后回车，再次hexo s，问题迎刃而解，本地运行的网页大概长这样，如下图，看到这一页时，恭喜你，你已经成功一半了。
第二步 删除博客目录下的”_config.landscape.yml”文件，然后打开”_config.icarus.yml”，接下来，我重点解释说这个配置文件。
首先将”logo”处一个回车，四个空格，然后输入text: xxx的个人主页，这里对应着网站左上角的标题，不建议改成图片，很难看。然后进入themes/icarus/source目录，然后删除”img”这个目录，然后复制”js”目录，然后进入博客的”source”目录，粘贴，然后新建一个”img”目录，放入你的网站favicon.ico(也就是标题旁边的小图标)和avatar.jpg(也就是头像，图片尺寸必须为128×128)，然后将配置文件中”head”项中的”favicon”后的文件路径改为/img/favicon.ico 接着，跳到”navbar”项(大概在100行左右)，可以看到”menu”项，也就是网页的菜单栏，这里可以简单添加几个，比如友链、留言之类，我的配置如下:1 2 3 4 5 6 7 8 menu : 归档 : /archives 标签 : /tags 分类 : /categories 日记 : /diary 留言 : /message 友链 : /friends 关于 : /about
hexo new page about即可添加关于页面，逻辑就是这样，page xxx中xxx的名称是页面的英文名，加了几个页面就新建几个页面。这里强调一点：tags、categories、about等原有页面也需要手动创建，否则后续生成文章时一堆报错。 接着，简单配置一下个人社交信息。翻到临下面的”links”栏，按照原来的格式更改即可，这里有点小知识，链接的图标(icon)采用了Font Awesome 的小svg，在hexo采用fab/fas+fontawesome代值的形式显示图标，图标可自行挑选，将fa-后面的内容更改即可，我的配置如下:1 2 3 4 5 6 7 8 9 10 links:icon : fab fa-githuburl : https :gitlab :icon : fab fa-gitlaburl : https :RSS :icon : fas fa-rssurl : /atom.xml
接着往下翻，翻到大概170行左右，转到”comment”栏，也就是评论区设置。默认配置是Disqus ，disqus任何功能的访问都需要翻墙VPN，故不建议使用。作为一名合格的程序猿，github账户是必备的东西，所以我们可以利用github作为登录账户获取用户头像和名称信息来制作评论啊，那有人就问了，这多麻烦啊，所以，大佬就来了，做了一个基于github的评论系统——gitalk ，省去了99%的搭建过程，只需几个访问令牌即可使用。点此 新建一个新的Github OAuth应用，然后名称随便起，两个url都填你的个人主页地址，然后创建。接着，点击Generate a new client secret来创建一个client secret，将二者结果复制，填入下表后复制到配置文件中。1 2 3 4 5 6 7 8 9 10 comment: type: gitalk client_id: xxxxxxxxxxxxxxxxxxxx client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx repo: owner: admin: - enable_hotkey: true language: zh-CN
再往下翻是”Pay”的栏目，也就是赞赏按钮。首先删除所有不常用的区块，就剩下alipay和wechat就足够了，然后将支付二维码照片放在博客文件中source/img目录下然后地址(也就是url)填为”/img/xxx.jpg(或jpg)”。然后看下一栏目，是share，也就是分享按钮，这里我的采用的是sharejs，效果就是一排按钮(我的所有博客末尾都有)，无需任何配置，最后删除下面的"install_url: ''代码如下: 接着往下翻是”Sidebar”，也就是侧边栏，第一项是left，也就是左侧边栏是否固定(填”true”或”false”)，这里建议填false(原因后面告诉你)，接着是右侧边栏，怎么都行。然后下面就是真正的主角——个人信息，这些英文一看就懂，这里我简单提供一下我的配置，注释我打在了后面，不影响使用:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 widgets: position: left #个人信息位置 type: profile author: 谢佳宇 #你的名字 author_title: 谢佳宇的个人主页 #你的网页名称 location: 中国 黑龙江 哈尔滨 #你的地址 avatar: img/avatar.jpg #你的头像(再次强调必须为128×128尺寸) avatar_rounded: true #是否为圆的头像(填"true" 或"false" ) gravatar: #Gavatar，需要翻墙，和avatar只能二选其一，建议不填 follow_link: /about #"关注我" 按钮指向的链接 social_links: #个人社交链接，上文提过 Github: icon: fab fa-github url: https: Gitlab: icon: fab fa-gitlab url: https: RSS: icon: fas fa-rss url: /atom.xml
下一个区块不用管，直接跳到”links:”这一项，按照原格式修改链接和显示名称即可，我的配置如下:1 2 3 4 5 6 7 - position : left type : links links : 小游戏 : https://game.xiejiayu.ml 谢佳宇的文件储存库 : https://flies.xiejiayu.ml 谢佳宇的个人主页(旧版) : https://old.xiejiayu.ml
下面的配置暂时不做修改，后续会提到
第三步 接下来，开始正式研究文章，首先，简单改一下生成文章的模板。进入博客的”scaffolds”，然后打开”post.md”，改为以下内容:
1 2 3 4 5 6 7 8 9 --- title: {{ title }}date: {{ date }}tags: categories: toc: true cover: thumbnail: ---
这里简单介绍一下，hexo默认文章采用ymal的Front Matter，用---分格。”tags”为文章标签，建议一个标签就一两个文章，为细分类；”categories”为文章分类，建议分大类；”toc”项指是否显示页面标题，也就是网页左侧的菜单栏；”cover”是文章封面；”thumbnail”是缩略图。如果想要一片文章显示多个标签或分类呢？刚才提到过，前面的Front Matter是ymal格式，如果要新建子项用”-“符号表示即可，格式如下:
接着，生成空白文章。在git中输入hexo new xxx(xxx为文章名称)，然后进入source/posts目录就可以看到生成的文章啦！然后是写文章，文章采用的是Markdown格式，语法教程可以看我写的这篇文章 。再次强调一下，为了提高网站访问速度，不让网页成为”大吸管”(长得不得了)，可以添加”阅读更多”选项，方法为在截断的地方加入<!--more--> hexo cl&&hexo d -g(hexo clean、hexo generate、hexo deploy的缩写)等待几分钟进入你的个人主页看下效果吧！
第三部分 hexo优化和网页小插件
live2d-widget，也就是网页左下角的看板娘插件</body>前加入此代码:1 <script src ="https://jsd.onmicrosoft.cn/npm/@xiejiayu/cdn/autoload.js" > </script >
Fireworks，点击页面出现的光标效果</body>前加入此代码:1 <script src ="https://jsd.onmicrosoft.cn/npm/@xiejiayu/cdn/fireworks.js" > </script >
文章加密npm install --save hexo-blog-encrypt，然后可以在此网址 中选择一个你喜欢的密码样式(密码均为hello)，比如我选的是Shrink ，那么我需要在文章的Front Matter中加入以下信息:1 2 theme: shrinkpassword: xxx
1 2 3 4 5 6 7 8 const defaultConfig = {'abstract' : '此文章已加密，阅读请输入密码' ,'message' : '请输入密码' ,'theme' : 'default' ,'wrong_pass_message' : '密码错误，请重新输入!' ,'wrong_hash_message' : '密码正确，看看文章吧!' ,'silent' : false ,
hexo s测试一下网页，看看效果怎么样吧！ Glup减少网页的体积(将多行代码合并至一行)npm install gulp -g，然后安装四个压缩工具npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save。接着在博客目录新建文本文档，在其中填入以下内容，并将其重命名为”gulpfile.js”:1 2 3 4 5 6 7 8 9 var gulp = require ('gulp' );var minifycss = require ('gulp-minify-css' );var uglify = require ('gulp-uglify' );var htmlmin = require ('gulp-htmlmin' );var htmlclean = require ('gulp-htmlclean' );task ('minify-html' , function (return gulp.src ('./public/**/*.html' ).pipe (htmlclean ()).pipe (htmlmin ({removeComments : true ,minifyJS : true ,minifyCSS : true ,minifyURLs : true ,})).pipe (gulp.dest ('./public' ))});task ('minify-css' , function (return gulp.src ('./public/**/*.css' ).pipe (minifycss ({compatibility : 'ie8' })).pipe (gulp.dest ('./public' ));});task ('minify-js' , function (return gulp.src ('./public/js/**/*.js' ).pipe (uglify ()).pipe (gulp.dest ('./public/js' ));});task ('default' ,gulp.series (gulp.parallel ('minify-html' ,'minify-css' ,'minify-js' )));
gulp，放在hexo g和hexo d之间，连在一块就是hexo cl、hexo g、gulp、hexo d 网址优化(缩短为xxx.xx/posts/xxxxx形式)npm install hexo-abbrlink --save，安装后打开博客全局配置文件”config.yml”，将”permalink”这一项改为permalink: posts/:abbrlink/，接着，在文件最下面添加一行代码如下，然后重新部署一下就成功喽！1 2 3 abbrlink: alg: crc16 rep: dec
hexo部署命令缩减1 2 3 "scripts" : { "build" : "hexo cl && hexo g && gulp && hexo d" } ,
npm run build就会自动运行hexo cl、hexo g、gulp、hexo d四个命令，省去了打字和识别的时间，自动操作，妈妈再也不用担心部署博客把键盘敲坏啦！
