博客搭建 cloudFlare + hexo + github + 域名

(Updated: )
博客搭建
阅读量 次

Hexo

Hexo 常用命令

1
2
3
4
5
6
hexo clean # 用以清理生成的静态文件
hexo g     # 生成静态文件
hexo s     # 启用本地预览
hexo d     # deploy，将静态文件推送到github仓库
hexo new post [name] # 创建一篇名为name的文章
hexo new post --path 目录/子目录/文件名 "文章标题" # 创建一篇名为文章标题的帖子，并指定路径

主题

本系统使用的 cactus 主题，github地址是：https://github.com/probberechts/hexo-theme-cactus

使用 git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus 安装

注意，直接克隆下来的主题代码，需要处理git子模块问题，使其变为普通文件夹

如果需要修改相关样式，在 themes/cactus/source/css/ 下找到对应组件的 css 文件进行修改

图片

图片保存在与文章同名的文件夹中，如 source/_posts/2026/03/buildBlog.md 对应的图片保存在 source/_posts/2026/03/buildBlog/ 文件夹中

使用方式：![图片描述](image.jpg)

需要下载插件，npm install hexo-asset-img --save，并开启下面的配置

1
2
3
4
5
6
7
8
9
10
11
# 开启后，会自动创建和文章名同名的目录，可以用来存放图片
post_asset_folder: true

# 配置 Markdown 渲染器
marked:
  # 让图片链接相对于 source 目录
  prependRoot: false
  # 启用文章资源文件夹的支持
  postAsset: true
  # 改图片链接为相对路径，而不是绝对路径
  modifyAnchors: ''

效果如下

图片描述

评论插件

使用的 Gitalk，基于 Github Issues 的评论插件，操作如下

  1. 申请授权：https://github.com/settings/applications/new
  2. 修该主题的 _config.yml 文件，添加下面的配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
post:
  show_updated: true
  comments:  # 开启评论
  enable: true
  type: gitalk # 选择评论插件类型

# Gitalk 配置
gitalk:
  enabled: true         
  language: zh-CN  
  owner: 'XiaoEns'                                        # github 账户名          
  repo: blog-comment                                      # 仓库名称
  admin: ['XiaoEns']                                      # 注意这里是数组格式
  client_id: Ov23litUJQk9q90IJpPk                         # 从 GitHub OAuth Apps 获取
  client_secret: 0f7ca4f2cfd1b2f898d7ad405137978f708ba4c8 # 从 GitHub OAuth Apps 获取
  distractionFreeMode: false    # 是否开启无干扰模式
  perPage: 10                   # 每页大小
  pagerDirection: last          # 评论排序方式， last为按评论创建时间倒叙，first为按创建时间正序
  createIssueManually: true     # 如果当前页面没有相应的 isssue 且登录的用户属于 admin，则会自动创建 issue。如果设置为 true，则显示一个初始化页面
  proxy: https://shielded-brushlands-08810.herokuapp.com/https://github.com/login/oauth/access_token # 有些人搭建的代理
#  proxy: https://cors-server.68756978.xyz/github_access_token  # 备用代理地址1
  1. 我用的是 cactus 主题，没有适配 Gitalk，需要修改 comments.ejs 文件，添加下面的代码：
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
31
<!-- 新增 Gitalk 评论区块 -->
<% if(page.comments && theme.gitalk && theme.gitalk.enabled){ %>
    <!-- 引入 Gitalk 的 CSS 和 JS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
    <script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
    
    <div class="blog-post-comments">
        <div id="gitalk-container"></div>
        <noscript><%= __('comments.no_js') %></noscript>
    </div>
    
    <script type="text/javascript">
        (function() {
            var config = {
                clientID: '<%= theme.gitalk.client_id %>',
                clientSecret: '<%= theme.gitalk.client_secret %>',
                repo: '<%= theme.gitalk.repo %>',
                owner: '<%= theme.gitalk.owner %>',
                admin: <%- JSON.stringify(theme.gitalk.admin) %>,
                id: md5(location.pathname),
                distractionFreeMode: <%= theme.gitalk.distractionFreeMode %>,
                proxy: 'https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token',
                // 回调地址，这里的地址要和 GitHub OAuth App 中设置的回调地址一致
                redirectUri: 'https://xxx'
            };
            var gitalk = new Gitalk(config);
            gitalk.render('gitalk-container');
        })();
    </script>
<% } %>

这里有一个问题卡了我很久，我在 GitHub OAuth App 中设置的回调地址是 https://www.xxx.com，但访问时我用的是 https://xxx.com，导致无法评论

访问统计

使用第三方计数器：不蒜子 https://busuanzi.ibruce.info/

在主题的 layout/_partial/footer.ejs 文件中添加下面的代码

1
2
3
4
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<span id="busuanzi_container_site_pv">本站总访问量 <span id="busuanzi_value_site_pv"></span> 次</span>
本站访客数 <span id="busuanzi_value_site_uv"></span> 人
阅读量 <span id="busuanzi_value_page_pv"></span> 次

在主题的 layout/post.ejs 文件中添加下面的代码

1
阅读量 <span id="busuanzi_value_page_pv"></span> 次

CloudFlare

将博客托管到 CloudFlare, 参考下面的链接

新建文章并部署

  1. hexo clean
  2. git add.
  3. git commit -m “new post”
  4. git push

样式效果

1
2
3
4
5
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

apple
banana

java

js