hexo搭建博客详解

hexo搭建个人博客

1. 安装及基础配置

1. 安装nodejs（下载地址）
2. 安装Git （下载地址）
3. 安装hexo并运行：在某个文件夹下打开cmd窗口执行以下命令
   • 安装： npm install -g hexo-cli
   • 初始化： hexo init [folder] 在指定目录或当前工作目录下生成一些必要的文件
   • 生成： hexo g ，如果上一步指定了folder先切换一下工作目录 cd folder
   • 运行： hexo s ，访问 http://localhost:4000 即可访问默认主题下的博客页面
4. 利用Pages功能部署到GitHub上，以便能够让其他人访问你的博客

2. GitHub部署

1. 创建一个GitHub仓库，仓库名一定要是 账户名.github.io

2. 开通Pages服务，在仓库设置项中

   

3. 安装git部署插件

   1	npm install --save hexo-deployer-git

4. 填写站点**_config.yml** 配置文件中最后deploy属性部分如下：

   1 2 3 4 5 6

   # Deployment ## Docs: https://hexo.io/docs/one-command-deployment deploy: type: git repo: 你的仓库访问地址 branch: master(可能是main,视具体情况而定)

5. 运行命令

   1	hexo g & hexo d

   上面命令就是先生成然后上传public文件夹内的文件到你的仓库

6. 从page网址就可以进入你的博客了。

3. 基础配置文件说明

1. public文件夹，里面是博客网站所需要的所有静态文件，当每次用 hexo g 命令之后就会生成网站所需要的文件，其中的index.html就是网站入口（主页）；
2. scaffolds文件夹，里面是创建博客，标签，分类等文件夹所用到的模板
   • hexo new post blog1
   • hexo new tags tags
   • hexo new categories categories
3. source文件夹，就是存放博客(_posts文件夹，md格式)，标签，分类元数据等内容的
4. themes主题文件夹，将网上找的主题放里面，在_config.yml文件中修改主题为对应主题文件夹的名字即可应用该主题
5. _config.yml站点配置文件，在里面设置各种与网站相关的属性，具体见官网
6. packages.json安转的一些nodejs包，不用管。

4. 运用主题

这里值得说明的是，官方给出的主题库中很多主题其实是存在问题的，而自己可能在使用过程中出现问题又不知道怎么去修改，所以找一个比较火的主题其实是比较推荐的（比如next)。我自己选了个比较符合自己喜好的主题，但是应用的过程中踩了很多坑，这里记录一下，供大家参考借鉴，未必适用你的主题。

我选用的是clean主题，比较简洁干净的一个主题，若需要使用请先阅读官方装上一些必备的包。

4.1 bugs fix

首先修复一下主题文件中几个bug，博客最下面上一页和下一页的位置反了，找到以下文件：

1. ..\MyBlog\themes\clean\layout\_partial\pagination.ejs，正确代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<ul class="pagination d-block text-center">
  <% if (page.prev){ %>
  <li class="previous page-item d-inline">
    <a
      href="<%- config.root %><%- page.prev_link %>"
      class="page-link float-left"
      >&larr; <%- __('prev')%></a
    >
  </li>
  <% } %> <% if (page.next){ %>
  <li class="next page-item d-inline">
    <a
      href="<%- config.root %><%- page.next_link %>"
      class="page-link float-right"
      ><%- __('next')%> &rarr;</a
    >
  </li>
  <% } %>
</ul>

2. ..\MyBlog\themes\clean\layout\_partial\post\post-footer.ejs, 正确代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<% if (page.prev || page.next) { %>
<div class="col-lg-8 offset-lg-2 col-md-10 offset-md-1">
  <ul class="pagination d-block text-center">
    <% if (page.prev){ %>
    <li class="previous page-item d-inline">
      <a href="<%- url_for(page.prev.path) %>" class="page-link float-left"
        >&larr; <%- __('prev')%></a
      >
    </li>
    <% } %> <% if (page.next){ %>
    <li class="next page-item d-inline">
      <a href="<%- url_for(page.next.path) %>" class="page-link float-right"
        ><%- __('next')%> &rarr;</a
      >
    </li>
    <% } %>
  </ul>
</div>
<% } %>

4.2 使用gitalk添加评论功能

1. 注册GitHub上的OAuth应用，链接

   • 应用程序名随意填
   • homepageURL是你的博客网页地址，也就是上面的GitHubPages得到的地址
   • Authorization callback URL同上

2. 在你的主题配置文件中找到配置gitalk相关的部分，一般需要填入以下内容，也就是上述步骤得到的一些参数，accessToken也是在OAuth下的一个tab中生成的(访问地址)：

   

3. 注意上面的repo项填的只是你的仓库名，而不是仓库的整个访问地址，这个是用来放评论的仓库，可以直接用上面步骤1中创建的那个托管博客网页的仓库，也可以另外建个仓库，owner和admin就是你的用户名（一定不要填错，直接复制粘贴最保险，我就是admin漏了个字母找了超级久bug，填错在评论区会出现error not found 的错误）。

完成以上步骤后就可以重新生成然后部署到网站上了。

以下几个是修改完一些内容后进行生成和部署的命令，比较常用：

1
2
3

hexo clean # 删掉public文件夹，清理
hexo g     # 重新生成public内的文件
hexo d     # 部署到GitHub上

部署完就可以打开你的博客看看效果了，第一次应该是要先让你用GitHub登录一下，然后就能开启评论功能了，貌似每篇博客都得你自己先登一下，不过也就一键点击的事。

4.3 标签页 分类页 关于我等页面制作

这里以tags页面创建为例，说明这一类页面怎么支座生成。

输入以下命令：

1

hexo new page tags tags

会在source文件夹下生成一下tags文件夹，里面有一个index.md文件，类似：

1
2
3
4
5
6

---
title: 标签
date: 2021-10-04 14:10:47
type: tags
layout: tags
---

title可以自己改，type填tags，最后一项layout很重要，我这个主题没有这一项就无法显示标签页，也是网上找了很久的解决方案才知道的。可能有点主题不需要，如果有问题就加上试试。这一项的内容，根据你主题文件夹下用于控制便签页布局的文件名而定，比如我的主题中是这样的：

那就填上tags，配置完保存即可。

然后在 source/_posts文件夹下，也就是存放博客内容的地方，对某一篇推文添加标签：

上面展示的是一篇博客(.md文档)的头部信息，以上下三根短线 — 为开头结尾，说明一些博客基本信息，最终不会渲染出来，就像HTML文档的head部分。添加上tags这个属性，每个标签以 - tag 的格式书写，注意中间有空格，不然不能正确识别。保存后，标签页就算完成了，重新生成部署一下hexo，打开网站就能见到如下的标签搜索页：

分类页同理制作。

• ← 上一篇
• 下一篇 →