如何搭建部署个人博客，并对博客主题进行自定义

使用“Hexo框架 + Butterfly主题 + GithubPage”搭建博客网站

环境安装：

3.安装Hexo框架：“Win + R”输入“cmd”，打开命令行窗口，输入指令：

1	npm install -g hexo-cli

创建Blog：

1.在任意位置新建存放博客的文件夹，如“d:\HexoBlog”。打开“HexoBlog”文件夹，打开“Git Bash”命令行窗口，输入指令初始化该文件夹(其会从github上拉取Hexo相关的内容)

hexo init

由于会从Github拉取项目，网络问题经常会失败，多试几次。成功时效果如下：

2.安装相关依赖：

在博客根目录下打开“Git Bash”窗口，输入以下指令，安装相关依赖：

1	npm install

3.在本地预览网页

在博客根目录下打开“Git Bash”窗口，输入“hexo s”（即“hexo server”）启动本地Hexo服务器。在浏览器中输入“http://localhost:4000”，即可预览网页(Hexo框架默认使用内置的landscape主题)

博客根目录下各个文件和文件夹的作用解析：

node_modules：存放插件以及Hexo所需的node.js各模块
package.json：应用程序信息，配置Hexo运行所需js包
scaffolds：存放模板

重要文件/文件夹：

themes：存放主题，后续可为网站配置各个不同的主题，该文件夹用于存放各个主题的内容
source：默认包含“_posts”文件夹，后续所有需要发布的博客“xx.md”文件都需要放在“_posts”文件夹内(Hexo会遍历该文件夹下各个“xx.md”文件，为其生成静态网页)。

PS：该文件夹内还可以自定义其他文件或文件夹，如存放各个主题配置文件“_config.xx.yml”中用到的图片，此时可在“source”下创建“images”文件夹(名字随意，不要以“下划线”开头即可)
_config.yml：博客根目录的配置文件，编写“网站标题title、网站用到的主题theme、部署地址deploy”等，如：

与各个主题对应的“_config.xx.yml”的作用不同，后者主要用于自定义该主题内部的各个参数
public：当在“git bash”窗口中输入“hexo g”(即"hexo generate")后，会在博客根目录下创建“public文件夹”，用于存放“source/_posts”下各个“xx.md”文件生成的静态网页数据。因此“public文件夹”即代表最终网页展示的所有内容

Blog部署：

这里使用“Github Page”部署博客内容

1.在Github中新建public仓库，仓库名称的格式必须为“用户名.github.io”，无需勾选“add readme file”（后面会创建“index.html”文件）

2.创建“index.html”文件

文件名称必须为“index.html”，内容可自定义，之后提交即可：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
</head>
<body>
    <h1>xxx的个人主页</h1>
    <h1>Hello,today!</h1>
</body>
</html>

3.查看主页地址：

在该仓库“Settings -> Pages”中即可查看到本仓库的网页地址(与git仓库地址不同)

以上链接地址是自动生成的(当仓库名称填写为“xx.github.io”时，该仓库会自动变更为Pages。“index.html”则代表网页默认展示内容)。在浏览器中输入该链接，如“https://xx.github.io”即可访问

注意：创建仓库完毕后马上查看GithubPages地址有可能会失败，等待一会后刷新该页面即可

4.部署Blog到Github Pages：

安装hexo-deployer-git：

在博客根目录下打开“Git Bash”窗口，输入以下指令：
1
npm install hexo-deployer-git --save
配置“_config.yml”文件：

打开博客根目录下的“_config.yml”文件，修改“deploy”参数为：
1
2
3
4
deploy:
type: git
repo: https://github.com/xx/xx.github.io.git
branch: main

生成网页数据并发布

在博客根目录下打开“Git Bash”窗口，并依次执行以下指令：

hexo clean     //清除之前生成的网页数据
hexo g         //即“hexo generate”，根据“xx.md”重新生成网页数据，即“public文件夹”


