基于Hexo+Gitee的个人静态博客网页搭建

前言

​  首先我并不是学前端的，也不晓得什么网页设计，单纯只是有点一时兴起。但是在过程里也是有自己的感悟，踩了很多坑，发现网上虽然教程博客很多，但是真的要自己配起来还是有点麻烦的，总是莫名其妙的报bug。

​  在此我也重新在另一台电脑上重复了搭建过程，更加有了点心得，希望能留下一点启发，毕竟 传播知识(才不是如何偷懒 )才是大事!
​ 这里是我的博客网址，大家可以看一下：

https://junno_code_blog.gitee.io/junno_code_blog.gitee.io/

​ ​  谢谢捧场吖~




正文开始~

CSDN (゜-゜)つロ 干杯

环境搭建：NodeJs+Git+Hexo （Win10+64位）

NodeJs安装

1. 下载安装 node.js

​​  我们可以验证node的版本号和它所附带的npm包管理器版本号：

# 使用以下命令检查版本，如果正确输出则表示安装成功
# CMD输入：
node -v
npm v

​

​  切换国内源，使用cnpm（马云爸爸的连接更快喔~

# CMD输入：
npm install -g cnpm --registry=https://registry.npm.taobao.org

​

​  查看cnpm的版本

CMD输入:cnpm -v

# 打印的信息：
cnpm@6.1.1 
npm@6.14.11 
node@14.15.4 
npminstall@3.28.0 
win32 x64 10.0.18363
registry=https://r.npm.taobao.org

2. 安装 Git

​  也是属于傻瓜式安装，安装完你会发现目录和鼠标右键下多了Git Bash和Git GUI的选项，即是安装成功。

​  安装完打开bash是下面这个小东西：

Hexo安装

​  使用以下命令安装hexo包，-g表示全局安装

cnpm install hexo -g

​  在你想要的地方新建一个专门来放置hexo博客内容的文件夹，这里我命名为hexo，这里我是G:\hexo

​  cmd到这个文件夹根目录：

base：G:
base: cd hexo/

​  然后运行hexo init命令来在这个文件夹初始化一些hexo的基本文件

​  输出信息如下：

(base) G:\hexo>hexo init

INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
[32mINFO [39m Install dependencies
added 188 packages from 443 contributors and audited 194 packages in 34.032s
15 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
INFO  Start blogging with Hexo!

​  文件夹下的对应生成文件：

​  接下来看看hexo的一些常用基本命令：

hexo init >  # 执行init命令初始化hexo到你指定的目录
hexo n "我的博客" == hexo new "我的博客" # 新建文章
hexo generate       # 根据当前目录下文件,生成静态网页 简写：hexo g
hexo server         # 运行本地服务 简写：hexo s
hexo clean          # 清理
hexo deploy         # 部署 简写：hexo d
hexo server         # Hexo会监视文件变动并自动更新，无须重启服务器
hexo server -s      # 静态模式
hexo server -p 5000 # 更改端口
hexo server -i 192.168.1.1 # 自定义 IP

​  比较常用的是：

hexo clean # 清理
hexo g # 生成新的
hexo d # 部署到远端仓库
hexo s # 本地服务

​  查看hexo的初始化博客页面：
​  在cmd输入 hexo s -g 即先生成静态网页然后启动本地服务(也可以分开

(base) G:\hexo>hexo s -g
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

​  然后在浏览器(推荐Chrome)打开http://localhost:4000 (4000是默认port)

​  上面是hexo的内置博客主题样式，我们接下来可以安装其他主题

主题配置

​  这里推荐 hexo-theme-jekyll 和 hexo-theme-yilia

​  但是对于新手来说配置一些个性化功能还是有点捉急，我又找到了一个集成个性化功能较高的版本— — hexo-yilia-plus

​  有一些比较好用的功能：

添加字数统计功能添加字数统计功能集成不蒜子访问量统计功能
网易云音乐插件
页面点击小红心效果
添加 GitHub Ribbons(Fork me)
添加版权声明
添加百度站长平台主动推送
集成码云评论 https://gitee.com/zhousiwei/yilia-plus-demo
添加字数统计功能
添加看板娘动态模型插件
自定义文章版权声明文本

​  我们来安装一下介个主题：cmd输入(还是在hexo的根目录,这里也体现到了git的作用)

cd ./themes/
git clone --depth=1 https://github.com/JoeyBling/hexo-theme-yilia-plus.git ./yilia-plus

​  但是由于Github在国内的niao性，我们可以选择zip包直接download

​  下载好后，我们将它解压到themes文件夹下并重命名为yilia-plus

​  我们可以先来看下yilia-plus的主题效果，后面再去修改相关的配置

​  打开根目录下的 _config.yml (注意每个主题包里也有一个同名的文件，但是分管的内容不同，相当于一个总的配置文件)

​  找到theme，然后将landscape改为yilia-plus

theme: yilia-plus

​  然后就去cmd端去执行一键三连

hexo clean
hexo g
hexo s

​  然后按F5刷新刚才打开的本地服务网页：

​  可以看到样式已经发生改变，字数统计、阅读访问统计和Github Fork功能已生效。

Gitee仓库创建和部署

​  接下来，我们去 Gitee注册账号(如果有了就跳过)，然后新建一个来存放静态网页文件的仓库，然后就可以利用Gitee的Gitee Pages功能来部署静态网页，我们就可以远程访问啦(这是免去购买域名和服务器的偷懒做法，当然有能力的大牛自然都是自己购买和搭建服务器了，哭唧唧)

​  这里小刀已经有账号，就直接新建一个repo，名称和介绍大家按需填写

​  我们需要把本地hexo生成的静态网页等文件上传到这个Gitee仓库，首先我们来添加公钥，这个是保证传输的基础，之后也就不需要每次更新博客都输入用户名和密码啦~

​  首先在git bash里输入：然后一路回车

ssh-keygen -t rsa -C "注册gitee时使用的邮箱"

​  接下来用下面的命令输出ssh key，就可以看到一长串的密码啦

cat ~/.ssh/id_rsa.pub

​  然后我们到刚才新建的Gitee Repo去：到管理选项里的添加公钥一栏

​  然后输入刚才复制的公钥密码，点击添加，然后就Ok啦(如果添加失败报格式错误看看是不是复制粘贴的时候多了一些换行符或者空格)

​  然后在git bash输入 ssh -T [email protected]，系统会提示你输入yes/no，输入yes，如果出现：You’ve successfully authenticated, but GitHub does not provide shell access. 就表示成功了。

​  接下来是将hexo部署到Gitee仓库 :
  到 代码选项复制自己的仓库url地址

​  大家看到下面还有一个全局的Git账户初始化指导，可以执行，也可以不执行

​  比如现在我的仓库地址是：https://gitee.com/Junno_code_blog/blog_demo.git

​  然后打开根文件夹下的_config.yml文件进行配置修改：
找到：

​  改为(url和root根据你们自己的仓库链接来改)：

​  修改depoly选项，注意type、repository、branch冒号后面都是一个英文空格，格式问题，没有会出错

​  hexo去deploy到Git要用到一个插件hexo-deployer-git

​  我们去cmd里用命令安装：

cnpm install hexo-deployer-git --save

​  然后我们就可以一键三连了：

hexo clean
hexo g
hexo d

​  中间没有报错就可以一路畅通啦，然后去Gitee网站检查一下有没有更新：

​  然后我们找到Gitee Page功能：

​  启动静态网站服务：

​  然后点击生成的静态博客网址

​  搓小手手：

​  怎么是这样的！！

​  别慌，我们将网页拉到最下面，会发现有错误提示：

​  根据它的说明，我们应该是少了一个json文件生成插件和一些配置选项：

​  cmd输入：

cnpm i hexo-generator-json-content --save

然后再在根目录_config.yml文件里加入提示的内容，注意缩进格式：

​  然后我们再来一键三连：

hexo clean
hexo g
hexo d

！！！！！！！！！！！！！！！！

​  接下来是每次更改配置或者更新博客后在Gitee部署的很重要的两步：

1. 重新启动Gitee Pages服务，重新部署静态网页，否则不会更新配置
2. 打开网址后记得按下F5键刷新缓存，这是Chrome的网页缓存机制，不然就还是之前的错误网(太糟心了，天知道我怎么踩完得这个坑5555)

！！！！！！！！！！！！！！！！

​  接下来就是见证奇迹的时刻啦：

​  诶嘿 ~ 可以正常显示了，文章标签搜索也是正常的~

个性化配置

  接下来大家要做的就是个性化配置了，比如头像、头像背景、看板娘、网易云小插件以及各种小功能都可以在yilia-plua文件夹下的_config.yml里去修改

1. header部分大家看着改

2. subNav部分：

   QQ和微信的名片二维码大家将自己的图片保存到\hexo\themes\yilia-plus\source\img 文件夹下，然后再config里面修改就行

3. avatar 可以换茬自己的头像图片，保存路径与上面一致

4. 看板娘模型预览，简单来说就是在博客里放一个小人或者小动物

5. friends 和 aboutme 部分大家看着改
   
   

写博客四件套：Typora + PicGo + Mathjax + Gitment

  写博客要有写博客的工具和相应的分享评论功能，hexo是支持markdown文件的，这里推荐大家用Typora来写md文件，而我们写博客笔记的时候势必会用到一些图片和数学公式。

  在本地预览由于图片是在本地所以加载是没有问题的，但是到了远程服务端就没有对应的图片文件了，我们需要使用图床来对图片生成url访问地址，这样在部署后可以通过加载链接显示图片。

  而最最方便的一点是Typora支持调用PicGo进行插入图片时自动上传

PicGo安装

  我们先去下载 PicGo，这里我选的是稳定的2.2.2版本，还有很多beta版大家可以后面去尝试，下载exe文件

  安装完后在插件设置里搜索smms用户登录插件：

  安装完成后重启软件

SMMS服务

  SMMS是一个图床服务，单个文件最大支持5M，一次最多10张，每个人免费有5G的存储空间(超级良心~)

  然后我们去 smms 开通图床服务：先注册，然后在User下拉选项里到Dashboard

  然后在API Access里面生成Token密钥：

PicGO关联SMMS

  在重启后的PicGo里找到图床设置这一选项，然后到最后一个SM.MS.用户登录设置，将刚才生成的SMMS Token输入：

Typora关联 PicGO

  打开Typora的偏好设置，到图像一栏：

  注意这里的PicGo路径大家根据自己的安装情况填写，定位到exe文件的路径

  然后点击验证图片上传选项，出现以下结果便是配置成功：

  还可以去SMMS网站查看到最新的上传：

  这样大家在写博客的时候就可以自动上传图片啦，Typora会自动置换成可以访问的url链接代替原来的本地路径

Hexo数学公式渲染-Katex

  Hexo原本的渲染插件是不支持数学公式的，我们需要安装别的渲染插件：

  cmd依次运行以下命令(hexo根目录下执行)：

cnpm uninstall hexo-renderer-marked --save

cnpm install hexo-renderer-markdown-it-plus --save

cnpm install markdown-it-katex --save

  然后在根目录_config.yml文件中加入配置选项(注意缩进格式：

markdown_it_plus:
  highlight: true
  html: true
  xhtmlOut: true
  breaks: true
  langPrefix:
  linkify: true
  typographer:
  quotes: “”‘’
  plugins:
    - plugin:
        name: markdown-it-katex
        enable: true
    - plugin:
        name: markdown-it-mark
        enable: false

  在打开themes/next/layout/_partial/head.ejs文件，在末尾加入一句代码：

  然后我们新生成一个md文件，并写入一些数学公式：

  cmd输入：

hexo n "math_test"

  hexo就会在\hexo\source_posts\下生成初始化的md文件

  开头是一个yml格式的文件信息声明，其中tags可以加入标签，就可以在网页里面显示并且可以根据这些标签搜索。

  还有像打赏或者渲染等options信息也是在这里声明，常用的有：

title: 从零搭建博客 教程 Hexo GitHub    #文章标题
subtitle:                            #子标题
#categories: 文章                     #文章分類目錄 可以省略    
toc: true                            #目录 需要安装插件或者主题自带
reward: true                         #打赏 需要安装插件或者主题自带
declare: true                        #版权 需要安装插件或者主题自带
date:                                #文章日期 2019/7/1
header-img:                          #顶部背景图片
tags:                                #标签
	- 自学
	- Blog
	- Original

  注意除了tags其他options的冒号后面都带有空格

  数学公式测试的md文件我们在开头声明：

layout: post
title: math_test
date: 2021-01-22 16:30:51
comments: true
mathjax: true
tags:
	- 测试用

  然后将yilia-plua文件夹下的_config.yml中mathjjax设置成true

  然后又是一键三连：

hexo clean
hexo g
hexo s

  就可以看到数学公式渲染成功啦：

  Ps: 建议加入公式开头结尾分别加入以下格式声明，使多行公式对齐并且有标号，否则可能会渲染失败

 \begin{align}
	你的内容
 \end{align}

Gitment 评论系统

  yilia-plus的作者推荐使用Giteement，也就是以Gitee为基础的评论系统，但是我尝试之后并未成功，可能是由于用到的服务node已经失效。

  于是尝试使用Github端的集成评论系统——Gitment(本身Giteement就是根据Gitment修改而来

  首先我们先去Github新建一个repo来存储评论信息

  然后去申请一个 OAuth Application

  Application name 应用名称(根据实际来填写)

  Homepage URL 主页网址(应用程序主页的完整URL)

  Application description 应用说明(应用描述)

  Authorization callback URL 授权回调URL(一般是博客的域名)

  然后点击生成新的Client secrets，并更新配置

  复制Client ID 和 Client secrets 到theme文件夹下config文件里的对应位置，别忘了Github端更新配置：

  根据config文件里的提示修改配置：

  然后一键三连测试走一波(记得Gitee Pages重新部署操作+F5页面重载喔)

  看看一些基本修改后的主页：

  我们可以看到评论区有熟悉的小黑猫了，然后点击login

  点击初始化评论，然后来一个小评论测试一下：

  同时查看Github对应Repo的issue栏，可以看见该评论已经通过issue发布了：

  至此写博客四件套：Typora + PicGo + Mathjax + Gitment 已经全部集齐，可以开心的写推文或者博客啦~

文末【本文链接】错误debug

  在版权声明这一快，有一个本文链接的转载信息，但是它的url其实是有错的，点它必出404

  而正确的链接应该是 (https://junno_code_blog.gitee.io/blog_demo/2021/01/22/math-test/)

  通过搜索MIT关键字，我找到了它的源码：

  很显然是这个 yilia_plus_full_url 函数不正确，但是这里我并不知道post.path 和 post.title 的值是啥，于是我稍作修改并利用Chrome的F12查看网页源码：

  然后发现：

Post.title = math_test # 文件名
post.path = 2021/01/22/math-test # 文件相对路径

  那我们可以手动加入正确的前缀，因为正确的url其实是包含post.path的.

  在theme的config文件中加入以下一句代码：

url: https://junno_code_blog.gitee.io/blog_demo/

  并稍作修改，其实就是简单的变量替换（我也没学过js）：

  最后再一键三连测试一波啦：

点击一下链接，成功跳转，大功告成~

结语

  帮大家踩了点坑，还有一些个性化配置就靠大家去奇思妙想啦，加入自己喜欢的头像、背景图或者小组件。
  也算了了当初的一个Flag，终于有了自己的个人博客网页，挺捉急的就是了。

Reference

1. 基础的环境配置和依赖库安装

2. 一些问题的更新和个性化设置

3. hexo-yilia-plus theme

4. Gitment 配置

5. hexo 数学公式渲染

6. hexo 推送机制

7. hexo 搭建教程