个人博客搭建流程

个人博客搭建

⭐ayer主题官方中文参考：https://shen-yu.gitee.io/2019/ayer/

⭐ayer主题 GitHub仓库：https://github.com/shen-yu/hexo-theme-ayer

博客地址：wangguijie.github.io | wangguijiepedeval.github.io

域名地址：https://www.wgj.ink/

hexo官方文档：文档 | Hexo

（主要）参考：使用 Hexo+GitHub 搭建个人免费博客教程（小白向） - 知乎 (zhihu.com)

更换Markdown渲染器：(99条消息) 【Hexo】选择更高级的Markdown渲染器_hexo markdown_Xavier Jiezou的博客-CSDN博客

博客主题以及博客主题切换

本博客采用的是shen-yu (Eric Shen) 的Ayer主题，Ayer在马来语中是“水”的意思，在西班牙语中是“昨天”的意思。

Ayer是一个干净且优雅的Hexo主题，自带响应式，加载速度很快，该有的功能都有（比如：文章发布和管理、评论和互动、文章归档和搜索等），可配置项多（包括：封面配置、文章配置、是否启用搜索配置、访问量统计配置等），非常适合作为上传学习笔记的博客主题。

另一主题：https://github.com/LouisBarranqueiro/hexo-theme-tranquilpeak#demo

tranquilpeak

1. Download the latest version

2. Rename the folder in tranquilpeak and place it in the themes folder of your Hexo blog

3. Modify the theme in Hexo configuration file (_config.yml) by setting theme variable to tranquilpeak

4. Go to the tranquilpeak folder and run npm install && npm run prod

5. Read documentation to configure the theme.

⭐注意使用Windows的Terminal时需要使用管理员运行打开，不然会有权限限制问题。

不同的主题对于hexo的配置文件_config.xml中的参数格式会有不同的要求，因此切换不同主题时注意甄别修改。

比如tranquilpeak主题的keywords要求：

keywords:
- hexo
- javascript

博客页面布局及其设计思路

1、主界面

封面显示博客网站名称，下方通过“打字特效”的方式呈现设定好的文本内容；

网站左侧边栏显示菜单可选项，包括：主页、归档、分类、标签……。

网站主页下方显示的是最新上传的文章精简信息（包括置顶文章：红色标签“sticky”标记），点击即可进入对应的文章界面。

2、归档界面

根据时间日期降序显示上传文章。

3、分类界面

根据.md文件中Front-matter中的目录结构生成对应的分类结构。

4、标签界面

根据.md文件中Front-matter中的tag结构生成对应的标签。

比如：

title: 个人博客搭建流程
author: Guijie Wang
categories: # 分类
- 教程
tags: # 标签
- 博客搭建
- hexo
description: "本文介绍如何使用 Hexo 快速搭建个人博客，并分享一些实用的主题和插件。"
top: True # 文章置顶（需要安装相关插件）

5、文档界面

文档界面嵌入了PDF阅读器，可以在线阅读上传的PDF文件。

6、播放器界面

播放界面嵌入了音乐播放器和视频播放器：

• 音乐播放器：实现了音乐播放的基本功能（播放、暂停、循环、随机播放等）。

• 视频播放器：嵌入固定的视频代码，实现视频的播放。

7、个人信息界面

个人信息界面主要是展示博客作者的相关信息。

博客功能实现及其技术选择

Git与Nodejs的相关配置

Windows下配置与GitHub的连接

首先在windows上产生公钥私钥对：

1. 用Git Bash工具产生（需要安装git）：

   1. 打开 Git Bash工具 输入命令 ssh-keygen
   2. 输入完命令一直按回车即可
   3. 在 C:\Users\wgj\.ssh 的目录中生成了两个密钥文件。id_rsa 为私钥，id_rsa.pub 为公钥
   4. 将id_rsa.pub中的信息写入GitHub中的SSH and GPG keys中：
      • 
      • 
   5. 最后在GitBash中验证即可：
      • 
      • 验证成功！

npm的相关配置

修改npm的config文件：npm config edit

• 

直接设置npm的config文件：

# 设置默认global安装的目录
npm config set prefix "C:\D\downLoad\node\node_global"   
# 设置默认的cache文件目录
npm config set cache "C:\D\downLoad\node\node_cache"
              
# PS：新安装的nodejs最好设置以上两个默认路径，否则会默认安装到C盘下
              
# 设置镜像
npm config set registry https://registry.npm.taobao.org
# 查看当前使用的镜像地址命令
npm config get registry