hexo d         //即“hexo deploy”，根据“_config.yml”文件中“deploy”参数相关的配置，将本地“public文件夹”中的网页数据部署到Github Pages。与“使用Git工具上传项目文件”流程相同

上传git远程仓库成功后，等待一会刷新GithubPages地址“https://xx.github.io”即可生效

Blog主题配置：

Hexo官方有很多主题(https://hexo.io/themes/)，可以自由设置Hexo框架的主题。这里以Butterfly主题为例：

1.下载Butterfly主题：

Butterfly主题官网：https://github.com/jerryc127/hexo-theme-butterfly

在博客根目录下打开“Git Bash”窗口，输入以下指令将“Butterfly主题文件”下载到本地指定目录：

//Github地址
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

//Gitee地址(针对国内用户)
git clone -b master https://gitee.com/immyw/hexo-theme-butterfly.git themes/butterfly

执行成功后即可在“theme文件夹”下出现“butterfly”主题文件夹

2.在博客根目录下打开Git Bash窗口，并输入

1	npm i hexo-theme-butterfly //简写“i”代表“install”

由于Butterfly主题使用“pug”和“stylus”渲染器，因此还需要安装相应插件：

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

3.设置网站当前使用的主题为“Butterfly”：

在博客根目录下，打开“_config.yml”文件，修改theme参数值为“butterfly”即可：

注意：theme参数后有空格，且主题名字与上一步中下载到本地的“Butterfly主题”的文件夹名字一致，即“butterfly”文件夹

4.启动本地网页预览：

在博客根目录下打开“Git Bash”窗口，依次执行以下指令：

1
2
3

hexo clean        //清除之前生成的“public网页内容”
hexo g            //即“hexo generate”，根据“xx.md”生成博客网页目录
hexo s            //即“hexo server”，启动本地预览

也可以将以上指令合并，直接执行：

1	hexo clean && hexo g && hexo s

在本地测试OK后，再执行“hexo d”发布到远程即可

Butterfly主题自定义：

进入“butterfly主题”文件夹内部，复制该主题自身的“_config.yml”文件，然后退回到“博客根目录”下，粘贴该文件，并重命名为“_config.butterfly.yml”。

注意：“butterfly主题”文件夹内部的“_config.yml”文件不要删除。Hexo框架会自动比较“根目录下的config.butterfly.yml”和“主题文件夹内部的config.yml”文件，并且优先使用根目录下的“config.butterfly.yml”中的设置

统计文章字数：

1).安装“hexo-wordcount”插件：在博客根目录下打开“git bash”窗口，执行

1	npm install hexo-wordcount --save

2).在“_config.butterfly.yml”中开启“wordcount”功能

本地搜索：

1).安装“hexo-generator-search”插件：在博客根目录下打开“git bash”窗口，执行指令：

1	npm install hexo-generator-search --save

2).在博客根目录下新建“search.xml”文件，并粘贴以下内容：

<?xml version="1.0" encoding="utf-8"?>
<search> 
  {% if posts %}
  {% for post in posts.toArray() %}
    {% if post.indexing == undefined or post.indexing %}
    <entry>
      <title>{{ post.title }}</title>
      <link href="{{ (url + post.path) | uriencode }}"/>
      <url>{{ (url + post.path) | uriencode }}</url>
      {% if content %}
        <content type="html"><![CDATA[{{ post.content | noControlChars | safe }}]]></content>
      {% endif %}
      {% if post.categories and post.categories.length>0 %}
      <categories>
          {% for cate in post.categories.toArray() %}
          <category> {{ cate.name }} </category>
          {% endfor %}
      </categories>
      {% endif %}
      {% if post.tags and post.tags.length>0 %}
        <tags>
            {% for tag in post.tags.toArray() %}
            <tag> {{ tag.name }} </tag>
            {% endfor %}
        </tags>
      {% endif %}
    </entry>
    {% endif %}
    {% endfor %}
  {% endif %}
  {% if pages %}
    {% for page in pages.toArray() %}
    {% if post.indexing == undefined or post.indexing %}
    <entry>
      <title>{{ page.title }}</title>
      <link href="{{ (url + page.path) | uriencode }}"/>
      <url>{{ (url + page.path) | uriencode }}</url>
      {% if content %}
        <content type="html"><![CDATA[{{ page.content | noControlChars | safe }}]]></content>
      {% endif %}
    </entry>
    {% endif %}
    {% endfor %}
  {% endif %}
