如何制作和发布网页(下)

在上一期，我向大家介绍了如何使用Github Pages，但如果仅仅几个字的html作为个人主页，即使再多华丽的词藻也不会让人眼前焕然一新，于是，这个能体现html语言非常不错的装X工具就出现了，它就是大名鼎鼎的Hexo！

第一部分

前期的准备工作，包括工具安装、用户配置、本地调试和域名发布。

第一步

安装一下两个工具及注册Github（已有请忽略）

• Git
• Nodejs（推荐使用LTS版本，更稳定）

第二步

安装后在所有程序中找到”Git“文件夹，点击后打开”Git Bash“，之后输入以下代码:

git config --global user.name "yourname"
git config --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_modules

  npm依赖包

• public

  生成文章的位置(可能会没有)

• scaffolds

  新建文章/页面/草稿的模板

• source

  存放文章和生成文件的位置，里面除了有_前缀的三个文件夹其余文件均会被复制到生成的网址下

• themes

  主题文件存放处

• _config.yml

  博客的配置文件(全局)

接下来，简单配置一下”_config.yml”，
先从title到root简单配置一下，这是我的配置文件，注释我写在了后面

title: 谢佳宇的个人主页 #网页标题
subtitle: '' #网页副标题，建议不填
description: '谢佳宇的个人主页' #网站描述
keywords: 谢佳宇的个人主页 #网站的关键词。支持多个关键词
author: 谢佳宇 #你的名字
language: zh-CN #全局语言，默认为en，这里改为了中文
timezone: 'Asia/Shanghai' #时区，中国的是上海时间
url: https://xiejiayu.ml #网址，必须以http或https开头，可以改为你的ghpage域名
root: / #网站根目录

这里简单强调一下ymal的格式：

• 先是变量名称，然后是英文冒号加上一个空格，然后是变量值。举个例子，比如变量名称是title。变量值是test，则需要的代码为title: test
• 还有一点，就是缩进必须绝对一致，也就是一栏的子栏的空格数必须一致，否则无法识别，在以后会经常提到，这里不做演示。

接着转到文件下方deploy:变量，将代码改为如下所示:

deploy:
  type: git
  repo: https://github.com/xxx/xxx.git #此处换成你的git仓库，注意有.git后缀
  branch: master #git仓库分支

注:若要添加多个仓库，请将repo变量改成以下形式，注意缩进！:

repo: 
  github: https://github.com/xxx/xxx.git
  gitlab: https://gitlab.com/xxx/xxx.git

第四步

首先，在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官方配置教程，其他主题请参见其博主写的教程。
首先，将icarus主题文件克隆到”themes/icarus”文件夹，命令如下:

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”，接下来，我重点解释说这个配置文件。

1. 首先将”logo”处一个回车，四个空格，然后输入text: xxx的个人主页，这里对应着网站左上角的标题，不建议改成图片，很难看。然后进入themes/icarus/source目录，然后删除”img”这个目录，然后复制”js”目录，然后进入博客的”source”目录，粘贴，然后新建一个”img”目录，放入你的网站favicon.ico(也就是标题旁边的小图标)和avatar.jpg(也就是头像，图片尺寸必须为128×128)，然后将配置文件中”head”项中的”favicon”后的文件路径改为/img/favicon.ico
2. 接着，跳到”navbar”项(大概在100行左右)，可以看到”menu”项，也就是网页的菜单栏，这里可以简单添加几个，比如友链、留言之类，我的配置如下:

   menu:
           归档: /archives
           标签: /tags
           分类: /categories
           日记: /diary
           留言: /message
           友链: /friends
           关于: /about

   不过这种标签页可不是说建就有的，每个菜单栏对应着一个html，那这个html怎么来呢；就需要hexo解析md文件；那hexo解析的什么文件呢，就需要我们创建了；那md怎么创建呢；就需要命令了，输入如下命令hexo new page about即可添加关于页面，逻辑就是这样，page xxx中xxx的名称是页面的英文名，加了几个页面就新建几个页面。
   这里强调一点：tags、categories、about等原有页面也需要手动创建，否则后续生成文章时一堆报错。
3. 接着，简单配置一下个人社交信息。翻到临下面的”links”栏，按照原来的格式更改即可，这里有点小知识，链接的图标(icon)采用了Font Awesome的小svg，在hexo采用fab/fas+fontawesome代值的形式显示图标，图标可自行挑选，将fa-后面的内容更改即可，我的配置如下:

   links:
           View on github:
               icon: fab fa-github
               url: https://github.com/xjystudio/xjystudio.github.io
           View on gitlab:
               icon: fab fa-gitlab
               url: https://gitlab.com/xjystudio/xjystudio.gitlab.io
           RSS:
               icon: fas fa-rss
               url: /atom.xml

   下面的”footer”与上述原理相同，不再赘述。
4. 接着往下翻，翻到大概170行左右，转到”comment”栏，也就是评论区设置。默认配置是Disqus，disqus任何功能的访问都需要翻墙VPN，故不建议使用。作为一名合格的程序猿，github账户是必备的东西，所以我们可以利用github作为登录账户获取用户头像和名称信息来制作评论啊，那有人就问了，这多麻烦啊，所以，大佬就来了，做了一个基于github的评论系统——gitalk，省去了99%的搭建过程，只需几个访问令牌即可使用。
   首先，点此新建一个新的Github OAuth应用，然后名称随便起，两个url都填你的个人主页地址，然后创建。接着，点击Generate a new client secret来创建一个client secret，将二者结果复制，填入下表后复制到配置文件中。

   comment:
       type: gitalk
       client_id: xxxxxxxxxxxxxxxxxxxx
       client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
       repo: #仓库名称(注意不是链接)
       owner: #github账户名称
       admin:
           - #github账户名称
       enable_hotkey: true
       language: zh-CN

   
