从零开始搭建个人博客

迟秋白 Lv2
  2024-01-21 18:31:58 2024-01-21 18:31:58 创建   2025-05-04 18:03:30 2025-05-04 18:03:30 更新    4.6k 字  20 分钟  

1本人使用GitHub+Hexo+Vercel搭建博客

注册GitHub

打开网站GitHub: Let’s build from here · GitHub

点击右上角sign up，然后正常输入邮箱，密码，用户名

然后需要做真人验证和邮箱验证，看到以下页面即成功

然后可以选择学生优惠（待更新）

完成登陆之后可以打开
在code这里download zip

安装Git

绑定GitHub

购买域名

安装node.js和Hexo

解析域名

设置next主题

我使用的是next(v7.7.1)，下载地址
打开博客根目录Blog文件夹，右键Git Bash，输入如下代码将next主题下载到目录Blog/themes：

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


1
2
3
4
5
6
7
8
9
10
11
12
13
# Site
title: 归墟
subtitle: ''
description: ''
keywords:
author: 杜佳峰
language: zh-CN
timezone: Asia/Shanghai

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题改为next

主题语言主要是看你的themes/next/language中的简体中文是 zh-CN 还是 zh-Hans：

next主题有四种，如下依次为Muse、Mist、Pisces、Gemini ：




我选的是Gemini，打开目录Blog/themes/next/下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了：

1
2
3
4
5
# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

回到根目录打开Git Bash，输入如下三条命令：

1
2
3
hexo clean
hexo g
hexo d

完成后打开你的博客：

附：
1、如果hexo s看的到样式，在github访问的时候看不到样式，在根目录下的_config.yml的最后的

1
2
3
4
deploy:
type: git
repository: ''
branch: master

更改为

1
2
3
4
deploy:  
type: git  
repository: ''  
branch: main

再 hexo clean && hexo g && hexo d

优化主题

设置菜单

打开主题配置文件即themes/next下的_config.yml，查找menu，将前面的#删除就行了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
menu:
  #home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat
  home: / || home                      #首页
  archives: /archives/ || archive      #归档
  categories: /categories/ || th       #分类
  tags: /tags/ || tags                 #标签
  about: /about/ || user               #关于
  resources: /resources/ || download   #资源
  schedule: /schedule/ || calendar    #日历
  sitemap: /sitemap.xml || sitemap    #站点地图，供搜索引擎爬取
  commonweal: /404/ || heartbeat      #腾讯公益404

“||”前面的是目标链接，后面的是图标名称，next使用的图标全是图标库 - Font Awesome 中文网这一网站的，有想用的图标直接在fontawesome上面找图标的名称就行。resources是我自己添加的。
新添加的菜单需要翻译对应的中文，打开theme/next/languages/zh-CN.yml，在menu下设置：

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  resources: 资源
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404

在根目录下打开Git Bash，输入如下代码：

1
2
3
4
hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "resources"

此时在根目录的sources文件夹下会生成categories、tags、about、resources四个文件，每个文件中有一个index.md文件，修改内容分别如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
title: 分类
date: 2024-01-21 21:29:38
type: "categories"
comments: false
---

---
title: 标签
date: 2024-01-21 21:29:48
type: "tags"
comments: false
---

---
title: 关于
date: 2024-01-21 21:29:57
type: "about"
comments: false
---

---
title: 资源
date: 2024-01-21 21:30:04
type: "resources"
comments: false
---

注：如果有启用评论，默认页面带有评论。需要关闭的话，添加字段comments并将值设置为false。

设置建站时间

打开主题配置文件即themes/next下的_config.yml，查找since：

1
2
3
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2024-01

设置头像

打开主题配置文件即themes/next下的_config.yml，查找avatar，url后是图片的链接地址：

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.jpg  #图片的位置，位于/next/source/images文件下下，也可以是http://xxx.com/avatar.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true  #头像展示在圈里
  # If true, the avatar will be rotated with the cursor.
  rotated: false  #头像随光标旋转

然后将你要的头像图片复制到themes/next/source/images里，重命名为avatar.jpg。

网站图标设置

我是在这个网站找的图标，免费的图标素材网站：Easyicon
下载16x16和32x32的图标后，打开主题配置文件，查找favicon，只要修改small和medium为你的图标路径：

1
2
3
4
5
6
7
favicon:
  small: /images/favicon-16x16.png
  medium: /images/favicon-32x32.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

