Hexo博客搭建

前言

手里刚买了两个域名，一个用来套cloudflare拯救我的小机场，一个就闲置下来了，偶然想到，如果域名也用cloudflare代理，那使用githubPages搭建博客访问速度也就可以接受了，而且相对国内服务器价格水涨船高+域名备案，想要拥有一个个人网站的小博客也困难重重，所以花了一下午，跟着教程搭建了这个博客

准备项：

  • 域名（貌似国内外都可以，我用的国外的（namesilo）
  • CloudFlare账号
  • Github账号(如果使用gitee可以跳过第三项)
  • 本机电脑安装Git、nodeJS
  • 科学上网（本地电脑全局代理）推荐clash

搭建步骤

参考教程：GitHub Pages + Hexo搭建个人博客网站

这里我不做详细步骤阐述，只说一些注意点

（1）创建Github仓库
  • 点击右上角头像 -> your repositories -> 右上方点击 new -> 新建一个仓库

注意：填写仓库名，格式必须为<用户名>.github.io，然后点击Create repository。

这也是你的githubpage访问地址

  • Desciption可简要描述，不填也可
  • 下方选择public 作为公共仓库
  • Add a README （描述文件，可不选）
  • Add .gitgnore (git提交忽略文件设置，可不选)
  • Choose a license （选择一个许可证， 可不选）
  • 点击Create repository

到此为止，新建仓库完成，可以 creating a new file生成一个index.html 测试 <用户名>.github.io 访问是否成功

（2）安装 hexo 静态博客

  • 安装 Hexo 并查看是否安装成功： 

    1
    2
    3
    4
    npm install -g hexo-cli
    //如果 控制台没有滚动安装，检查是否安装nodejs 和 nodejs 的环境遍历
    hexo -v
    //打印出hexo 版本

  • 创建一个项目

    1
    2
    3
    4
    5
    6
    //初始化 项目 hexo-blog 为项目名称
    hexo init hexo-blog
    // 进入 hexo-blog目录
    cd hexo-blog
    // npm 安装
    npm install

  • 本地启动

    1
    2
    3
    4
    5
    // hexo generate 的缩写  生成网站静态文件到默认设置的 public 文件夹
    hexo g
    // hexo server 缩写 本地启动hexo  默认端口4000  http://localhost:4000
    hexo s
    // 打开浏览器应该能够看到hexo的主页了

  • 主题安装

Hexo 默认的主题不太好看，按照教程推荐，我安装了 Fluid，推荐使用官方安装教程，我这里简略说一下

一键安装（方法一）：我没有成功

npm install --save hexo-theme-fluid

手动下载（方法二）：

下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

指定主题

如下修改 Hexo 博客目录中的 _config.yml：

1
2
3
theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

4. 创建「关于页」

首次使用主题的「关于页」需要手动创建：

1
2
hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

1
2
3
4
5
6
7

---
title: about
layout: about
---
这里写关于页的正文，支持 Markdown, HTML

现在重新运行 hexo s,应该就可以看到主题了

个性化页面展示

注意 项目根目录如果有_config.fluid.yml文件，在/themes/fluid/_config.yml配置不生效，解决办法，删除根目录config.fluid.yml文件或者复制/themes/fluid/_config.yml文件内容到config.fluid.yml中

1. 浏览器tab页名称

修改根目录下 _config.yml 中的 title 字段。换成你自己的信息

1
2
3
4
5
6
7
8
# Site
title: nerkeler's blog
subtitle: ''
description: 'nerkeler的个人博客'
keywords:
author: nerkeler
language: zh-CN
timezone: ''
2. 博客标题

主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段。

1
2
3
4
5
6
7
# 导航栏的相关配置
# Navigation bar
navbar:
  # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
  # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
  blog_title: "nerkeler"

3. 主页正中间的文字

主题目录 themes\fluid 下 _config.yml 中的 text 字段。

1
2
3
4
5
6
7
8
9
# 首页副标题的独立设置
# Independent config of home page subtitle
slogan:
  enable: true

  # 为空则按 hexo config.subtitle 显示
  # If empty, text based on `subtitle` in hexo config
  text: "nerkeler 的个人博客"

添加阅读量统计

参照教程，使用LeanCloud统计阅读量

1. 申请LeanCloud账号并创建应用

进入 官网 注册账号 -> 完成实名认证 -> 完成邮箱认证 -> 创建应用，选择开发版即可，免费 -> 名称随意如（个人博客应用）、描述随意，可不写 -> 点击创建

2、记录AppID 和 AppKey

设置 -> 应用凭证 -> AppID 和 AppKey

3、修改Fluid配置

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

单篇文章阅读量计数
1
2
3
4
5
# 网页访问统计
# Analysis of website visitors
web_analytics:  # 网页访问统计
  enable: true