front-matter使用教程

网络参考：(98条消息) front-matter使用详解_front matter_略略略～的博客-CSDN博客

Hexo官方参考：https://hexo.io/zh-cn/docs/front-matter.html

Hexo

1、常用命令

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

2、日常推送

写好文章之后在博客目录下执行如下命令：

hexo g                # 生成页面
hexo d                # 部署

文章置顶

下载如下插件：

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

置顶方法

在front-matter中加入top: True 即可

（可选）文章排序规则

在root config.yml文件中添加或修改以下部分：

index_generator:
  path: ''
  per_page: 10
  order_by: -date

• path: Root path for your blogs index page. (default = ‘’)

• per_page: Posts displayed per page. (0 = disable pagination)

• order_by: Posts order. (Order by date descending by default)

插件(可选)

• hexo-generator-index-pin-top 用于文章置顶

• hexo-blog-encrypt 用于文章加密

• hexo-tag-aplayer 用于播放音乐

• hexo-tag-dplayer 用于播放视频

• hexo-helper-live2d 二次元看板娘

更多插件请见 hexo 插件市场

valine文章评论功能

1、获取APP ID 和 APP Key

登录LeanCloud创建应用获取APP ID 和 APP Key

参考：快速开始 | Valine 一款快速、简洁且高效的无后端评论系统。

LeanCloud官网：LeanCloud

2、启用评论功能

在博客主题Ayer文件下的_config.yml文件中添加app_id、app_key以及启用相应的功能

gitalk文章评论功能

参考：为hexo增加gitalk评论系统-CSDN博客

1、创建评论仓库wgj_blog_talk

2、创建OAuth Apps

在github的个人settings中左边栏最下main的Developer settings中找到OAuth Apps，填写如下信息进行注册，获得id和secret。

填写相关信息，完成设置：

博客实现pdf在线预览

PDF文件准备

1. 在wgj-Hexo-Blog\source\目录下新增文件夹用于存储和管理PDF文件：file-pdf/

2. 将PDF存放到file-pdf/文件夹之后，再通过以下方法在_post/目录下的.md文件中引用即可

   • ⭐引用路径格式：/file-pdf/mytore-course-list(test).pdf

方法一:hexo-pdf插件渲染

特点：

• 专门为hexo博客开发，具有丰富的功能（推荐）
• 不支持文件名有空格
  • （eg:mytore course list(test).pdf❌ | mytore-course-list(test).pdf✔️）

下载hexo-pdf插件：

npm install --save hexo-pdf

在.md文件中引用：

{% pdf /file-pdf/mytore-course-list(test).pdf %}

将以上引用代码插入到.md文件中想要插入的位置即可。

方法二:HTML的iframe标签

特点：

• 可以支持文件名有空格（eg:mytore course list(test).pdf）
• 不好控制显示的pdf的高度

基于Typora(Markdown)支持部分HTML的条件下，采用如下HTML语句实现：

<iframe src="/file-pdf/mytore-course-list(test).pdf" width="100%" height="100%">  
    This browser does not support PDFs. Please download the PDF to view it: 
    <a href="/file-pdf/mytore-course-list(test).pdf">Download PDF</a>  
</iframe>

以下参考内容部分有用，部分没用（需仔细甄别）

参考：(113条消息) 【如何在网页中实现pdf在线预览】10分钟学会如何利用Hexo博客上传本地pdf文件并在线预览pdf_博客可以直接看pdf吗_捡起一束光的博客-CSDN博客

参考2：Hexo -18- 添加 PDF 阅读功能-腾讯云开发者社区-腾讯云 (tencent.com)

基于PDFjs参考：(113条消息) 如何在hexo博客中在线阅读pdf_hexo的pdf插件_冰山一树Sankey的博客-CSDN博客

新建book导航栏

（1）新建book导航栏

hexo new page book
# 之后在index.md文件中设置front-matter

（2）在主题配置文件_config.yml中添加

Book:
   url: /book
   # icon: fas fa-book

（3）然后在book文件夹中的index.md中添加生成的pdf文件链接即可

博客引入音视频播放器

使用iframe标签加载视频

<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
    <iframe src="//player.bilibili.com/player.html?aid=975879338&bvid=BV1H44y1t75x&cid=423711758&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" autoplay="false"> 
    </iframe>
</div>

更换视频只需要在（以bilibili为例）视频下方的分享处点击嵌入代码获取视频的链接，然后将链接替换掉以上代码中的src的链接即可。

• 以上代码已经完善了设备布局的自适应