5. 再往下翻是”Pay”的栏目，也就是赞赏按钮。首先删除所有不常用的区块，就剩下alipay和wechat就足够了，然后将支付二维码照片放在博客文件中source/img目录下然后地址(也就是url)填为”/img/xxx.jpg(或jpg)”。然后看下一栏目，是share，也就是分享按钮，这里我的采用的是sharejs，效果就是一排按钮(我的所有博客末尾都有)，无需任何配置，最后删除下面的"install_url: ''代码如下:

   share:
       type: sharejs

6. 接着往下翻是”Sidebar”，也就是侧边栏，第一项是left，也就是左侧边栏是否固定(填”true”或”false”)，这里建议填false(原因后面告诉你)，接着是右侧边栏，怎么都行。然后下面就是真正的主角——个人信息，这些英文一看就懂，这里我简单提供一下我的配置，注释我打在了后面，不影响使用:

   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://github.com/xjystudio
               Gitlab:
                   icon: fab fa-gitlab
                   url: https://gitlab.com/xjystudio
               RSS: 
                   icon: fas fa-rss
                   url: /atom.xml

7. 下一个区块不用管，直接跳到”links:”这一项，按照原格式修改链接和显示名称即可，我的配置如下:

   -
       position: left
       type: links
       links:
           小游戏: https://game.xiejiayu.ml
           谢佳宇的文件储存库: https://flies.xiejiayu.ml
           谢佳宇的个人主页(旧版): https://old.xiejiayu.ml

   接着，是一些简单的文章显示项，所有项更改”position”后的布尔值(也就是”true”或”false”)即可，第一项”categories”是文章分类显示位置；第二项”recent_posts”是最近文章；第三项”archives”是归档；第四项”tags”是文章标签，这里不做示范

下面的配置暂时不做修改，后续会提到

第三步

接下来，开始正式研究文章，首先，简单改一下生成文章的模板。进入博客的”scaffolds”，然后打开”post.md”，改为以下内容:

---
title: {{ title }}
date: {{ date }}
tags: 
categories: 
toc: true
cover: 
thumbnail: 
---

这里简单介绍一下，hexo默认文章采用ymal的Front Matter，用---分格。”tags”为文章标签，建议一个标签就一两个文章，为细分类；”categories”为文章分类，建议分大类；”toc”项指是否显示页面标题，也就是网页左侧的菜单栏；”cover”是文章封面；”thumbnail”是缩略图。如果想要一片文章显示多个标签或分类呢？刚才提到过，前面的Front Matter是ymal格式，如果要新建子项用”-“符号表示即可，格式如下:

tags: 
- 1
- 2
- 3

接着，生成空白文章。在git中输入hexo new xxx(xxx为文章名称)，然后进入source/posts目录就可以看到生成的文章啦！然后是写文章，文章采用的是Markdown格式，语法教程可以看我写的这篇文章。再次强调一下，为了提高网站访问速度，不让网页成为”大吸管”(长得不得了)，可以添加”阅读更多”选项，方法为在截断的地方加入<!--more-->
文章写完之后hexo cl&&hexo d -g(hexo clean、hexo generate、hexo deploy的缩写)等待几分钟进入你的个人主页看下效果吧！

第三部分

hexo优化和网页小插件

• live2d-widget，也就是网页左下角的看板娘插件
  打开博客目录的”themes\icarus\layout\layout.jsx”，翻到最下面，在</body>前加入此代码:

  <script src="https://jsd.onmicrosoft.cn/npm/@xiejiayu/cdn/autoload.js"></script>

  然后打开全局配置文件”config.yml”，在文件最下面添加一行代码如下:

  live2d:
    enable: true

• Fireworks，点击页面出现的光标效果
  打开”themes\icarus\layout\layout.jsx”，在</body>前加入此代码:

  <script src="https://jsd.onmicrosoft.cn/npm/@xiejiayu/cdn/fireworks.js"></script>

• 文章加密
  在博客目录下”Git Bash Here”，然后安装Encrypt插件，代码为npm install --save hexo-blog-encrypt，然后可以在此网址中选择一个你喜欢的密码样式(密码均为hello)，比如我选的是Shrink，那么我需要在文章的Front Matter中加入以下信息:

  theme: shrink
  password: xxx

  然后打开博客的”node_modules\hexo-blog-encrypt\index.js”翻到第十行，将这一区块改为以下内容:

  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”:

  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');
  gulp.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'))});
  gulp.task('minify-css', function() {return gulp.src('./public/**/*.css').pipe(minifycss({compatibility: 'ie8'})).pipe(gulp.dest('./public'));});
  gulp.task('minify-js', function() {return gulp.src('./public/js/**/*.js').pipe(uglify()).pipe(gulp.dest('./public/js'));});
  gulp.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形式)
  首先安装插件”abbrlink”，代码为npm install hexo-abbrlink --save，安装后打开博客全局配置文件”config.yml”，将”permalink”这一项改为permalink: posts/:abbrlink/，接着，在文件最下面添加一行代码如下，然后重新部署一下就成功喽！

  abbrlink:
    alg: crc16
    rep: dec

• hexo部署命令缩减
  打开博客目录的”package.json”将”script”区块(大概在四五行)改为以下内容:

  "scripts": {
    "build": "hexo cl && hexo g && gulp && hexo d"
  },

  然后以后部署就运行npm run build就会自动运行hexo cl、hexo g、gulp、hexo d四个命令，省去了打字和识别的时间，自动操作，妈妈再也不用担心部署博客把键盘敲坏啦！