配置 leancloud的 app_id 和 app_key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
# LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
leancloud:
  app_id: 你的appid
  app_key: 你的appkey
  # REST API 服务器地址，国际版不填
  # Only the Chinese mainland users need to set
  server_url:
  # 统计页面时获取路径的属性
  # Get the attribute of the page path during statistics
  path: window.location.pathname
  # 开启后不统计本地路径( localhost 与 127.0.0.1 )
  # If true, ignore localhost & 127.0.0.1
  ignore_local: false

打开计数功能，统计来源改为 leancloud

1
2
3
4
5
6
7
8
# 浏览量计数
# Number of visits
views:
  enable: true
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: "leancloud"
页面底部展示网站的 PV、UV 统计数
1
2
3
4
5
6
7
8
9
10
11
12
# 展示网站的 PV、UV 统计数
# Display website PV and UV statistics
statistics:
  enable: true

  # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
  # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
  # Options: busuanzi | leancloud
  source: "leancloud"

# 国内大陆服务器的备案信息
# For Chinese mainland website policy, other areas keep disable
添加评论功能

打开主题目录 themes\fluid下的 _config.yml 文件，修改如下配置

1
2
3
4
5
6
7
8
# 评论插件
# Comment plugin
comments:
  enable: true
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  type: valine

配置 LeanCloud 的 appId 和 appkey

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
  appId: 你的appid
  appKey: 你的appkey
  path: window.location.pathname
  placeholder:
  avatar: 'retro'
  meta: ['nick', 'mail', 'link']
  requiredFields: []
  pageSize: 10
  lang: 'zh-CN'
  highlight: false
  recordIP: false
  serverURLs: ''
  emojiCDN:
  emojiMaps:
  enableQQ: false

重新部署后，查看页面效果，各个功能是否开启，部署在本地时评论无法提交，会报跨域问题，发布到 GitHub Pages 上之后课正常提交评论

发布到GitHub Pages

这里直接用了教程方式一，不成功的可以区看方式二

安装hexo-deployer-git：
  • ```
    npm install hexo-deployer-git –save
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    ##### `Github`新建token

    `Setting ---> developer settings --> personal access tokens --> Tokens(classic) --> Generate new token`

    ***token 只显示一次，记录下来***

    修改根目录下的 `_config.yml`，配置 `GitHub` 相关信息

    ```yml
    deploy:
      type: git
      repo: https://github.com/nerkeler/nerkeler.github.io（换成你的）
      branch: main
      token: 你的token

部署到GitHub(更新和部署命令 很重要，第二种方式更新太麻烦)，需要科学上网全局代理（如果带不开github)

1
hexo g -d

部署成功后 浏览器访问自己的githubpage 测试是否成功

Hexo-admin后台管理

Hexo没有后台管理页面，这意味着我们只能通过本地生成文章并推送，很不方便，Hexo-admin可以帮助我们后台编辑、发布文章，不需要用命令执行新建和编辑文章。但是无法Hexo-admin是动态页面，我们不能在githubpage上访问到。

安装命令
1
npm install hexo-admin --save

安装完成后，本地启动Hexo后访问 http://localhost:4000/admin 即可进入后台页面，第一次进入后台后可在SETTING下输入username和password生成账号密码

输入内容后下滑，找到生成的代码，复制到“_config.yml

1
2
3
4
admin:
  username: admin
  password_hash: 生成的密码串
  secret: my super secret phrase

重启项目后访问即可登录，如果部署在githubpage上，那只能在本地使用，我觉得没有必要设置账户密码

分类和标签

在hexo-admin 后台新建文章，右上角 点击设置图标 Categories为文章分类 tags为标签，点击publish即可发布，文章点击后既发布但是页面没有发生跳转

更新到Githubpage
1
hexo g -d

绑定域名

国内域名（我不清楚这样是否要备案）

添加githubPage主机解析

1
2
3
4
5
HOSTNAME	TYPE	ADDRESS / VALUE		DISTANCE/PRIO	
			A		185.199.108.153			NA				
			A		185.199.109.153			NA				
			A		185.199.110.153			NA					
			A		185.199.111.153			NA

进入GitHub博客仓库主页，

SETTING ----> Pages ----> Custom domain

填写自己的域名，打开 下方enforce Https 如果显示错误也没有关系，不用管

国外域名 （cloudFlare)代理
注册CloudFlare

Websites --> add a site

将自己的域名添加进CloudFlare，并设置域名解析的dns (NameServer)按照CloudFlare 指示的步骤设置好，打开小云朵（使用CloudFlare代理，解决githubPage访问问题）

CloudFlare添加如下记录(记得打开小云朵)

1
2
3
4
A		185.199.108.153			NA				
A		185.199.109.153			NA				
A		185.199.110.153			NA					
A		185.199.111.153			NA

点击SSL/TLS 设置成Full (显示如：Your SSL/TLS encryption mode is Full）

再次测试域名访问，应该就成功了，如果无法打开网页，点击chrome/edge无痕窗口重新测试一遍，仍然无法访问，win+r 输入cmd 输入下面的命令

1
ping 你的域名

如果能够ping通，稍等一会应该就好了，还不行，请检查上面的步骤