</search>

3).打开博客根目录下的“_config.yml”，添加以下内容：

search:
  path: search.xml
  field: post
  content: true
  template: ./search.xml

path：执行“hexo g”后，会根据这里的路径在“public文件夹”下生成“search.xml”文件
field：指定搜索范围，包含“post - 仅文章”， “page - 仅页面”， “all - 文章和页面”。默认post
content：是否在生成的“public/search.xml”文件中包含博客的文本内容。默认为true
template：在执行“hexo g”指令时，以博客根目录下的“search.xml”为模板，在“public文件夹”下生成新的索引文件“search.xml”

网络链接图片的显示：

当在“xx.md”文件中使用Gitee图床时，由于Gitee服务器会自动开启“防盗链”功能，因此“Hexo框架”生成的静态网页无法显示该Gitee网络链接图片。

解决方法：修改主题的页面头部head模板。如“butterfly主题”，打开“layout/includes/head.pug”文件，添加

1	meta(name="referrer" content="no-referrer")

部分主题可能使用的是"EJS或Swig"语言，则head模板文件可能为“layout/_partial/head.swig"或“head.ejs”，此时则添加：

1	<meta name="referrer" content="no-referrer">

如Pug语言则为：

之后保存该文件，重新生成静态网页即可

文章链接调整：

打开文章详情页，底部会展示该文章的点击链接，默认显示“http://example.com”前缀。此时需要修改博客根目录下的“_config.yml”文件的“url”参数值，如：

效果如下：

调整Hexo渲染器，支持多语法显示

Hexo默认渲染器“hexo-renderer-marked”对于部分语法不支持，无法显示文本高亮等特性。故调整渲染器为“hexo-renderer-markdown-it”，比默认渲染器效率更高，且功能更为全面

1).卸载默认渲染器：

1	npm un hexo-renderer-marked --save

2).安装“hexo-renderer-markdown-it”

1	npm i hexo-renderer-markdown-it --save

3).打开博客根目录下的“_config.xml”文件，添加以下内容：

#使用“hexo-renderer-markdown-it”渲染器(不要使用hexo默认渲染器"hexo-renderer-marked")
markdown:
  preset: 'default'
  render:
    html: true
    xhtmlOut: false
    langPrefix: 'language-'
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  enable_rules:
  disable_rules:
  plugins:    #开启内置插件的功能
    - markdown-it-abbr # https://github.com/markdown-it/markdown-it-abbr
    - markdown-it-cjk-breaks # https://github.com/markdown-it/markdown-it-cjk-breaks
    - markdown-it-container # https://github.com/markdown-it/markdown-it-container
    - markdown-it-emoji # https://github.com/markdown-it/markdown-it-emoji
    - markdown-it-footnote # https://github.com/markdown-it/markdown-it-footnote
    - markdown-it-ins # https://github.com/markdown-it/markdown-it-ins
    - markdown-it-mark # https://github.com/markdown-it/markdown-it-mark
    - markdown-it-sub # https://github.com/markdown-it/markdown-it-sub
    - markdown-it-sup # https://github.com/markdown-it/markdown-it-sup
  anchors:
    level: 2
    collisionSuffix: ''
    permalink: false
    permalinkClass: 'header-anchor'
    permalinkSide: 'left'
    permalinkSymbol: '¶'
    case: 0
    separator: '-'
  images:
    lazyload: false
    prepend_root: false
    post_asset: false
  inline: false  # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline