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

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

第一部分

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

第一步

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

  • Git
  • Nodejs(推荐使用LTS版本,更稳定)

第二步

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

1
2
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 initnpm install,之后的文件框架如下:

  • node_modules

    npm依赖包

  • public

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

  • scaffolds

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

  • source

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

  • themes

    主题文件存放处

  • _config.yml

    博客的配置文件(全局)


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

1
2
3
4
5
6
7
8
9
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:变量,将代码改为如下所示:

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

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

1
2
3
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 cleanhexo generatehexo deploy,等待几分钟,然后转到上期教程中提到的你的网址https://yourname.github.io(yourname为你的Github注册名称)中,你会发现,界面焕然一新。至此,第一部分完成。

第二部分

hexo进阶配置

第一步

打开这个网址,选择一个你喜欢的主题,可以预览一下,博主选用的是ppofficeicarus主题,我的博客本身就是个很好的Demo,接下来,分享一下我的博客配置方法,不愿意听我墨迹的可以看icarus官方配置教程,其他主题请参见其博主写的教程。
首先,将icarus主题文件克隆到”themes/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”,接下来,我重点解释说这个配置文件。

  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”项,也就是网页的菜单栏,这里可以简单添加几个,比如友链、留言之类,我的配置如下:
    1
    2
    3
    4
    5
    6
    7
    8
    menu:
    归档: /archives
    标签: /tags
    分类: /categories
    日记: /diary
    留言: /message
    友链: /friends
    关于: /about
    不过这种标签页可不是说建就有的,每个菜单栏对应着一个html,那这个html怎么来呢;就需要hexo解析md文件;那hexo解析的什么文件呢,就需要我们创建了;那md怎么创建呢;就需要命令了,输入如下命令hexo new page about即可添加关于页面,逻辑就是这样,page xxxxxx的名称是页面的英文名,加了几个页面就新建几个页面。
    这里强调一点:tagscategoriesabout等原有页面也需要手动创建,否则后续生成文章时一堆报错。
  3. 接着,简单配置一下个人社交信息。翻到临下面的”links”栏,按照原来的格式更改即可,这里有点小知识,链接的图标(icon)采用了Font Awesome的小svg,在hexo采用fab/fas+fontawesome代值的形式显示图标,图标可自行挑选,将fa-后面的内容更改即可,我的配置如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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,将二者结果复制,填入下表后复制到配置文件中。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    comment:
    type: gitalk
    client_id: xxxxxxxxxxxxxxxxxxxx
    client_secret: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    repo: #仓库名称(注意不是链接)
    owner: #github账户名称
    admin:
    - #github账户名称
    enable_hotkey: true
    language: zh-CN
  5. 再往下翻是”Pay”的栏目,也就是赞赏按钮。首先删除所有不常用的区块,就剩下alipaywechat就足够了,然后将支付二维码照片放在博客文件中source/img目录下然后地址(也就是url)填为”/img/xxx.jpg(或jpg)”。然后看下一栏目,是share,也就是分享按钮,这里我的采用的是sharejs,效果就是一排按钮(我的所有博客末尾都有),无需任何配置,最后删除下面的"install_url: ''代码如下:
    1
    2
    share:
    type: sharejs
  6. 接着往下翻是”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://github.com/xjystudio
    Gitlab:
    icon: fab fa-gitlab
    url: https://gitlab.com/xjystudio
    RSS:
    icon: fas fa-rss
    url: /atom.xml
  7. 下一个区块不用管,直接跳到”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
    接着,是一些简单的文章显示项,所有项更改”position”后的布尔值(也就是”true”或”false”)即可,第一项”categories”是文章分类显示位置;第二项”recent_posts”是最近文章;第三项”archives”是归档;第四项”tags”是文章标签,这里不做示范

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

第三步

接下来,开始正式研究文章,首先,简单改一下生成文章的模板。进入博客的”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格式,如果要新建子项用”-“符号表示即可,格式如下:

1
2
3
4
tags: 
- 1
- 2
- 3

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

第三部分

hexo优化和网页小插件

  • live2d-widget,也就是网页左下角的看板娘插件
    打开博客目录的”themes\icarus\layout\layout.jsx”,翻到最下面,在</body>前加入此代码:
    1
    <script src="https://jsd.onmicrosoft.cn/npm/@xiejiayu/cdn/autoload.js"></script>
    然后打开全局配置文件”config.yml”,在文件最下面添加一行代码如下:
    1
    2
    live2d:
    enable: true
  • Fireworks,点击页面出现的光标效果
    打开”themes\icarus\layout\layout.jsx”,在</body>前加入此代码:
    1
    <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中加入以下信息:
    1
    2
    theme: shrink
    password: xxx
    然后打开博客的”node_modules\hexo-blog-encrypt\index.js”翻到第十行,将这一区块改为以下内容:
    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');
    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 ghexo d之间,连在一块就是hexo clhexo ggulphexo d
    这回重新看看个人主页是不是速度快了很多?
  • 网址优化(缩短为xxx.xx/posts/xxxxx形式)
    首先安装插件”abbrlink”,代码为npm install hexo-abbrlink --save,安装后打开博客全局配置文件”config.yml”,将”permalink”这一项改为permalink: posts/:abbrlink/,接着,在文件最下面添加一行代码如下,然后重新部署一下就成功喽!
    1
    2
    3
    abbrlink:
    alg: crc16
    rep: dec
  • hexo部署命令缩减
    打开博客目录的”package.json”将”script”区块(大概在四五行)改为以下内容:
    1
    2
    3
    "scripts": {
    "build": "hexo cl && hexo g && gulp && hexo d"
    },
    然后以后部署就运行npm run build就会自动运行hexo clhexo ggulphexo d四个命令,省去了打字和识别的时间,自动操作,妈妈再也不用担心部署博客把键盘敲坏啦!

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

https://xiejiayu.com/posts/hexo/

作者

谢佳宇

发布于

2024-08-11

更新于

2024-08-22

许可协议

评论