hexo+Next主题搭建建个人博客+优化全过程（完整版）

可以参观一下我的个人博客哦~~~~：My Blog

前置内容

git 的下载：官网下载较慢，这边推荐阿里镜像下载：

阿里镜像下载 git

往下滑选择接近当前日期的最新版本 2.39.2 windows

选择 2.39.2 -64 的exe下载，大概有 50Mb大小

下载好后，直接一直点下一步即可。如果你了解过git，则可以按照自己的习惯下载，这不重要。

Nodejs下载

直接百度搜索 Nodejs，Nodejs下载

选择 18.14.2 的 LTS版本下载

hexo创建个人博客

hexo是什么？

正如hexo的首页所显示的，它是一款非常快速，简介，高效的博客框架平台，我们可以利用hexo快速生成博客网站的模板，然后部署为我们自己的博客网站。

直接进入操作：

在任意盘符中新建 hexo 文件夹，这里我创建在了F盘

打开hexo文件夹，空白的地方右键，选择 Git Bash Here ，即我们使用 git 环境创建 hexo的blog模板（必须提前安装好 git），打开后如下图所示：/ f / hexo表示当前操作位置在 F盘的 hexo文件夹中

在 git窗口中依次输入以下命令

npm install hexo-cli -g

hexo init blog

cd blog

npm install

hexo server

全部输入完成后，hexo文件夹中便会生成一个 blog 子文件夹，并且blog文件夹里面包含有很多信息：

关于这些文件夹，做一个简单的介绍：

node_modules: 依赖包
public：存放生成的页面
scaffolds：生成文章的一些模板
source：用来存放你的文章
themes：主题

然后输入这两条命令：

hexo g

hexo s

完成后会显示如下内容，则说明配置成功!

在 git 中输入 Ctrl+C 即可关闭hexo s的内容。

打开浏览器，在浏览器输入 localhost:4000 即可进入你的初始默认博客

它长这样：

注意：这只是一个离线版本的博客 ，只能你自己看见，因此我们还需要 GitHub或者 gittee提供的 ssh功能将他变为对外开放的。

GitHub创建仓库

首先注册一个GitHub的仓库，然后在个人主页中选择 new 新建仓库

注意：仓库名称的前半部分与你的用户名一致，即 lummod，后半部分为 .git.io 固定格式（忽略红色警告，因为我已经创建过了！），可以选择一个readme为说明文件（随便），然后点击创建仓库

回到 git bash黑窗口中，输入以下两个命令（逐条）：

yourname改为你的GitHub的用户名

git config --global user.name "yourname"

youremail改为你的注册GitHub时的邮箱

git config --global user.email "youremail"

一定不要输入错，这样github才能检查到这个用户属于你

创建 ssh，输入命令，然后一直回车

youremail改为你的注册GitHub时的邮箱

ssh-keygen -t rsa -C "youremail"

之后会提示你已完成 ssh的创建，在文件中找到这个路径

记住这两个文件

在 GitHub的 Setting里面，找到 SSH keys，把 id_rsa.pub 里面的内容全部复制到 key 进去，title随便写一个就行

操作完成后，就成功了。

hexo部署到GitHub

在 blog文件夹下面找到 _config.yml 文件，这是属于你的博客的配置文件，点进入一看就知道了，你可以在这里面直接修改姓名，内容，等用户的信息。双击打开它（vscode或者其他文本编辑器，记事本都可以）

先找一下有没有以下这段内容（我也忘记了是我添加的还是自带的），如果自带则一定是空的，则修改为如下所示，如果没有，则直接复制下面内容到文档的末尾：

user表示你的GitHub的用户名

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
# deploy:
#   type: ''
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master
  # message: Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }})

说明：类型是 git，远程 ssh连接是你的 repo输入项，branch 输入gh-pages。

另外，找到第16行（或者直接搜索 url）修改url 为

https://username.github.io

同样username是你的GitHub的用户名。

完成后，保存文件并且退出，在 git bash中输入以下命令：

表示安装 git部署命令工具

npm install hexo-deployer-git --save

最后输入以下三行命令：

hexo clean

hexo g

hexo d

其中 hexo clean清除了你之前生成的东西，也可以不加。
hexo generate 顾名思义，生成静态文章，可以用 hexo g缩写
hexo deploy 部署文章，可以用hexo d缩写

如果是在离线端即 localhost:4000端测试你的博客，则只需要 hexo g + hexo s 即可，无需 hexo d

输入完成后会出现一堆内容，不用管他，只要最后内容如下所示，就表示成功了！

然后你就可以在

username.github.io  # https://username.github.io

访问到你的博客了，其中username是你GitHub用户名，这个网站不是离线的，其他人都可以访问到！！！

常用命令

new

在根目录中，git bash黑窗口中输入

hexo new "博客名称"

然后打开 blog/source/_posts/ 文件夹后，你的博客名称的md文档就创建好，直接打开编写即可，可以添加一些标签给这个文章，如 tags：编程技术

clean

$ hexo clean

清除缓存文件 (db.json) 和已生成的静态文件 (public)。

在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。

generate

$ hexo generate

生成静态文件。

选项	描述
`-d`, `--deploy`	文件生成后立即部署网站
`-w`, `--watch`	监视文件变动
`-b`, `--bail`	生成过程中如果发生任何未处理的异常则抛出异常
`-f`, `--force`	强制重新生成文件 Hexo 引入了差分机制，如果 `public` 目录存在，那么 `hexo g` 只会重新生成改动的文件。使用该参数的效果接近 `hexo clean && hexo generate`
`-c`, `--concurrency`	最大同时生成文件的数量，默认无限制

该命令可以简写为

$ hexo g

server

$ hexo server

启动服务器。默认情况下，访问网址为： http://localhost:4000/。

选项	描述
`-p`, `--port`	重设端口
`-s`, `--static`	只使用静态文件
`-l`, `--log`	启动日记记录，使用覆盖记录格式

该命令可以简写为：

$ hexo s

deploy

$ hexo deploy

部署网站，构建在GitHub的服务器中。

参数	描述
`-g`, `--generate`	部署之前预先生成静态文件

该命令可以简写为：

$ hexo d

命令配合使用，重新构建网站（release）：

hexo clean

hexo g -d

访问离线的端口（debug）：

hexo g

hexo s

添加插件

主题

hexo提供了非常多的主题模板，在hexo的网站里往下滑，点击探索主题即可。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yc2srU2m-1677829487613)(null)]

选择某一个主题，然后可以点击中间是预览的效果，点击蓝色的名字是该主题的GitHub的下载地址

我的主题是 next，next是一款非常简洁舒服的主题，并且可支持的插件非常多，功能也很强大，可以直接搜索next，然后点击 GitHub的地址，进入下载
根据它的下载提示，直接在 git bash窗口中输入，即可下载next主题

git clone https://github.com/next-theme/hexo-theme-next themes/next

下载完成之后，在 blog文件夹（即根目录）下找到 themes文件夹，这个文件夹里面存放你下载的主题文件，可以看到next主题又再次包含一个文件夹，其中包含了next 主题的配置信息
修改blog的主题：首先返回blog根目录中，打开 _config.yml 文件（建议备份一份，直接复制即可），然后在 _config.yml 中找到 theme选项（如果你使用vscode，则直接 ctrl+h搜索即可，否则就自己往下滑），然后把 theme 上输入 next，表示使用的主题是next（使用其他主题也是如此）

之后就成功！输入 localhost:4000 或者 hexo g， hexo d，然后输入 username.github.io，离线或者在线都可以看到设置的next的主题，具体效果自己查看吧！

博客基本信息

修改博客的标题，副标题，描述，等等基本信息。。。

在 blog根目录下打开 _config.yml 配置文件，直接修改以下信息即可（看不懂英文的直接有道云翻译即可）

注意，语言要改成 zh-CN即中国，其他的自己随便改改

创建新的菜单

打开 themes 的 next 的 _config.yml ，我们此时打开的是主题的配置文件，不是根目录的。

找到第118行或者搜索menu，即可看到：这里其实就是我们的博客菜单选项。在一开始我们只有home和 archives是开着的，如果你想添加一个 tags或者about菜单该如何操作呢？

首先在 blog的根目录中打开 git bash黑窗口，输入以下的命令：

hexo new page tags  # tags可以是其他的

然后在这个 _config 的menu中把 tags这一项取消注释，然后重新构建：

hexo g
hexo s

在localhost：4000中看看效果：

添加完成之后，我们在 blog根目录中打开 source文件夹，即可看到我们的菜单文件夹， tags，打开后，它其实就是一个 md文档！你可以自己在md文档上编辑，然后重新构建看看效果！

同理我们可以自己创建菜单，输入 hexo new page xxx，然后在 主题的config_yml 的menu中按照其他的格式添加即可。

添加搜索功能

打开博客的搜索文章的功能

下载搜索插件：

git bash黑窗口中输入：

npm install hexo-generator-searchdb

主题的 _config 配置文件中找到 local_search，下面的 enable输入true即可。

在根目录的 _config.yml 文件中的末尾添加下面的内容：（选项的内容可以适当修改）

# hexo-generator-searchdb
search:
  path: search.xml
  field: post
  format: html
  limit: 10

重新构建后，即可看到效果：

添加阅读时间字数提示

效果如图：

git 黑窗口中输入以下命令：

npm install hexo-symbols-count-time

在blog的根目录的 _config中复制下面这段话到末尾

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true
  exclude_codeblock: false
  awl: 2	
  wpm: 275
  suffix: "mins."

在 主题的 config文件中找到，并且输入 true即可，效果可以自行查看。

打赏功能

在主题的 config中找到如下的 raward功能

enable选择打开，comment输入文字
在缀主题的images文件夹中把你的付款码的图片放到 /blog /themes /next /source /images/ 中，它会按照这个路径寻找图片

可以发现这个images文件夹里面的图片都是可以修改的，找到合适的地点，然后更改你的图片即可换成你想要的图片了。

切换主题

在主题的config文件夹中找到这个地方，直接注释或者取消注释即可

添加不蒜子统计

在主题的config文件中找到这个地方，直接enable输入true即可。它可以帮助我们统计网站的观看人数

添加百度统计

为hexo的next主题添加百度统计功能，

博客头像

在主题的配置文件中搜索：avator

在主题的 images文件夹中放入你的图片，然后填写路径即可。

# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: false
  # If true, the avatar will be rotated with the cursor.
  rotated: false

url：头像的url地址，可以是image/xxx.png，注意images是主题文件夹下的source里面的
rounded：头像圆形显示
rotated：头像随鼠标旋转

添加侧边栏社交图片

在主题的配置文件中搜索social
修改即可：

social:
  GitHub: https://github.com/luumod || fab fa-github
  E-Mail: mailto:1173012900@qq.com || fa fa-envelope
//以下可以直接取消注释，然后在后面添加图标
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

注意：图标的设置可以直接访问这里：font Awesome
直接搜索想要的图标然后复制粘贴即可。

添加RSS订阅

首先执行命令

npm install hexo-generator-feed --save

打开 Hexo 站点下的 _config.yml ,添加如下配置：
直接在底部复制粘贴以下内容即可

# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

友情链接

打开 themes/next/_config.yml 文件,搜索关键字 Blog rolls：
设置即可：

icon：设置图标
title：标题
links：输入你的友情链接，可以直接修改或者添加

# Blog rolls
links_settings:
  icon: fa fa-link
  title: Links
  # Available values: block | inline
  layout: block

links:
  #Title: http://yoursite.com
  
  CSDN: https://blog.csdn.net/jj6666djdbbd?type=blog
  Luogu: https://www.luogu.com.cn/user/914079

文章添加边框阴影效果

注意：效果不好，建议弃用

参加我的路径：

F:\hexo\blog\themes\next\source\css\_common\components\post

找到 post.styl文件，添加下面一段话：

// 主页文章添加阴影效果
.post {
   margin-top: 0px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

修改文章之间的分割线

同上一节的文件夹目录
找到 post-eof.styl

其中可以自行修改 height 和 width

.post-eof {
  background: $grey-light;
  height: 3px;
  margin: $post-eof-margin-top auto $post-eof-margin-bottom;
  text-align: center;
  width: 100%;

  .post-block:last-of-type & {
    display: none;
  }
}

背景添加线条

按照我的路径，进入这个文件夹：

F:\hexo\blog\themes\next\layout\_layout.swig

在< body> 到 </ body>中间的任意位置添加下面的代码：位置可以选择在40多行。

{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

然后打开主题的配置文件，复制粘贴进去以下内容：

# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

文章透明度设置

参考我的目录：

正文部分：

F:\hexo\blog\themes\next\source\css\_schemes\Pisces

找到 _layout.styl 文件
搜索 .content-wrap
第一行 background后面的内容改为

background: rgba(255,255,255,0.7);

0.7就是透明度，可以自己设置

菜单部分：
找到 .header-inner 的background和上面同理

隐藏底部由... 强力驱动

参考我的路径，找到 footer.swig

F:\hexo\blog\themes\next\layout\_partials

找到第 51行，修改为内容如下：
其实就是在首尾加了个 <!- - -->用于隐藏中间的内容，直接复制我的下面的覆盖即可，或者直接删除

<!-- {{- __('footer.powered', next_url('https://hexo.io', 'Hexo', {class: 'theme-link'}) + ' & ' + next_url(next_site, 'NexT.' + theme.scheme, {class: 'theme-link'})) }} -->

添加文章的字数统计

下载插件：

npm install hexo-symbols-count-time --save

然后打开根目录的配置文件，复制粘贴以下内容：

symbols_count_time:
  # 每篇文章显示
  symbols: true
  time: true
  # 文章底部显示
  total_symbols: false  
  total_time: false
  # 是否统计代码块
  exclude_codeblock: false
  awl: 2
  wpm: 275
  suffix: "mins."

添加网站运行时间

打开这个路径的文件：

F:\hexo\blog\themes\next\layout\_partials\footer.swig

在文件的末尾复制粘贴以下内容：

<!-- 网站运行时间的设置 -->
<span id="timeDate">载入天数...</span>
<span id="times">载入时分秒...</span>
<script>
    var now = new Date();
    function createtime() {
        var grt= new Date("03/01/2023 10:00:00"); //此处修改你的建站时间或者网站上线时间
        now.setTime(now.getTime()+250);
        days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
        hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
        if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
        seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
        document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒.";
    }
setInterval("createtime()",250);
</script>

即可在网页的页脚显示网站已经运行了多长时间

效果如下:

添加页面顶部加载条

第一步：

$ cd themes/next
$ ls
_config.yml  crowdin.yml  docs  gulpfile.js  languages  layout  LICENSE.md  package.json  README.md  scripts  source

第二步：

$ git clone https://github.com/theme-next/theme-next-pace source/lib/pace

第三步：

打开next主题配置文件，然后搜索pace 修改为true即可。

pace:
  enable: true
  # Themes list:
  # big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
  # corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
  theme: minimal

这边推荐选择theme的主题为minimal即可，别的都不好看。

右上角Github图标

直接在主题配置文件中搜索：github_banner

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/luumod
  title: Follow me on GitHub

然后修改内容即可。

文末尾版权声明

主题配置文件中直接搜索并且修改以下内容即可：

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: zh-CN

posted @ 2023-04-02 13:17 hugeYlh 阅读(488) 评论(0) 编辑收藏举报

helloylh