新建播放器导航栏：

hexo new page player

之后在index.md文件中设置front-matter即可

使用aplayer插件加载音乐播放器

1、安装aplayer插件

npm install --save hexo-tag-aplayer

2、在本插件中使用 MetingJS，Hexo配置文件_config.yml中设置：

aplayer:
  meting: true

MetingJS 是基于Meting API 的 APlayer 衍生播放器，引入 MetingJS 后，播放器将支持对于 QQ音乐、网易云音乐、虾米、酷狗、百度等平台的音乐播放。

3、按照如下格式在.md文件中插入即可

（1）单个歌曲插入：

{% meting "3986040" "netease" "song" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

（2）歌单插入：

{% meting "627070825" "netease" "playlist" "theme:#555" "mutex:true" "listmaxheight:340px" "preload:auto" %}

PS：获取歌曲或者歌单的id

登录网页版的音乐网站，点击进入一个歌单便可在URL中看到id：7489569642

或者点击分享，复制链接：

https://i.y.qq.com/n2/m/share/details/taoge.html?id=7489569642&hosteuin=

注意如果要修改歌曲或者歌单

• data-id：单曲ID / 歌单ID
• data-server：音乐平台

参数表

参数	是否必须	默认值	描述&可选值
data-id	是		单曲ID / 歌单ID / 专辑ID / 搜索关键词
data-server	是		音乐平台：netease,tencent,kugou,xiami,baidu
data-type	是		音乐类型：song,playlist,album,search,artist
data-mode	已弃用	circulation	播放模式：circulation,random,single,order 使用 data-loop data-order 字段代替
data-autoplay	否	false	是否自动播放，移动端浏览器不支持该选项
data-mutex	否	true	播放时是否暂停其他APlayer对象
data-listmaxheight	否	340px	播放列表最高高度
data-preload	否	auto	音乐预加载模式：none, metadata, auto
data-theme	否	#2980b9	主题色
data-mini	否	false	是否开启迷你模式
data-loop	否	all	循环方式：all, one, none
data-order	否	list	播放顺序：list, random
data-lrc	否	false
data-list-folded	否	false	歌单列表初始时是否折叠
data-volume	否	0.7	用户未自定义前的默认初始化音量

参考：(113条消息) hexo博客插入图片与视频方法_可以插入视频的 博客_多才coder的博客-CSDN博客

参考：(113条消息) Hexo主题插入音乐之aplayer音乐播放器_hexo-tag-aplayer_hushhw的博客-CSDN博客

• Hexo 折腾：音乐播放 | Tianma (tianma8023.github.io)

Gravatar全球通用头像

Gravatar官网：Gravatar - Globally Recognized Avatars

简述：

Gravatar的概念首先是在国外的独立WordPress博客中兴起的，当你到任何一个支持Gravatar的网站留言时，这个网站都会根据你所提供的Email地址为你显示出匹配的头像。当然，这个头像，是需要你事先到Gravatar的网站注册并上传的，否则，在这个网站上，就只会显示成一个默认的头像。

参考：(109条消息) Gravatar了解与学习_Cappuccino-jay的博客-CSDN博客

头像配置

登录或注册Gravatar，然后修改自己的头像。

评论的时候，留下在Gravatar注册时所使用的邮箱即可显示自己设置的头像。

$\textcolor{red}{注意：}$如果你修改了头像后发现没有更新，请不要慌张，因为gravatar.cat.net 有七天的缓存期，安静的等待吧~

参考：头像配置 | Valine 一款快速、简洁且高效的无后端评论系统。

博客制作过程中遇到的问题及其解决方法

遇到的问题

1、关于Git Bash无法打开的错误（闪退）

解决：

1. 配置环境变量：C:\Program Files\Git\bin

2. 在Windows Terminal中配置C:\Program Files\Git\bin目录下的bash.exe快捷启动方式;

   • 

参考：(98条消息) windows下git bash安装与环境变量设置_git bash 环境变量_sning999的博客-CSDN博客

2、Hexo部署出现错误err: Spawn failed

解决一：

1. 删去博客目录下的.deploy_git文件

2. 再次运行npm install hexo-deployer-git命令下载发布插件

   • 如果npm需要更新则现将npm进行更新

3. 最后hexo g && hexo d即可

参考：(113条消息) Hexo部署出现错误err: Error: Spawn failed解决方式_wei-xiansen的博客-CSDN博客

若以上方法无法解决，并且出现错误：fatal: bad config line 1 in file C:/Users/wgj/.gitconfig

解决二：

1. 删去C:/Users/wgj/目录下的.gitconfig文件；

2. 重新配置用户名和邮箱，输入下面的命令：

   • git config --global user.name "用户名"
   • git config --global user.email "邮箱"

3. 之后会生成新的.gitconfig文件。

4. 最后继续解决问题：err: Spawn failed

   1. 删除 .deploy_git 文件夹；
   2. 输入 git config --global core.autocrlf false；
   3. 最后，依次执行：hexo clean，hexo g，hexo s，hexo d。

参考：

• git错误参考：https://www.cnblogs.com/dotnet261010/p/10844090.html
• Spawn failed参考：https://blog.csdn.net/qq_28919533/article/details/124338891

注意事项

1. 编写md文件时注意不要在代码块前设置排序，否则部署上去后会出现文本格式混乱

博客搭建相关资源

LOGO设计

参考：LOGO设计神器；公司logo在线设计生成器 - 标小智LOGO神器 (logosc.cn)

链接：w字母图标生成器 | 汉字徽章图标一键生成 - 标小智LOGO神器 (logosc.cn)

iconfinder：丰富的图标库

参考：7,400,000+ free and premium vector icons, illustrations and 3D illustrations (iconfinder.com)

获取网站Logo

参考：下载网站 favicon 图标的 3 种方法 - 掘金 (juejin.cn)

最常用的方法：

• 格式为 域名/favicon.ico，比如：https://www.google.com/favicon.ico

front-matter编写教程

参考：(98条消息) front-matter使用详解_front matter_略略略～的博客-CSDN博客

Hexo官方参考：https://hexo.io/zh-cn/docs/front-matter.html

编写实例：

---
title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
type: tags		# 帮助脚本识别这是一个用来创建tags的文档
layout: tag 	# 我的tags模版标签叫tag你可以根据你的模版名称输入对应的名称
categories: # 分类（严格的顺序结构）
- first		# 第一级
- second	# 第二级
- third		# 第三级
- fourth	# 第四级
- ……
tags: # 标签（多个标签均为并列关系，不存在父子关系）
- math
- games
- physics
---

front-matter包含的内容

总结

本次博客搭建目的是为了方便本人分享大学课程知识、科研内容以及编程笔记等计算机相关内容，目的是为了方便总结归纳所学知识以及为有需要的“同志”提供个人的学习心得作为参考，充分体现互联网的共享互助精神。

通过搭建个人博客，

对域名注册、网站建设、前端设计、搜索引擎优化等有了一定的了解和掌握；

对网站开发技术，如HTML、CSS、JavaScript等技术进一步熟悉并运用；

对一定阶段内的自我学习成果进行总结和归纳。

1、SEO相关术语。

SEO (Search Engine Optimization)，译为搜索引擎优化

SEO相关术语：

• PV (Page View)：PV是用户访问网站时所浏览的总网页数

• 百度快照：百度蜘蛛在爬取网页内容时，将网页文本内容独立创建一个文本文件，保存在百度数据库中的网页的“照片”。

• SEO黑帽（SEO black hat）：简单来说，SEO黑帽就是采用了搜索引擎所禁止的方法（作弊），对网站在搜索引擎的排名进行优化，在短时间内排到搜索引擎前列。

• SEO白帽（SEO white hat）：白帽所指的是采用合理的SEO行为优化网站，提高用户的体验，合理与其他网站互联，从而达到网站在搜索引擎排名的稳步提升。

• 跳出率：是指来到网站只浏览了一个页面就离开的用户占网站总浏览用户的百分比。

• 沙盒效应(Sandbox)：指一个新建立的网站在刚上线的一个或几个月内，在搜索引擎上很难有好的排名，甚至没有排名。

• SPAM(Specially Processed Assorted Meat): 指专门针对那些欺骗搜索引擎的技术。搜索引擎垃圾技术是利用不道德的技巧去提高自己搜索引擎上的排名

2、SEO常用的技术。

1. 网页title的优化

2. 关键词的选取

3. 关键词的优化

4. 元标签及网页描述的优化

5. 网站结构和URL优化

6. robots.txt文件

7. 网页链接的优化

8. Heading标签的优化

9. 图片优化

10. 网页减肥

SEO常用作弊方法：

1. 桥页(Doorway Pages)

2. 关键词堆砌(Keyword Stuffing)

3. 隐藏文字(Hidden Text)

4. 隐藏链接(Hidden Link)

5. 隐藏页面(Cloaked Page)