设置动态背景

canvas nest 风格

在themes/next目录下打开Git Bash，输入：

bash
1
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

打开主题配置文件即themes/next下的_config.yml，找到canvas-nest，将enable：false改为true：（如果找不到canvas-nest，可能是文件修改了，试试将下面的代码复制粘贴到themes/next中）

1
2
3
4
5
6
7
8
9
10
# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

JavaScript 3D library风格

在themes/next目录下打开Git Bash，输入：

bash
1
git clone https://github.com/theme-next/theme-next-three source/lib/three

打开主题配置文件即themes/next下的_config.yml，找到three，这里有三种风格，可以试一下看看喜欢哪种风格，直接将false改为true就行了，我已经选了canvas-nest，就没有选这种风格：

1
2
3
4
5
6
7
# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: true
  three_waves: false
  canvas_lines: false
  canvas_sphere: false

设置背景图片

打开主题配置文件即themes/next下的_config.yml，将 style: source/_data/styles.styl 取消注释：

1
2
custom_file_path:
  style: source/_data/styles.styl

打开根目录Blog/source创建文件_data/styles.styl，添加以下内容：

1
2
3
4
5
6
7
8
// 添加背景图片
body {
      background: url(/images/background.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: 50% 50%;
}

然后将想要的背景图片放入 themes/next/source/images即可。

主页文章添加阴影效果

打开themes/next/source/css/_common/components/post/post.styl，修改.post-block，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.use-motion {
  if (hexo-config('motion.transition.post_block')) {
    .post-block {
      opacity: 0;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      background:rgba(255,255,255,0.9) none repeat scroll !important;
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
    .pagination, .comments{
      opacity: 0;
    }
  }

还有一种方法打开Blog/source/_date/style.styl文件，添加以下代码：

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.post {
   margin-top: 60px;
   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);
}

添加顶部加载条

在themes/next目录下打开Git Bash，输入：

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

打开主题配置文件即themes/next下的_config.yml，找到pace，将enable：false改为true，你还可以选择类型（theme）：

1
2
3
4
5
6
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

设置预览摘要

next（v7.7.1）已经没有如下代码：

1
2
3
auto_excerpt:
  enable: true
  length: 150

所以不需要设置，只要我们在文章中插入 <!– more –>，该标签之上的是摘要，之后的内容不可见，需点击全文阅读按钮：

1
<!-- more -->

设置侧边栏显示效果

打开主题配置文件即themes/next下的_config.yml，找到Sidebar Settings，设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

侧边栏推荐阅读

打开主题配置文件即themes/next下的_config.yml，搜索links（里面写你想要的链接）：

1
2
3
4
5
6
7
8
links_settings:
  icon: link
  title: 链接网站  #修改名称

links:
  #Title: http://yoursite.com
  百度: https://baidu.com
  鱼C论坛: https://fishc.com.cn

添加社交链接

打开主题配置文件即themes/next下的_config.yml，搜索social：

1
2
3
social:
  GitHub: https://github.com/chiqiubai || github
  E-Mail: mailto:2048009367@qq.com || envelope

“||”前面的是链接，后面的是 FontAwesome图标名称。

设置博文内链接为蓝色

打开themes/next/source/css/_common/components/post/post.styl文件，将下面的代码复制到文件最后：

1
2
3
4
5
6
7
8
.post-body p a{
     color: #0593d3;
     border-bottom: none;
     &:hover {
       color: #0477ab;
       text-decoration: underline;
     }
}

显示文章字数和阅读时长（有问题）

从根目录Blog打开Git Bash，执行下面的命令，安装插件：

bash
1
npm install hexo-wordcount --save

然后打开站点配置文件，在文件末尾加上下面的代码：

1
2
3
4
5
6
symbols_count_time:
  symbols: true                # 文章字数统计
  time: true                   # 文章阅读时长
  total_symbols: true          # 站点总字数统计
  total_time: true             # 站点总阅读时长
  exclude_codeblock: false     # 排除代码字数统计

显示站点文章总字数（另一种统计站点总字数的方法）

从根目录Blog打开Git Bash，执行下面的命令，安装插件：

bash
1
npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

设置文章末尾”本文结束”标记

在路径/themes/next/layout/_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:24px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开/themes/next/layout/_macro/post.swig文件，在post-footer前添加代码：

1
2
3
4
5
{% if not is_index and theme.passage_end_tag.enabled %}
  <div>
    {% include 'passage-end-tag.swig' %}
  </div>
{% endif %}

具体位置如下图：

然后打开主题配置文件（_config.yml)，在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

文章末尾添加版权说明

查找主题配置文件themes/next/_config.yml中的creative_commons：

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true  # 将false改为true即可显示版权信息
  language:

添加访问量统计

打开主题配置文件即themes/next下的_config.yml，找到busuanzi_count，改为true：

1
2
busuanzi_count:
  enable: true

打开/themes/next/layout/_partials/footer.swig，在最后添加如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% if theme.busuanzi_count.enable %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
    <span class="post-meta-divider">|</span>
<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
{% endif %}

添加评论功能

注册安装

我采用的是来必力，具体过程很简单，打开官网：Welcome to LiveRe.com注册账号
然后发送邮箱验证码，输入验证码验证，完成注册后点击上方安装：

选择免费的现在安装，会弹出一个框让你填网站的信息：

然后获取代码：

将data-uid后的代码复制，然后打开主题配置文件_config.yml，找到livere_uid，将代码复制到其后即可：

1
livere_uid: "你的代码"

设置提醒

当有新评论出现时，通过邮箱提醒，点击右上角->管理页面->评论提醒：

添加Fork me on Github

有两种，分别是：


选择你喜欢的类型，打开小猫或者字，复制代码添加到themes/next/layout/_layout.swig文件中，放在<div class=”headband”></div>后面：

1
2
<div class="headband"></div>
      <a href="https://github.com/chiqiubai"><img decoding="async" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_left_red_aa0000.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" loading="lazy" data-recalc-dims="1"></a>

安装Markdown编译器

可以看这篇文章然后选一个适合的文本编译器：几款主流好用的markdown编辑器介绍
我是用的Windows系统，所以我用的是MarkdownPad2，下载地址：The Markdown Editor for Windows，默认安装就行
如果是win10系统还需要安装一个组件 awesomium_v1.6.6_sdk_win，下载链接：链接：https://pan.baidu.com/s/1UJRtOBF8vj19ikOq4452sQ 提取码：yd8k
下载完awesomium_v1.6.6_sdk_win默认安装就行

安装RSS插件

为什么要安装RSS插件呢？不了解的可以看看这篇文章：rss订阅是什么意思?为什么要使用RSS?简单来说，RSS是一种协议，允许网站将其内容或其部分内容提供给其他网站或应用程序。通过使用RSS，可以节省宝贵的时间，并将各个站点提供的新闻和信息组织到一个中心点进行查看，也可以通过从使用RSS联合其内容的其他站点导入新闻来向你的站点添加新闻。

安装hexo-generator-feed插件：

RSS需要有一个Feed链接，而这个链接需要靠hexo-generator-feed插件来生成，所以第一步需要添加插件，在Blog根目录打开Git Bash执行安装指令：

bash
1
npm install hexo-generator-feed --save

配置feed信息：

在站点配置文件末尾加上如下代码：

1
2
3
4
5
6
feed:
  type: rss2
  path: rss2.xml
  limit: 10
  hub:
  content: 'true'

打开主题配置文件，搜索rss，将前面的#去掉：

1
2
3
4
5
follow_me:
  #Twitter: https://twitter.com/username || twitter
  #Telegram: https://t.me/channel_name || telegram
  微信: /images/wechat_channel.jpg || wechat
  RSS: /atom.xml || rss

项目主页添加README

忽略要编译的文件

搜索引擎确认网站所有权时往往会提供一个html文件来进行验证，要是这个文件被渲染了，验证自然就会失败了。或者，有时候会有一些文件不希望Hexo渲染的，因此有必要针对某个文件或者目录进行排除。Hexo的配置文件中提供了配置项skip_render。只有source目录下的文件才会发布到public（能够在网络上访问到），因此Hexo只渲染source目录下的文件。skip_render参数设置的路径是相对于source目录的路径。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
skip_render:   #部署时不包含的文件

#单个文件
skip_render: hello.html

#单个文件夹下全部文件
skip_render: test/* 

#单个文件夹下指定类型文件
skip_render: test/*.md  

#单个文件夹下全部文件以及子目录
skip_render: test/**  

#跳过多个目录，或者多个文件
skip_render: ['*.html', demo/**, test/*]

代码块样式自定义

打开根目录Blog/source/_data/styles.styl，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

支持mathjax公式

打开主题配置文件，搜索mathjax：

1
2
3
mathjax:
    enable: true   #将false改为true
    mhchem: false  #用来写化学方程式

图床网站

推荐七牛云，免费网站，快速，方便，或者可以看看这篇文章选一个合适的网站：软件小编：盘点一下免费好用的图床
网站：七牛云，后面我再写一篇关于如何注册使用七牛云存储图片的文章吧，我先研究研究。

本地搜索

打开cmd安装插件：

1
npm install hexo-generator-search

查找主题配置文件themes/next/_config.yml中的local_search 

1
2
3
local_search:
  enable: true
  trigger: manual   #手动，按回车键或搜索按钮触发搜索

Hexo博客提交百度和Google收录

这篇文章写得很详细：Hexo博客提交百度和Google收录

博文置顶

安装插件

在根目录Blog打开Git Bash，执行下面的命令：

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

设置置顶标志

打开blog/themes/next/layout/_macro目录下的post.swig文件，定位到<div class=”post-meta”>标签下，插入如下代码：

1
2
3
4
5
{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

在文章中添加top

然后在需要置顶的文章的Front-matter中加上top: true即可，如下：

1
2
3
4
5
---
title: Hello World

top: true
---

添加打赏

添加分享（未完成）

图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）

参考

主题 | Hexo
从零开始搭建个人博客（超详细）
Hexo-NexT 设置博客背景图片 - 锦瑟，无端 - 博客园 (cnblogs.com)
关于我使用obsidian加hexo部署个人博客的过程 - SagiRastar’s Blog (sagi-rastar.github.io)
Hexo+Next主题搭建个人博客+优化全过程（完整详细版） - 知乎 (zhihu.com)
Hexo 博客美化合集（不断更新） - 知乎 (zhihu.com)

  • 标题: 从零开始搭建个人博客
  • 作者: 迟秋白
  • 创建于 : 2024-01-21 18:31:58
  • 更新于 : 2025-05-04 18:03:30
  • 链接: https://chiqiubai.cn/2024/01/21/从零开始搭建个人博客/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论
目录
从零开始搭建个人博客
  1. 1. 注册GitHub
  2. 2. 安装Git
  3. 3. 绑定GitHub
  4. 4. 购买域名
  5. 5. 安装node.js和Hexo
  6. 6. 解析域名
  7. 7. 设置next主题
  8. 8. 优化主题
    1. 8.1. 设置菜单
    2. 8.2. 设置建站时间
    3. 8.3. 设置头像
    4. 8.4. 网站图标设置
    5. 8.5. 设置动态背景
      1. 8.5.1. canvas nest 风格
      2. 8.5.2. JavaScript 3D library风格
    6. 8.6. 设置背景图片
    7. 8.7. 主页文章添加阴影效果
    8. 8.8. 添加顶部加载条
    9. 8.9. 设置预览摘要
    10. 8.10. 设置侧边栏显示效果
    11. 8.11. 侧边栏推荐阅读
    12. 8.12. 添加社交链接
    13. 8.13. 设置博文内链接为蓝色
    14. 8.14. 显示文章字数和阅读时长（有问题）
    15. 8.15. 显示站点文章总字数（另一种统计站点总字数的方法）
    16. 8.16. 设置文章末尾”本文结束”标记
    17. 8.17. 文章末尾添加版权说明
    18. 8.18. 添加访问量统计
    19. 8.19. 添加评论功能
      1. 8.19.1. 注册安装
      2. 8.19.2. 设置提醒
    20. 8.20. 添加Fork me on Github
    21. 8.21. 安装Markdown编译器
    22. 8.22. 安装RSS插件
      1. 8.22.1. 安装hexo-generator-feed插件：
      2. 8.22.2. 配置feed信息：
    23. 8.23. 项目主页添加README
    24. 8.24. 忽略要编译的文件
    25. 8.25. 代码块样式自定义
    26. 8.26. 支持mathjax公式
    27. 8.27. 图床网站
    28. 8.28. 本地搜索
    29. 8.29. Hexo博客提交百度和Google收录
    30. 8.30. 博文置顶
      1. 8.30.1. 安装插件
      2. 8.30.2. 设置置顶标志
      3. 8.30.3. 在文章中添加top
    31. 8.31. 添加打赏
    32. 8.32. 添加分享（未完成）
    33. 8.33. 图片可点击放大查看，放大后可关闭（fancybox可能有点问题，暂时未实现）
  9. 9. 参考